Jquery 显示错误信息后点击提交按钮

Question

** Jquery 显示错误消息后点击提交按钮 **

jquery 在错误消息未显示之前显示所有字段消息后提交按钮。

我不想在点击元素时引发错误，目前当我点击元素时它会直接显示错误。

$.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);
        }
      })

Answer 1

您对焦点元素的检查验证只是删除了 onfocusin 代码。你的最终代码如下

$.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 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>

现在验证在元素

的聚焦上启动

Jquery 显示错误信息后点击提交按钮

Jquery submit button click after error message show

javascript

forms

jquery