为按键功能上的文本字段添加错误框

Question

我试图限制带有字符和数字的文本框。
当我尝试在project name字段中输入数字时，应该为该字段添加error box。同样，当我开始输入有效项目名称error box时应该隐藏。
但它不工作。为什么？

$(document).ready(function() { 
 
    
 
    $('.onlyAlphabets').keypress(function (e) { 
 
     debugger 
 
     var regex = new RegExp("^[a-zA-Z ]+$"); 
 
     var str = String.fromCharCode(e.charCode ? e.which : e.charCode); 
 
     if (regex.test(str)) { 
 
      $(this).removeClass('error') 
 
      return true; 
 
     } 
 
     else { 
 
      $(this).addClass('error') 
 
      e.preventDefault(); 
 
      return false; 
 
     } 
 
    }); 
 
    $('.onlyNumeric').keypress(function (event) { 
 
     var charCode = (event.which) ? event.which : event.keyCode; 
 
     if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) { 
 
      return false 
 
     } 
 
     else {   
 
      return true; 
 
     } 
 
    
 
}); 
 
});

.error{ 
 
border:1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin"> 
 
        <label class="displayBlock">Project Name<span class="reqField">*</span></label> 
 
        <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="name" class="form-control onlyAlphabets projectName required"></label> 
 
       </div> 
 
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin"> 
 
        <label class="displayBlock">Client Name<span class="reqField">*</span></label> 
 
        <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="client" class="form-control onlyAlphabets clientName required"></label> 
 
       </div> 
 
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin"> 
 
        <label class="displayBlock">On site Co-ordinator<span class="reqField">*</span></label> 
 
        <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="onsite_coordinator" class="form-control onlyAlphabets onsiteCoOrd required"></label> 
 
       </div> 
 
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin"> 
 
        <label class="displayBlock">Duration(In months)<span class="reqField">*</span></label> 
 
        <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="duration" class="form-control onlyNumeric duration required"></label> 
 
       </div>

Answer 1

而不是增加错误框的只有你限制在该领域的数字。 因为您在Keypress事件中编写了该功能。所以，直到你按下有效的字符就会显示出错误

所以只是简单地限制人数在这些领域像你这样的持续时间

$(document).ready(function() { 
 
    
 
    $('.onlyAlphabets').keypress(function (e) { 
 
     debugger 
 
     var regex = new RegExp("^[a-zA-Z ]+$"); 
 
     var str = String.fromCharCode(e.charCode ? e.which : e.charCode); 
 
     if (regex.test(str)) { 
 
      
 
      return true; 
 
     } 
 
     else { 
 
      
 
      e.preventDefault(); 
 
      return false; 
 
     } 
 
    }); 
 
    $('.onlyNumeric').keypress(function (event) { 
 
     var charCode = (event.which) ? event.which : event.keyCode; 
 
     if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) { 
 
      return false 
 
     } 
 
     else {   
 
      return true; 
 
     } 
 
    
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin"> 
 
        <label class="displayBlock">Project Name <span class="reqField">*</span></label> 
 
        <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="name" class="form-control onlyAlphabets projectName required"></label> 
 
       </div> 
 
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin"> 
 
        <label class="displayBlock">Client Name<span class="reqField">*</span></label> 
 
        <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="client" class="form-control onlyAlphabets clientName required"></label> 
 
       </div> 
 
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin"> 
 
        <label class="displayBlock">On site Co-ordinator<span class="reqField">*</span></label> 
 
        <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="onsite_coordinator" class="form-control onlyAlphabets onsiteCoOrd required"></label> 
 
       </div> 
 
       <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 txtBoxMargin"> 
 
        <label class="displayBlock">Duration(In months)<span class="reqField">*</span></label> 
 
        <label class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin"><input type="text" name="duration" class="form-control onlyNumeric duration required"></label> 
 
       </div>