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

Posted 2023-05-09

【中文标题】Jquery 仅在第二次点击时验证提交表单

【英文标题】：Jquery validate submit form only on second click

【发布时间】：2017-07-28 22:38:30

【问题描述】：

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 回调被触发，功能正常工作。

【问题讨论】：

发布html代码表单

@bRIMOs 更新为 HTML 表单

【参考方案1】：

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

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

【讨论】：

否，验证未包含在点击事件下。 debug:true 选项根据要求设置。我将进行 ajax 调用以提交表单详细信息（因此无需提交表单）。但是在第一次单击时，即使表单有效，它也不会进入 submitHandler 本身。

@Praveenkumar，你用那个类验证了多少表格？

只有一个表单被验证。

@Praveenkumar，请为您的问题构建一个 jsFiddle 演示。我在您的代码中看不到任何会强制单击两次的内容。

@Praveenkumar，还要检查您的控制台是否有错误。 .validate( ... )末尾的括号不正确，ignore可以放在.validate()里面。