Отключение поля ввода «Вся следующая форма», если в текущем вводе есть ошибка или предупреждение

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>

покажите мне, как я могу гарантировать, что если ошибка или предупреждение будут постоянно отображаться, даже если пользователь будет фокусироваться в следующих полях и не сможет удалять данные

спасибо

Теги:
forms

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

});

U может использовать Validate Plugin для более простой проверки

  • 0
    Хороший чувак ... Это мой первый ответ, чувак ...
  • 0
    Спасибо это работает

Ещё вопросы

Сообщество Overcoder
Наверх
Меню