JQuery表单验证，并显示错误消息

Question

我尝试了以下代码来验证字段。工作顺利。但我现在面临两个问题。

1. 当必填字段中没有值时，单击后将显示错误消息。但是，如果必填字段中有值，则单击后会从所有字段中删除错误消息。我希望在单击该字段中的值后将错误从该字段中删除

2.点击方法在这里起作用

$(".submit_btn").click(function(){ 
// something here
});

但为什么不这样工作(提交按钮(

$('form').on('submit', function () {
// something here
});

$(".submit_btn").click(function(){ 
$('.trexright-frs input[required]').parent().next('.error').remove(); 
if (!$('.trexright-frs input[required]').val()) {
$(".trexright-frs input[required]").parent().after("<span class='error'>Required field.</span>");
} 
});

.trexright-frs p,
.trexright-frs input {
width: 100%;
}
.error {
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trexright">
<form name="checkout" method="post" class="trexright_form" action="">
<div class="trexright-frs">
<p class="form-row">
<label for="first_name" class="">First Name</label>
<span class="input-wrapper">
<input type="text" class="first_name_class" name="first_name" id="first_name_" placeholder="First name" value="" required />
</span>
<!-- <span class="field_error">This field is required.</span> -->
</p>
<p class="form-row">
<label for="last_name" class="">Last Name</label>
<span class="input-wrapper">
<input type="text" class="last_name_class" name="last_name" id="last_name_" placeholder="Last name" value="" required />
</span>
<!-- <span class="field_error">This field is required.</span> -->
</p>
<p class="form-row">
<label for="phone" class="">Phone</label>
<span class="input-wrapper">
<input type="text" class="phone_number" name="phone" id="phone_no" placeholder="Phone" value="" required />
</span>
<!-- <span class="field_error">This field is required.</span> -->
</p>
<p class="form-row">
<label for="location" class="">Location</label>
<span class="input-wrapper">
<input type="text" class="location_class" name="location" id="location_" placeholder="Location" value="" />
</span>
<!-- <span class="field_error">This field is required.</span> -->
</p>
<input type="submit" value="Submit" class="submit_btn">
</form>
</div>
</div>

Answer 1

请遵循以下代码片段，它将对您有所帮助。

$( document ).ready(function() {
/*$(".submit_btn").click(function(){ 
$('.trexright-frs input[required]').parent().next('.error').remove(); 
if (!$('.trexright-frs input[required]').val()) {
$(".trexright-frs input[required]").parent().after("<span class='error'>Required field.</span>");
} 
});*/
$(document).on('submit','form',function(event){

$('.trexright-frs input.required').parent().next('.error').remove(); 
var countError = 0;
$( '.trexright-frs input.required' ).each(function( index ) {
if ($(this).val()=='') {
$(this).parent().after("<span class='error'>Required field.</span>");
countError++;
}

});
if(countError!='0')
return false;
else
return true;
});
$( "input.required" ).keyup(function() {
if($(this).val()!=''){
$(this).parent().next('.error').remove();
}
});
});

.trexright-frs p,
.trexright-frs input {
width: 100%;
}
.error {
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trexright">
<form name="checkout" method="post" class="trexright_form" action="">
<div class="trexright-frs">
<p class="form-row">
<label for="first_name" class="">First Name</label>
<span class="input-wrapper">
<input type="text" class="first_name_class required" name="first_name" id="first_name_" placeholder="First name" value="" />
</span>
<!-- <span class="field_error">This field is required.</span> -->
</p>
<p class="form-row">
<label for="last_name" class="">Last Name</label>
<span class="input-wrapper">
<input type="text" class="last_name_class required" name="last_name" id="last_name_" placeholder="Last name" value="" />
</span>
<!-- <span class="field_error">This field is required.</span> -->
</p>
<p class="form-row">
<label for="phone" class="">Phone</label>
<span class="input-wrapper">
<input type="text" class="phone_number required" name="phone" id="phone_no" placeholder="Phone" value="" />
</span>
<!-- <span class="field_error">This field is required.</span> -->
</p>
<p class="form-row">
<label for="location" class="">Location</label>
<span class="input-wrapper">
<input type="text" class="location_class" name="location" id="location_" placeholder="Location" value="" />
</span>
<!-- <span class="field_error">This field is required.</span> -->
</p>
<input type="submit" value="Submit" class="submit_btn">
</form>
</div>
</div>