jQuery-Validierung noch reicht mit ungültige Felder

Ich bin mit jQuery Validierung, und ich habe zwei Fragen. Ein in der dropdown - selection nicht überprüfen, und (2) wenn die Felder sind ungültig es immer noch sendet. (Ich bin auch mit bootstrap)

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

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

Fragen:

  1. Warum das dropdown nicht gültig?
  2. Warum übermittelt das Formular ohne überprüfung?
InformationsquelleAutor Kyle Monti | 2012-04-28
  1. 4

    Erstens, alle Ihre value="0" in Ihrem <option> - tags sind eigentlich value-0 -, die korrigiert werden muss.

    Für den form-submit Problems müssen Sie verhindern, dass die Standard-Aktion auf dem submit-Aktion, und fügen Sie eine submitHandler-Aktion für Ihren Erfolg:

    $(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();
    }
  });
    • Ich bekomme immer eine Fehlermeldung, warum ich diesen code verwenden.
    InformationsquelleAutor philwinkle
  2. 1
    1. Sie verpasste eine Schließung set of brackets
    2. Könnte man eine custom validator für select
    3. selectNone war dort das problem
    4. Wert 0 geändert, Wert=0

    DEMO

    Hoffe, das hilft

    • Einfache Tippfehler Fehler, dass ich nie bemerkt. Mein text-editor macht Sie, gelb auf weißem hintergrund. treibt mich in den Wahnsinn.
    InformationsquelleAutor Dhiraj
Schreibe einen Kommentar