Jquery submit button click after error message show-CodePudding

** 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  role="status" aria-hidden="true"></span><span >'   LOADING   '...</span>';
        $("#pho_noNumberSubscriptionBtn").html(load); 
        $("#pho_noNumberSubscriptionBtn").prop("disabled", true);
        }
      })

CodePudding user response：

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 number 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  role="status" aria-hidden="true"></span><span >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