jquery驗證器 - 即使在無效的情況下，表單仍然會提交

我有一個基本規則的表單上的幾個字段，並且驗證器插件在填寫表單本身時表現不錯。但是，提交它時會出現問題，因爲即使未輸入有效的電子郵件地址，或者在其他文本框中輸入任何內容之前，它仍然會提交。jquery驗證器 - 即使在無效的情況下，表單仍然會提交

這裏是我的測試功能：

$(function() { 

    $("#submit_form_contact").validate({ 
     errorLabelContainer: '#errors' 
    }); 

    $('#contact_submit').click(function(e){ 

     if ($("#submit_form_contact").valid()) { 
      alert ('valid!'); 
     } else { 
      alert ('invalid!'); 
     } 
    }); 
});

HTML：

<form class="pure-form pure-form-aligned" id="submit_form_contact" novalidate> 
    <fieldset> 
    <div class="pure-control-group"> 
     <label for="name">Your Name:</label> 
     <input id="name" type="text" placeholder="Name" required> 
    </div> 

    <div class="pure-control-group"> 
     <label for="email">Your Email:</label> 
     <input id="email" type="email" placeholder="Email Address" required> 
    </div> 

    <div class="pure-control-group"> 
     <label for="email_text">Inquiry Type: </label> 
     <select id="inquiry_dropdown" class="pure-input-1-2"> 
     <option>General</option> 
     <option>Sales & Marketing</option> 
     <option>Press & Editorial</option> 
     </select> 
    </div> 

    <div class="pure-control-group"> 
     <label for="message" style="vertical-align: top;">Message:</label> 
     <textarea id="message" type="text" placeholder="Enter message here..." required></textarea> 
    </div>      

    <div id="errors" style="text-align: center; color: red;"></div> 

    <button id="contact_submit" class="pure-button pure-button-primary" style="background-color: #003A70; float:right; margin-right: 35px;margin-top:15px;">Submit</button> 
</div> 
</fieldset> 
</form>

...它仍然是有效的，每次警報。表單中的所有字段都標記爲「必需」。任何幫助將非常感激。的jsfiddle：http://jsfiddle.net/RcNTj/

來源

2013-09-21 Tim Aych

顯示你的HTML，並進行了演示小提琴問題。 – Barmar

http://jsfiddle.net/RcNTj/ –

它在小提琴中適合我。 – Barmar

更改id屬性name，並嘗試

<input name="name" type="text" placeholder="Name" required>

演示：Fiddle

來源

2013-09-21 15:59:36

再次感謝，阿倫！你統治。 –

原因是它只驗證每個名稱的第一個字段。由於所有字段都具有相同（不存在）的名稱，因此只驗證第一個字段。 – Barmar

從他們的文檔：http://knockoutjs.com/documentation/uniqueName-binding.html。以及如何在jQuery Validation中使用KO的示例：http://knockoutjs.com/examples/gridEditor.html。 – Alexandra

jquery驗證器 - 即使在無效的情況下，表單仍然會提交

回答

相關問題