0

我正在使用注册表单，其中在 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>

告诉我如何确保即使用户关注下一个字段并且无法汇总数据，是否连续显示错误或警告

谢谢

4

1 回答 1

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);     

});

您可以使用验证插件进行更简单的验证

于 2013-10-04T12:53:33.583 回答