HTML5 Validierung funktioniert nicht, wenn jQuery

Question

enthielt

So habe ich ein html5 erforderliches Eingabefeld, das gut funktioniert, wenn ich die folgende jQuery Bestätigungsnachfrage auslassen ...

$(".acal-confirm").click(function(){ 

    if($(this).val() == 'delete'){ 
    if (!confirm("Delete all positions for this day?")){ 
     return false; 
    } 
    } 

    if($(this).val() == 'publish'){ 
    if (!confirm("Publish all positions for this day?")){ 
     return false; 
    } 
    } 

    if($(this).val() == 'draft'){ 
    if (!confirm("Save all positions for this day as a draft?")){ 
     return false; 
    } 
    } 

}); 

... Als ich bin es die Bestätigung Warnung angezeigt wie erwartet, aber wenn das Eingabefeld leer ist, wird die HTML5-Validierung nicht mehr ausgelöst.

Die html es verknüpft ist (die in einem Formular-Tag eingewickelt wird) ...

<button name="submit" type="submit" value="draft" class="btn btn-primary btn-lg acal-confirm" title="Do not make available publically">Save draft</button> 
<button name="submit" type="submit" value="publish" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Save and publish the positions publically">Publish</button> 
<button name="submit" type="submit" value="delete" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Delete the positions for this day">Delete day</button> 

Was dies geschehen verursacht? Vielen Dank.

Answer 1

Dies ist ein sehr einfaches Beispiel für die Funktionsweise der HTML5-Validierung. Es funktioniert aus der Box. Sie müssen nur das Attribut required für erforderliche Felder festlegen, und das Formular wird nur gesendet, wenn alle Formulare gültig sind. Im folgenden Beispiel verwende ich jQuery, aber Validierung benötigt Vanille Javascript, weil ich $(this)[0] schreibe, um das DOM-Element und nicht das jQuery-Objekt zu erhalten.

//Listen the buttons (its type is not submit!) 
 
$('input[type=button]').on('click', function(ev) { 
 
    var action = $(this).val(); 
 
    if (confirm("Are you sure to perform "+action+"?")) { 
 
    // force the submit since there is not a submit button 
 
    $('#myForm').trigger('submit'); 
 
    } 
 
    // we don't need an else, nor return false! We only submit if it's confirmed 
 
}); 
 

 
// Listen to the submit event, so when it's the form submitted we can know it 
 
$('#myForm').on('submit', function(e) { 
 
    // checkValidity() returns true if the form will be send, and false if not 
 
    alert("Form will be submitted?: "+$(this)[0].checkValidity()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" method="POST" id="myForm"> 
 
    Name: <input type="text" required><br> 
 
    Email: <input type="email" required><br> 
 
    <input type="button" value="First action"> 
 
    <input type="button" value="Second action"> 
 
    <input type="button" value="Third action"> 
 
</form>

Es ist alles! Du brauchst nichts mehr. Es gibt viele Methoden und Eigenschaften, um die Validierung zu verwalten, aber damit können Sie erreichen, was Sie wollen. Stellen Sie sich Ihren Code wie folgt:

<!-- FIRST CHANGE THE TYPE TO button --> 
<button name="submit" type="button" value="draft" class="btn btn-primary btn-lg acal-confirm" title="Do not make available publically">Save draft</button> 
<button name="submit" type="button" value="publish" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Save and publish the positions publically">Publish</button> 
<button name="submit" type="button" value="delete" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Delete the positions for this day">Delete day</button> 

Und JS:

$(".acal-confirm").click(function(){ 

    if($(this).val() == 'delete'){ 
    if (confirm("Delete all positions for this day?")){ 
     $('form').attr('action', '/url/to/delete').trigger('submit'); 
    } 
    } 

    if($(this).val() == 'publish'){ 
    if (confirm("Publish all positions for this day?")){ 
     $('form').attr('action', '/url/to/publish').trigger('submit'); 
    } 
    } 

    if($(this).val() == 'draft'){ 
    if (confirm("Save all positions for this day as a draft?")){ 
     $('form').attr('action', '/url/to/save').trigger('submit'); 
    } 
    } 

}); 

Sag mir, wenn diese mit Ihren Anforderungen passen. Beachten Sie die Ausgabe form.attr('action'), um festzustellen, welche Aktion ausgeführt werden muss, abhängig von der Schaltfläche, auf die Sie geklickt haben. Es gibt Tonnen von Möglichkeiten, dies zu tun, diese Ausgabe ist nur ein Beispiel