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

我使用的是一个注册表，其中的用户详细信息是在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);     

});

var spaceReg=/\s/；
var onlylettersReg=/^[A-Za-z]+$/i；
变量lowUpperCaseReg=/（？=.[a-z]）（？=.[a-z]）/；
变量symbolsCheckReg=/[-！$%^&*（{}[\]'””，？+=\/\~]/；
var noCheckReg=/\d/；
var-timerId=0；
清除超时（timerId）；
$（“表单输入[type=text]，表单输入[type=password]”）。在（“keyup”，函数（事件）{
timerId=setTimeout（函数（）{
$（'.form_error、.form_warning、.form_warning'）。淡出（3000）；
$（'.error\u indicator img、.success\u indicator img、.warning\u indicator img'）。淡出（3000）；
},1000 );
});
$（“#firstname”）。在（“键控”，函数（事件）{
timerId=setTimeout（函数（）{
var dataValid=true；
var firstname=$（'#firstname'）.val（）；
if（firstname==“”）//针对fullname的空字段进行验证
{
dataValid=false；
$（'#firstname_warning'）.html（''）；
$（“#firstname_response”）.html（'请在必填字段中输入您的名字以继续。谢谢'）；
}                 
else if（onlylettersReg.test（firstname）==false）//工作电子邮件地址验证
{
dataValid=false；
$（'#firstname_error'）.html（''；
$（“#firstname_response”）.html（'对不起，您的名字应该只包含字母。谢谢'）；
$（“#firstname”）.focus（）；
}
else if（firstname.length>15）//工作电子邮件地址验证
{
dataValid=false；
$（'#firstname_error'）.html（''；
$（“#firstname_response”）.html（'对不起，您的名字最多应该有15个字符。谢谢'）；
$（“#firstname”）.focus（）；
}
if（dataValid==true）{
$（'#firstname_success'）.html（''）.fadeIn（3000）；
}否则{
$（'#firstname_success'）.html（''.hide（）；
}
},2000);
});
$（“#lastname”）。在（“键控”，函数（事件）{
var dataValid=true；
timerId=setTimeout（函数（）{
var lastname=$（'#lastname'）.val（）；
if（lastname==“”）//针对电话号码的空字段进行验证
{
dataValid=false；
$（'#lastname_warning'）.html（''；
$（“#lastname_response”）.html（'请在必填字段中输入您的姓氏以继续。谢谢'）；
$（“#lastname”）.focus（）；
}
else if（lastname.length>15）//工作电子邮件地址验证
{
dataValid=false；
$（'#lastname_error'）.html（''；
$（“#lastname_response”）.html（'对不起，您的名字最多应该有15个字符。谢谢'）；
$（“#lastname”）.focus（）；
}
else if（onlylettersReg.test（lastname）==false）//工作电子邮件地址验证
{
dataValid=false；
$（'#lastname_error'）.html（''；
$（“#lastname_response”）.html（'对不起，您的名字应该只包含字母。谢谢'）；
$（“#lastname”）.focus（）；
}
if（dataValid==true）{
$（'#lastname_success'）.html（''）.fadeIn（3000）；
}否则{
$（'#lastname_success'）.html（''.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);     

});

var spaceReg=/\s/；
var onlylettersReg=/^[A-Za-z]+$/i；
变量lowUpperCaseReg=/（？=.[a-z]）（？=.[a-z]）/；
变量symbolsCheckReg=/[-！$%^&*（{}[\]'””，？+=\/\~]/；
var noCheckReg=/\d/；
var-timerId=0；
var dataValid=true；
清除超时（timerId）；
$（“表单输入[type=text]，表单输入[type=password]”）。在（“keyup”，函数（事件）{
timerId=setTimeout（函数（）{
$（'.form_error、.form_warning、.form_warning'）。淡出（3000）；
$（'.error\u indicator img、.success\u indicator img、.warning\u indicator img'）。淡出（3000）；
},1000 );
});
$（“#firstname”）。在（“键控”，函数（事件）{
timerId=setTimeout（函数（）{
//var dataValid=true；
var firstname=$（'#firstname'）.val（）；
if（firstname==“”）//针对fullname的空字段进行验证
{
dataValid=false；
$（'#firstname_warning'）.html（''）；
$（“#firstname_response”）.html（'请在必填字段中输入您的名字以继续。谢谢'）；
}                 
else if（onlylettersReg.test（firstname）==false）//工作电子邮件地址验证
{
dataValid=false；
$（'#firstname_error'）.html（''；
$（“#firstname_response”）.html（'对不起，您的名字应该只包含字母。谢谢'）；
$（“#firstname”）.focus（）；
}
else if（firstname.length>15）//工作电子邮件地址验证
{
dataValid=false；
$（'#firstname_error'）.html（''；
$（“#firstname_response”）.html（'对不起，您的名字最多应该有15个字符。谢谢'）；
$（“#firstname”）.focus（）；
}
if（dataValid==true）{
$（'#firstname_success'）.html（''）.fadeIn（3000）；
}否则{
$（'#firstname_success'）.html（''.hide（）；
}
},2000);
});
$（“#lastname”）。在（“键控”，函数（事件）{
//var dataValid=true；
timerId=setTimeout（函数（）