Überprüfen eines Formulars, um keine leeren Eingabefelder zu senden

Question

Ich habe ein Programm, wo, wenn ein Benutzer auf eine Schaltfläche klickt, mehr Schreibdatenfelder angefügt werden. Ich möchte nicht, dass das Formular übermittelt wird, wenn nicht alle Schreibdatenfelder ausgefüllt sind. Das obige Snippet zeigt die Alarmbox, wenn eine Eingabe unvollständig ist, aber wenn Sie ok drücken, wird das Formular noch übergeben?

Answer 1

Sie können den Ereignishandler .submit() verwenden. Verwenden Sie dann entweder return false oder e.preventDefault(), um das Senden zu stoppen. Beachten Sie auch, dass id ist einzigartig sind so $('#data') wird nur ein einziges Element sein, so dass die .each() ist nicht erforderlich:

$('#formIDHere').submit(function(e){ 
    if ($('#data').val() == "" || $('#data').val() == null) { 
     alert("Write Data must be filled out or Remove empty parameter list!"); 
     e.preventDefault(); // or `return false` 
    } 
}); 

---

Für viele Eingänge haben Ihre Eingabeelemente class="data" eine Klasse mit dem Wert sein. Beachten Sie, dass Sie e.preventDefault() mit dem e aus dem Submit-Ereignis verwenden müssen. In diesem Fall ist return false für die .each() und nicht die submit. Ich verwende hier den .each von stoppen gehen also nicht wir viele unnötige Warnungen und Kontrollen haben:

$('#myForm').submit(function(e){ 
    $('.data').each(function(){ 
    if ($(this).val() == "" || $(this).val() == null) { 
     alert("Write Data must be filled out or Remove empty parameter list!"); 
     e.preventDefault(); // This is the preventDefault of submit 
     return false; // This stops the .each from continuing 
    } 
    }); 
}); 

Demo

Answer 2

$('#write').click(() => { 

// if any one of the inputs is blank canSubmit will end up as false 
// if all are not blank, it will end up as true 
    var canSubmit = [...document.querySelectorAll('input')] 
    .reduce((acc, input) => acc = input.value === '' ? false : acc , true) 

}); 

Answer 3

<script type="text/javascript"> 
$(function() { 
    $("#data").bind("change keyup", function() {  
    if ($("#data").val() != "") 
      $(this).closest("form").find(":submit").removeAttr("disabled"); 
    else 
      $(this).closest("form").find(":submit").attr("disabled", "disabled");  
    }) 
}); 
</script> 

Dies würde erlauben Sie Submit-Button zu deaktivieren, bis es Daten war innerhalb des Eingabefeldes.