キーアップイベントでユーザーの詳細がチェックされる登録フォームを使用しています。現在の入力にエラーがある場合、次の入力フィールドをすべて無効にしたいと思います。ユーザーが間違ったデータを入力し、次のフィールドに入力を開始した場合に注意しました。エラーは表示されなくなりました。キーアップを使用してユーザーデータを確認しています。または、ユーザーが別の入力を開始した場合でも、特定の入力フィールドにエラーがあることをユーザーに示し続ける方法を提案できます。これは私の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>
ユーザーが次のフィールドにフォーカスしてデータを送信できない場合でも、エラーまたは警告が継続的に表示されることを確認する方法を教えてください
ありがとうございました