Question

我正在使用jQuery验证，我遇到了两个问题。一，下拉列表selection不验证，（2）如果字段无效，它仍然提交。（我也在使用bootstrap）

我的HTML：

<form action="" id="contact-form" class="form-horizontal">
  <fieldset>
    <legend>Contact Us</small>
    </legend>
    <div class="control-group">
      <label class="control-label" for="name">Name:</label>
      <div class="controls">
        <input type="text" class="input-xlarge" name="name" id="name">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="email">Email Address:</label>
      <div class="controls">
        <input type="text" class="input-xlarge" name="email" id="email">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="subject">Subject:</label>
      <div class="controls">
        <select name="subject" id="subject">
          <option value></option>
          <option value- "1">General Questions</option>
          <option value- "2">Membership</option>
          <option value- "3">Club Fees</option>
          <option value- "4">Proshop & Lessons</option>
          <option value- "5">Events</option>
          <option value- "6">Leagues &amp; Programs</option>
          <option value- "7">Resturant &amp; Bar</option>
        </select>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="message">Message:</label>
      <div class="controls">
        <textarea class="input-xlarge" name="message" id="message" rows="3"></textarea>
      </div>
    </div>
    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Submit</button>
      <button class="btn">Cancel</button>
    </div>
  </fieldset>
</form>

我的JavaScript：

$(document).ready(function() {
  $('#contact-form').validate({
    rules: {
      name: {
        minlength: 2,
        maxlength: 20,
        required: true
      },
      email: {
        required: true,
        email: true
      },
      subject: {
        selectNone: true

      },
      message: {
        minlength: 2,
        required: true
      }
    },
    highlight: function(label) {
      $(label).closest('.control-group').addClass('error');
    },
    success: function(label) {
      label
        .text('OK!').addClass('valid')
        .closest('.control-group').addClass('success');
    }
  });

问题：

为什么下拉列表无效？
为什么表单未经验证提交？

Answer 1

首先，value="0"标记中的所有<option>实际上都是value-0 - 需要更正。

对于表单提交问题，您需要阻止对提交操作的默认操作，并为您的成功添加submitHandler操作：

$(document).ready(function(){
$('#contact-form').submit(function(e){
   e.preventDefault();
   }).validate({
       rules: {
      name: {
        minlength: 2,
        maxlength: 20,
        required: true
      },
      email: {
        required: true,
        email: true
      },
      subject: {
    selectNone: true

      },
      message: {
        minlength: 2,
        required: true
      }
    },
    highlight: function(label) {
        $(label).closest('.control-group').addClass('error');
    },
    success: function(label) {
        label
            .text('OK!').addClass('valid')
            .closest('.control-group').addClass('success');
    },
    submitHandler: function(form){
        form.submit();
    }
  });

Answer 2

您错过了结束set of brackets
您可以custom validator使用select
selectNone是那里的问题
value-0更改为value = 0

<强> DEMO

希望这有帮助

jQuery验证仍然使用无效字段提交

2 个答案: