爲按鍵功能上的文本字段添加錯誤框

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>