Jump to content

Restrictions for input type=text with OnChange

kokozimar

By kokozimar
in JavaScript

 Share

Recommended Posts

kokozimar Newbie

kokozimar

Posted
Posted

Could someone help me with restrictions for input text? 

<input type = text size = 18 name = part_numb value = '' pattern = '([A-NP-Z0-9 -]). {0,50}' id = 'part_numb' required>

In this case, it's not working.

My restrictions are:

  1. The value can't content letter "O", auto-replacement with number "0"

  2. The value can't content small letters, only Capital. (auto-replacement)

  3. The value can't content special symbols except "-" but the value can't start or finish with "-" (auto-removal)

  4. The value can't content free spaces. (auto-removal)

5.  This input is required.

  1. The symbols have to be "A-N", "P-Z", "0-9", "-" 

I thinks that have to use "onChange", but I am not sure.

Please excuse me if this topic is not for here.

Thanks in advance.

Link to comment
Share on other sites
kokozimar Newbie

kokozimar

Posted
  • Author
Posted (edited)

  

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>
    <script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<input type="text" class="text" name="part_numb" id="part_numb" value="" onkeyup="valid(this)" onblur="valid(this)" required>
    <script type="text/javascript">
    
  function valid(f) {
!(/^[A-Z;0-9;-]*$/i).test(f.value)?f.value = f.value.replace(/[^A-Z;0-9;-]/ig,''):null;
} 

        $('body').on('input', 'input[name=part_numb]', function() {

  $(this).val($(this).val().replace('a', 'A'));
  $(this).val($(this).val().replace('b', 'B'));
  $(this).val($(this).val().replace('c', 'C'));
  $(this).val($(this).val().replace('d', 'D'));
  $(this).val($(this).val().replace('e', 'E'));
  $(this).val($(this).val().replace('f', 'F'));
  $(this).val($(this).val().replace('g', 'G'));
  $(this).val($(this).val().replace('h', 'H'));
  $(this).val($(this).val().replace('i', 'I'));
  $(this).val($(this).val().replace('j', 'J'));
  $(this).val($(this).val().replace('k', 'K'));
  $(this).val($(this).val().replace('l', 'L'));
  $(this).val($(this).val().replace('m', 'M'));
  $(this).val($(this).val().replace('n', 'N'));
  $(this).val($(this).val().replace('o', '0'));
  $(this).val($(this).val().replace('O', '0'));
  $(this).val($(this).val().replace('p', 'P'));
  $(this).val($(this).val().replace('q', 'Q'));
  $(this).val($(this).val().replace('r', 'R'));
  $(this).val($(this).val().replace('s', 'S'));
  $(this).val($(this).val().replace('t', 'T'));
  $(this).val($(this).val().replace('u', 'U'));
  $(this).val($(this).val().replace('v', 'V'));
  $(this).val($(this).val().replace('w', 'W'));
  $(this).val($(this).val().replace('x', 'X'));
  $(this).val($(this).val().replace('y', 'Y'));
  $(this).val($(this).val().replace('z', 'Z'));
  $(this).val($(this).val().replace(' ', ''));
  $(this).val($(this).val().replace('-', '-'));
  
});
    </script>

</body></html>

 

Hi all again,

 

May be it's little bit stupid wrote, but it's the way it's almost work. I complied almost all rules. But the rule to not start with '-' I haven't idea how to realize. Please help me.

 

Thanks in advance.

 

Edited by kokozimar
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

you  just need to convert any value to uppercase, then any 'o' or 'O' converted to lowercase then find index and converted to ''0', if '-' found at end of total length of string length trim it. 

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="//code.jquery.com/jquery-2.1.1.js"></script>
    </head>
    <body>

        <input type="text" class="text" name="part_numb" id="part_numb" value="" onkeyup="valid(this)" onblur="validlast(this)" required>
        <script type="text/javascript">

	    function valid(f) {
		//console.log((f.value).length);
		!(/^[A-Z;0-9;-]*$/i).test(f.value) ? f.value = f.value.replace(/[^A-Z;0-9;-]/ig, '') : null;
	    }
	    function validlast(f) {
		if (f.value.indexOf("-") == f.value.length - 1) {
		    f.value = f.value.slice(0, -1);
		}
	    }
	    $('body').on('keyup', 'input[name="part_numb"]', function () {
		console.log("this " + (this.value.toLowerCase()));
		if ($(this).val().toLowerCase().indexOf("o") != -1)
		{
		    $(this).val($(this).val().replace("o", "0"));
		} else
		{
		    $(this).val($(this).val().replace($(this).val(), $(this).val().toUpperCase()));
		}
		if ($(this).val() === "-" && $(this).val().length == 1)
		{
		    $(this).val($(this).val().slice(0, -1));
		}



		/* $(this).val($(this).val().replace('b', 'B'));
		 $(this).val($(this).val().replace('c', 'C'));
		 $(this).val($(this).val().replace('d', 'D'));
		 $(this).val($(this).val().replace('e', 'E'));
		 $(this).val($(this).val().replace('f', 'F'));
		 $(this).val($(this).val().replace('g', 'G'));
		 $(this).val($(this).val().replace('h', 'H'));
		 $(this).val($(this).val().replace('i', 'I'));
		 $(this).val($(this).val().replace('j', 'J'));
		 $(this).val($(this).val().replace('k', 'K'));
		 $(this).val($(this).val().replace('l', 'L'));
		 $(this).val($(this).val().replace('m', 'M'));
		 $(this).val($(this).val().replace('n', 'N'));*/
		//$(this).val($(this).val().replace('o', '0'));
		//$(this).val($(this).val().replace('O', '0'));
		/* $(this).val($(this).val().replace('p', 'P'));
		 $(this).val($(this).val().replace('q', 'Q'));
		 $(this).val($(this).val().replace('r', 'R'));
		 $(this).val($(this).val().replace('s', 'S'));
		 $(this).val($(this).val().replace('t', 'T'));
		 $(this).val($(this).val().replace('u', 'U'));
		 $(this).val($(this).val().replace('v', 'V'));
		 $(this).val($(this).val().replace('w', 'W'));
		 $(this).val($(this).val().replace('x', 'X'));
		 $(this).val($(this).val().replace('y', 'Y'));
		 $(this).val($(this).val().replace('z', 'Z'));
		 $(this).val($(this).val().replace(' ', ''));
		 $(this).val($(this).val().replace('-', '-'));*/

	    });
        </script>

    </body></html>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...