Geek asks and answers

JQuery validation still sent with invalid fields

I am using jQuery validation and I had two problems. Firstly, the dropdown selectiondoes not check, and (2) if the fields are invalid, it sends anyway. (I also use bootstrap)

My 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>

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

Questions:

  • Why is the dropdown menu invalid?
  • Why is the form submitted without verification?
+3
source share
2 answers

First of all, all your value="0"tags <option>really value-0have to be fixed.

For the problem of submitting the form, you need to prevent the default action for your submit action and add the 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();
    }
  });
+3
source
  • set of brackets
  • custom validator select
  • selectNone
  • -0 value = 0

DEMO

,

+1

More articles:


All Articles