Question

HTML

<form class="form" name="request_more_details" class="new_leads_form_data" action="http://pr.com:3000/leads" accept-charset="UTF-8" method="post" novalidate="novalidate">

    <label class="ghost-text" for="primary_lead_name">Full Name</label>
    <input maxlength="50" class="form-control fullName" placeholder="Full Name" title="Full Name" id="primary_lead_name" type="text" name="leads_form_data[name]">

    <label class="ghost-text" for="primary_lead_email">Email</label>
    <input class="form-control email" placeholder="Email" title="Email" id="primary_lead_email" type="email" name="leads_form_data[email]">

    <label class="ghost-text" for="primary_lead_phone">Phone </label>
    <input class="form-control phone" placeholder="Phone " title="Phone" id="primary_lead_phone" type="tel" name="leads_form_data[phone]" aria-required="true" aria-invalid="true">

    <input type="submit" name="commit" value="Contact Agent" class="submit btn btn-block btn-primary margin-bottom lead-form-submit" id="primary_lead_submit">

</form>

以下是我的Javascript功能。

$('.form').validate({
            debug: true,
            // custom function for keyup event
            onkeyup: function(element) {
              var modifiedClass = 'modified';
              var $parent = $(element).parent();
              if ($(element).val()) {
                $parent.addClass(modifiedClass);
              } else {
                $parent.removeClass(modifiedClass);
              }
            },
            rules: {
                "leads_form_data[email]": {
                    required: true,
                    email: true,
                    pattern:/^.+@.+\..+$/
                },
                "leads_form_data[phone]": {
                    required: isPhoneRequired(),
                    phoneUS: true
                }
            },
            messages: {
                "leads_form_data[name]": "Please enter your full name",
                "leads_form_data[email]": {
                    required: "Please enter your email",
                    email: "Please enter a valid email",
                    pattern: "Please enter a valid email address"
                },
                "leads_form_data[phone]": {
                    required: "Please enter your phone number",
                    phoneUS: "Please enter a valid phone number"
                },

            },
            // error handling
            errorPlacement: function(error, element) {       
                error.insertAfter(element);
            },
            submitHandler: function(form){
                //Handling ajax call             
           }).settings.ignore = ':not(select:hidden, input:visible, textarea:visible)';
    };

单击“提交”按钮后，在字段中输入数据后，不会触发SubmitHandler回调。

第二次点击“提交”按钮点击SubmitHandler回调，功能正常。

Answer 1

首先，debug: true将始终阻止表单提交，因此您发布的代码对您描述的问题没有意义。

其次，你在.validate()处理程序中包装click吗？如果是这样，那就完全解释了问题。 .validate()方法仅用于初始化插件，不应包含在click处理程序中。否则，第一次单击初始化插件，第二次单击正常。

Jquery仅在第二次点击时验证提交表单

1 个答案: