** Jquery submit button click after error message show **
jquery submit button after all field message show before error message not show.
i not want to fire error on click element, currently when I click on element it shows error directly.
$.validator.addMethod("PhoneValidation", (function(e) {
let regex = /^(0)(3)[0-9]{7}$/.test(e);
return(regex);
}), PHONE_VALIDATE);
$("#Number_validation_form").validate({
rules: {
pho_no: {
required: true,
PhoneValidation: true
}
},
messages: {
pho_no: {
required: PHONE_VAL_REQUIRED
}
},
errorPlacement: function(e, t) {
t.is('input[name="accepted"]') ? e.insertAfter($(".checkboxlabel")) : e.insertAfter(t)
},
onfocusin: function(element) {
$(element).valid();
},
success: function(e){
$("#right-mark-img").removeClass( "opacity_0" );
$("#pho_noNumberSubscriptionBtn").prop('disabled', false);
},
submitHandler: function(e) {
//console.log(e);
let load = '<span class="spinner-border spinner-border-sm spin" role="status" aria-hidden="true"></span><span class="sr-only">' + LOADING + '...</span>';
$("#pho_noNumberSubscriptionBtn").html(load);
$("#pho_noNumberSubscriptionBtn").prop("disabled", true);
}
})
>Solution :
Your checking validation on focus element just remove onfocusin code.
your final code like below
$.validator.addMethod("PhoneValidation", (function (e) {
let regex = /^(0)(3)[0-9]{7}$/.test(e);
return(regex);
}), "Phone number is not validate");
$("#Number_validation_form").validate({
rules: {
pho_no: {
required: true,
PhoneValidation: true
}
},
messages: {
pho_no: {
required: "Phone nunber is required"
}
},
errorPlacement: function (e, t) {
t.is('input[name="accepted"]') ? e.insertAfter($(".checkboxlabel")) : e.insertAfter(t)
},
success: function (e) {
$("#right-mark-img").removeClass("opacity_0");
$("#pho_noNumberSubscriptionBtn").prop('disabled', false);
},
submitHandler: function (e) {
//console.log(e);
let load = '<span class="spinner-border spinner-border-sm spin" role="status" aria-hidden="true"></span><span class="sr-only">loading...</span>';
$("#pho_noNumberSubscriptionBtn").html(load);
$("#pho_noNumberSubscriptionBtn").prop("disabled", true);
}
});<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js" integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<form id="Number_validation_form" method="post" action="javascript:void(0);">
<input type="text" name="pho_no" placeholder="Phone Number">
<input type="submit" value="Validate">
</form>
</body>
</html>Now Validation is fire on focus out of element