I have javascript code where the validation does not allow more than 20 characters in text box. But, I also want to disallow in special characters in the validation; how can this be acplished.

Here is my current validation code:

<script type="text/javascript" src=".8.2.js">
/script>
<script type='text/javascript'>
$(function()
{ $('#QI4562040').keyup(function() 
{
  var desc = $('#QI4562040').val(); 
  var len = desc.length;
   if       (desc.length >= 10) 
   { 
      this.value = this.value.substring(0, 10);
    } $('#spntxt').text(10 - len + ' Characters Left');
  }); 
}); </script>

I have javascript code where the validation does not allow more than 20 characters in text box. But, I also want to disallow in special characters in the validation; how can this be acplished.

Here is my current validation code:

<script type="text/javascript" src="https://code.jquery./jquery-1.8.2.js">
/script>
<script type='text/javascript'>
$(function()
{ $('#QI4562040').keyup(function() 
{
  var desc = $('#QI4562040').val(); 
  var len = desc.length;
   if       (desc.length >= 10) 
   { 
      this.value = this.value.substring(0, 10);
    } $('#spntxt').text(10 - len + ' Characters Left');
  }); 
}); </script>

• javascript
• jquery
• html

• so, what is your question? api.jquery./on could help anyways... – thriqon Commented Jan 9, 2015 at 13:23
• Using the on keyword as linked by Thriqon will help you. Using only keyup means the event is listened for only once: when you press the first key. – yesman Commented Jan 9, 2015 at 13:25
• can you make a fiddle – sanoj lawrence Commented Jan 9, 2015 at 13:29
• This question has your answer probably! – surajck Commented Jan 9, 2015 at 13:40
• You can, under HTML5, do this mostly in HTML: jsfiddle/davidThomas/ycwvscwz (albeit with some cross-browser issues, sadly). – David Thomas Commented Jan 10, 2015 at 3:01

4 Answers 4

try bellow script this will not allow special charter # $ % ^ & * ( )

function validate() {
    var element = document.getElementById('input-field');
    element.value = element.value.replace(/[^a-zA-Z0-9@]+/, '');
};

<input type="text" id="input-field" onkeyup="validate();"/>
        

I just use your codes and modify:

$(function()
{ $('#QI4562040').keyup(function() 
{
  var desc = $('#QI4562040').val(); 
  var lastChar = desc.slice(-1);
  var spc = !((lastChar.charCodeAt()>=48&&lastChar.charCodeAt()<=57)||(lastChar.charCodeAt()>=65&&lastChar.charCodeAt()<=90)||(lastChar.charCodeAt()>=97&&lastChar.charCodeAt()<=122));

   if (desc.length >= 10 || spc) 
   { 
      this.value = this.value.substring(0, desc.length-1);
   } $('#spntxt').text(10 - len + ' Characters Left');
  }); 
}); 

You must use the keypress event

<input type="text" onkeypress="return isValidCharacter(event)" />

and define the javascript event, the validation can do it with regular expressions

function isValidCharacter(e) {  
var key;
document.all ? key = e.keyCode : key = e.which; 
var pressedCharacter = String.fromCharCode(e)   
var regExp = /^[a-zA-ZÁÉÍÓÚáéñíóú ]*$/; 
return regExp.test(pressedCharacter); }

If the method returns true the character will be printed

For Input Length, use Html5 Max Length Property

$(function(){
  $('#QI4562040').keyup(function(){
    var input_val = $(this).val();
    var inputRGEX = /^[a-zA-Z0-9]*$/;
    var inputResult = inputRGEX.test(input_val);
    if(!(inputResult))
    {     
      this.value = this.value.replace(/[^a-z0-9\s]/gi, '');
    }
    $('#spntxt').text(10 - input_val.length + ' Characters Left');
  });
});

<input type='text' name='' id='QI4562040' maxlength='10'/>
<div id='spntxt'></div>

<script type="text/javascript" src="https://code.jquery./jquery-3.3.1.slim.min.js"></script>