find() each() nicht etwas zu finden

Question

Ich habe diese Form:

<form method="post" action="#" data-action="ajax.php?method=create" class="form-horizontal" role="form"> 
    <div class="form-group"> 
     <label class="col-md-2 control-label">Name</label> 
     <div class="col-md-8"> 
      <input name="name" type="text" value="" class="form-control" required> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-md-2 control-label">Location</label> 
     <div class="col-md-8"> 
      <input name="location" type="text" value="" class="form-control" required> 
     </div> 
    </div> 
</form> 

Ich möchte einige grundlegende Validierung dieser Form durchzuführen. Mein find(). Each() -Code funktioniert jedoch überhaupt nicht.

Hier ist der Code:

$(document).on('submit', '[data-action]', function (event) { 
    event.preventDefault(); 

    var form = $(this); 

    // ensure required fields are filled in 
    form.find('[required]').each(function() { 
     alert('required field found'); 
    }); 
}); 

ich keine Warnungen sogar deutlich bin immer wenn die Form 2 erforderlichen Eingaben hat.

Warum passiert das?

Answer 1

Chromes eingebauten Browser Validierung wurde mein Code von der Ausführung zu stoppen. Durch das Hinzufügen von novalidate zu meinem Formular wurde das Problem behoben.

Answer 2

Sie müssen Ihre Absenden-Schaltfläche innerhalb Ihrer Formular-Tags hinzufügen. Wenn das erledigt ist, funktioniert Ihre JQuery. Hier

ist ein Link zu einer Fiddle Demo

HTML

<form method="post" action="#" data-action="ajax.php?method=create" class="form-horizontal" role="form"> 
    <div class="form-group"> 
    <label class="col-md-2 control-label">Name</label> 
    <div class="col-md-8"> 
     <input name="name" type="text" value="" class="form-control" required> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label class="col-md-2 control-label">Location</label> 
    <div class="col-md-8"> 
     <input name="location" type="text" value="" class="form-control" required> 
    </div> 
    </div> 
    <input type="submit" value="submit"> 
</form> 

JQUERY

$(document).on('submit', '[data-action]', function (event) { 
    event.preventDefault(); 
    var form = $(this); 
    console.log($(this)); 

    // ensure required fields are filled in 
    form.find('[required]').each(function() { 
    console.log('required field found'); 
    }); 
});