2017-03-08 85 views
0

HTMLjQuery驗證只在第二次點擊

<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:/^[email protected]+\..+$/ 
       }, 
       "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回調命中並且功能起作用。

+0

發佈html代碼形式 –

+0

@bRIMOs以HTML表單更新 – Praveenkumar

回答

0

首先,debug: true將始終阻止表單提交,因此您發佈的代碼對您描述的問題沒有意義。

其次,你是否在click處理程序中包裝.validate()?如果是這樣,那完全解釋了這個問題。 .validate()方法僅用於初始化插件,不應將其包裝在click處理程序中。否則,第一次點擊會初始化插件,第二次點擊會正常運行。

+0

不驗證是不包裝在點擊事件下。 debug:true選項根據需要設置。我會通過ajax調用來提交表單詳細信息(所以不需要表單提交)。但是,首先點擊即使表單有效,也不會進入submitHandler本身。 – Praveenkumar

+0

@Praveenkumar,你有多少種形式與該課程一起驗證? – Sparky

+0

只有一種表單經過驗證。 – Praveenkumar