如果currnt输入有错误或警告，则禁用All Next Form输入字段

Question

我正在使用注册表单，其中在keyup事件上检查用户详细信息。如果当前输入有错误，我想禁用所有下一个输入字段。我注意到，如果用户填写不正确的数据并开始填写下一个字段。错误不再显示。我正在使用keyup来检查用户数据。或者你可以建议一种方法，即使他已经开始填充另一个输入，我仍然可以向用户显示特定输入字段中存在错误。这是我的jquery代码

 var spaceReg=/\s/;
 var onlylettersReg=/^[A-Za-z]+$/i;
 var lowUpperCaseReg=/(?=.*[a-z])(?=.*[A-Z])/;
 var symbolsCheckReg=/[-!$%^&*(){}<>[\]'" . '"|#@:;.,?+=_\/\~]/;
 var noCheckReg=/\d/;
 var timerId=0;
 clearTimeout (timerId);

$("form input[type=text],form input[type=password]").on("keyup",function(event){   
    timerId=setTimeout(function(){
    $('.form_error,.form_warning,.form_warning').fadeOut(3000);
    $('.error_indicator img,.success_indicator img,.warning_indicator img').fadeOut(3000);
    },1000 );
});



 $("#firstname").on("keyup",function(event){

  timerId= setTimeout(function(){
 var dataValid = true;      
 var firstname= $('#firstname').val();
  if( firstname === "" ) //Validation against empty field for fullname
{
              dataValid=false;
$('#firstname_warning').html('<img src="assets/css/warning.png">');
                $("#firstname_response").html('<div class="form_warning">Please enter your firstname  in the required field to proceed. Thanks.</div>');
                }                 
             else if(onlylettersReg.test(firstname) ===false) //Validation for working email address
{
                dataValid=false;
             $('#firstname_error').html('<img src="assets/css/error.png">');

$("#firstname_response").html('<div class="form_error">Sorry, your name should contain  only letters. Thanks.</div>');
$("#firstname").focus();
}
              else if(firstname.length>15) //Validation for working email address
{
                 dataValid=false;
               $('#firstname_error').html('<img src="assets/css/error.png">');
$("#firstname_response").html('<div class="form_error">Sorry, your name should have max of 15 characters. Thanks.</div>');
$("#firstname").focus();
}

              if(dataValid===true){
                      $('#firstname_success').html('<img src="assets/css/success.png">').fadeIn(3000);
               }else{
                     $('#firstname_success').html('<img src="assets/css/success.png">').hide();
               }
    },2000);
});

$("#lastname").on(" keyup",function(event){
   var dataValid=true;
 timerId= setTimeout(function(){
 var lastname= $('#lastname').val();

        if( lastname=== "" ) //Validation against empty field for telephone number
{
             dataValid=false;
             $('#lastname_warning').html('<img src="assets/css/warning.png">');

$("#lastname_response").html('<div class="form_warning"  >Please enter your last name in the required field to proceed. Thanks.</div>');
$("#lastname").focus();
}
             else if(lastname.length>15) //Validation for working email address
{
              dataValid=false;
              $('#lastname_error').html('<img src="assets/css/error.png">');

$("#lastname_response").html('<div class="form_error">Sorry, your name should have max of 15 characters. Thanks.</div>');
$("#lastname").focus();
}
             else if(onlylettersReg.test(lastname) ===false) //Validation for working email address
{
              dataValid=false;
               $('#lastname_error').html('<img src="assets/css/error.png">');

$("#lastname_response").html('<div class="form_error">Sorry, your name should contain  only letters. Thanks.</div>');
$("#lastname").focus();
    }
             if(dataValid===true){
                       $('#lastname_success').html('<img src="assets/css/success.png">').fadeIn(3000);
               }else{
                     $('#lastname_success').html('<img src="assets/css/success.png">').hide();
                     $(this).nextAll().hide();
               }
  },2000);     

});

这是我的表格

<div id="success_response"></div>
 <div id="failed_response"></div>
<form action="" method="post" id="" autocomplete="off">
<p>
<label for="firstname">First Name:

</label>
<input name="firstName" type="text" id="firstname" autocomplete="off"
      value=""/>


<span id="firstname_warning" class="warning_indicator">  </span>
<span id="firstname_error" class="error_indicator">  </span>
<span id="firstname_success" class="success_indicator">  </span>
<span id="firstname_response"></span>
</p>

<p>
<label for="lastName">Last Name:

</label>
<input name="lastName" type="text"  id="lastname" autocomplete="off"
      value=""/>


<span id="lastname_warning" class="warning_indicator">  </span>
<span id="lastname_error" class="error_indicator">  </span>
<span id="lastname_success" class="success_indicator">  </span>
<span id="lastname_response"></span>
</p>

告诉我如何确保即使用户专注于下一个字段并且无法汇总数据也会持续显示错误或警告

谢谢

Answer 1

  

你的代码没问题老兄......     你需要很少的改变。     将dataValid变量更改为全局变量并设置为true并检入每个验证

修订代码

var spaceReg=/\s/;


var onlylettersReg=/^[A-Za-z]+$/i;
 var lowUpperCaseReg=/(?=.*[a-z])(?=.*[A-Z])/;
 var symbolsCheckReg=/[-!$%^&*(){}<>[\]'" . '"|#@:;.,?+=_\/\~]/;
 var noCheckReg=/\d/;
 var timerId=0;
var dataValid = true;      
 clearTimeout (timerId);

$("form input[type=text],form input[type=password]").on("keyup",function(event){   
    timerId=setTimeout(function(){
    $('.form_error,.form_warning,.form_warning').fadeOut(3000);
    $('.error_indicator img,.success_indicator img,.warning_indicator img').fadeOut(3000);
    },1000 );
});



 $("#firstname").on("keyup",function(event){

  timerId= setTimeout(function(){
// var dataValid = true;      
 var firstname= $('#firstname').val();
  if( firstname === "" ) //Validation against empty field for fullname
{
              dataValid=false;
$('#firstname_warning').html('<img src="assets/css/warning.png">');
                $("#firstname_response").html('<div class="form_warning">Please enter your firstname  in the required field to proceed. Thanks.</div>');
                }                 
             else if(onlylettersReg.test(firstname) ===false) //Validation for working email address
{
                dataValid=false;
             $('#firstname_error').html('<img src="assets/css/error.png">');

$("#firstname_response").html('<div class="form_error">Sorry, your name should contain  only letters. Thanks.</div>');
$("#firstname").focus();
}
              else if(firstname.length>15) //Validation for working email address
{
                 dataValid=false;
               $('#firstname_error').html('<img src="assets/css/error.png">');
$("#firstname_response").html('<div class="form_error">Sorry, your name should have max of 15 characters. Thanks.</div>');
$("#firstname").focus();
}

              if(dataValid===true){
                      $('#firstname_success').html('<img src="assets/css/success.png">').fadeIn(3000);
               }else{
                     $('#firstname_success').html('<img src="assets/css/success.png">').hide();
               }
    },2000);
});

$("#lastname").on(" keyup",function(event){
  // var dataValid=true;
 timerId= setTimeout(function(){
 var lastname= $('#lastname').val();
       if(dataValid == true) /* Checking for errors.. Enters if there is NO errors*/
   {
        if( lastname=== "" ) //Validation against empty field for telephone number
  {
             dataValid=false;
             $('#lastname_warning').html('<img src="assets/css/warning.png">');

$("#lastname_response").html('<div class="form_warning"  >Please enter your last name in the required field to proceed. Thanks.</div>');
$("#lastname").focus();
}
             else if(lastname.length>15) //Validation for working email address
{
              dataValid=false;
              $('#lastname_error').html('<img src="assets/css/error.png">');

$("#lastname_response").html('<div class="form_error">Sorry, your name should have max of 15 characters. Thanks.</div>');
$("#lastname").focus();
}
             else if(onlylettersReg.test(lastname) ===false) //Validation for working email address
{
              dataValid=false;
               $('#lastname_error').html('<img src="assets/css/error.png">');

$("#lastname_response").html('<div class="form_error">Sorry, your name should contain  only letters. Thanks.</div>');
$("#lastname").focus();
    }
             if(dataValid===true){
                       $('#lastname_success').html('<img src="assets/css/success.png">').fadeIn(3000);
               }else{
                     $('#lastname_success').html('<img src="assets/css/success.png">').hide();
                     $(this).nextAll().hide();
               }
  }
  },2000);     

});

  

U可以使用Validate Plugin进行更简单的验证