Überprüfen Sie, ob eine Eingabe mit Klasse in einem Formular leer ist

Question

Ich schrieb einen Code, um ein Formular auf Client-Seite zu validieren. Da ich alle Fehlermeldungen gebunden habe, ist der letzte Fall, der in Betracht gezogen wird, wenn der Benutzer nicht einmal eine erforderliche Eingabe getroffen hat, leer gelassen.

Wenn alle Eingaben in Form waren erforderlich ich so etwas wie

verwendet haben könnte

$('#subButton').on('click', function(e) { 
    if (!$('#formName').val()) { 
     e.preventDefault(); 
     alert("Fill all the required fields"); 
}); 

Aber da es in meinen Formulareingaben erforderlich sind (mit class="req") und nicht Eingaben erforderlich, würde ich gerne wissen, ob Es gibt eine Methode, um die Prüfung nur über die .req Eingänge durchzuführen. Etwas wie:

$('#subButton').on('click', function(e) { 
    if (!$('#formName.req').val()) { 
     e.preventDefault(); 
     alert("Fill all the required fields"); 
    } 
}); 

Mit anderen Worten würde Ich mag die gleiche Prüfung durchzuführen, die der up-to-date-Browser tun, wenn die HTML required Option angegeben wird, nur um sicher zu sein, dass, wenn der Browser a Bit alt und liest nicht die required Option, verhindert jQuery das Formular gesendet werden.

Answer 1

Verwenden Sie einfach .filter und überprüfen Sie die Länge. Auch eine einfache ! Prüfung ist wahrscheinlich nicht gut, was ist, wenn jemand 0 eingibt?

var hasEmptyFields = $('#formName.req').filter(function() { 
    return this.value.replace(/^\s+/g, '').length; //returns true if empty 
    //Stole the above regex from: http://stackoverflow.com/questions/3937513/javascript-validation-for-empty-input-field 
}).length > 0 

if (hasEmptyFields) { 

} 

Answer 2

Verwenden reduce

const submitAllowed = $('.req').toArray().reduce((result, item) => { 
    return result && (!!item.value || item.value === 0); 
}, true) 

if (!submitAllowed) { ... } 

Here ist eine einfache Demo:

<form action="dummy.asp" onSubmit="return handleSubmit()"> 
    <p> You can only submit if you enter a name </p> 
    <br /> 
    Enter name: <input class="req" type="text" name="fname"> 
    <input type="submit" value="Submit"> 
</form> 

<script> 
    function handleSubmit() { 
    const submitAllowed = $('.req').toArray().reduce((result, item) => { 
     return result && (!!item.value || item.value === 0); 
     }, true) 

    return submitAllowed; 
    } 
</script> 

Answer 3

Aber da es in meinen Formulareingaben erforderlich sind (mit class="req") und nicht Eingaben erforderlich, Ich würde gerne wissen, ob es eine Methode gibt, nur die Überprüfung durchzuführen an den Eingängen .req

Es gibt einen Booleschen HTML5 Form Attribut required.

required Werke:

• <input type="text" />
• <input type="search" />
• <input type="url" />
• <input type="tel" />
• <input type="email" />
• <input type="password" />
• <input type="date" />
• <input type="number" />
• <input type="checkbox" />
• <input type="radio" />
• <input type="file" />

Beispiel:

input { 
 
display: block; 
 
margin: 6px; 
 
}

<form action="http://www.stackoverflow.com/"> 
 
<input type="text" placeholder="This is required" required /> 
 
<input type="text" placeholder="This isn't required" /> 
 
<input type="text" placeholder="This is required" required /> 
 
<input type="text" placeholder="This isn't required" /> 
 
<input type="submit" value="Press Me Without Filling in any of the Fields"> 
 
</form>

Sonderbar scheint der StackOverflow Snippet oben nicht zu funktionieren.

Hier ist ein JSFiddle zu zeigen, was sie tun sollten:

https://jsfiddle.net/a5tvaab8/