4

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

我的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');
    }
  });

问题：

  1. 为什么下拉菜单无效？
  2. 为什么表单未经验证就提交？
4

2 回答 2

4

Firstly, all of your value="0" in your <option> tags are actually value-0 - that needs to be corrected.

For the form submit issue, you need to prevent the default action on your submit action, and add a submitHandler action to your success:

$(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();
    }
  });
于 2012-04-28T04:55:37.793 回答
1
  1. 你错过了一个结束set of brackets
  2. 你可以使用custom validatorforselect
  3. selectNone有问题吗
  4. value-0 更改为 value=0

演示

希望这可以帮助

于 2012-04-28T05:20:31.100 回答