jQuery验证程序-即使无效，表单仍会提交 [英] jquery validator - form still getting submitted even when invalid

问题描述

我在表单上有一些基本规则的字段，并且在填写表单本身时，validator插件的性能很好.但是，提交时会出现问题，因为即使没有输入有效的电子邮件地址，或者在其他文本框中未输入任何内容之前，它仍然会提交.

I have a few fields on a form with basic rules and the validator plugin does well when filling out the form itself. Submitting it, however, there is a problem because it still submits even when a valid email address hasn't been put in or before anything has been entered in other text boxes.

这是我的测试功能:

$(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/

...It still alerts as valid every time. All fields in the form are marked 'required'. Any help would be much appreciated. JSFiddle: http://jsfiddle.net/RcNTj/

推荐答案

将id属性更改为name并尝试

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

演示:小提琴

这篇关于jQuery验证程序-即使无效，表单仍会提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！