如果当前输入有错误或警告,则禁用所有下一个表单输入字段

Disabling All Next Form input field if currnt input has an error or warning

本文关键字:输入 下一个 表单 字段 有错误 如果 警告      更新时间:2023-09-26

我正在使用一个注册表,其中在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>

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

谢谢

你的代码没有问题,伙计... 你需要很少的改变。 将 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);     
});

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