Ich verwende this Vorlage für Formulare. Für Texteingaben bietet es die Möglichkeit, die Eingabe zu validieren (einfach: wenn es leer ist, rotes Feld, wenn nicht, grünes Feld). Ich möchte jedoch, dass mein Submit-Button (Markup unten) nur anklickbar ist, wenn alle notwendigen Felder mindestens nicht leer sind.Schaltfläche deaktiviert, während erforderliche Felder leer sind
<button type="submit" name="finish" class="waves-effect waves-light btn">
Grüße
Verwenden oninput sofort Änderungen in Daten zu reflektieren und prüfen, ob irgendeine Eingabe leer ist.
HTML
<form id="frm">
<input type="text" name="input1" oninput="testFinish();" />
<input type="text" name="input2" oninput="testFinish();" />
<button type="submit" name="finish" disabled onsubmit="alert('SUBMITTED')">Finish</button>
</form>
JAVASCRIPT
function testFinish(){
var frm = document.getElementById('frm');
if (frm['input1'].value && frm['input2'].value)
frm['finish'].disabled = false;
}
@doe Es ist nicht so generisch wie du weißt .. –
Ich bin jetzt nicht auf meinem Desktop, aber ich bin vorausgesetzt, Sie nur ein einfaches Layout, was Sie tun müssen, um ..wenn Sie weitere Hilfe Erwähnung in comment..don brauchen‘ Vergiss das Häkchen.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Validate Input</h1>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>Es ist nicht relevant für die Frage .. Er will ** den Knopf ** deaktivieren, bis das Formular gültig ist. –
Ich antwortete gleich einem anderen Kerl mit meinem anderen Konto. –
Ich sehe ..let mich umformulieren –
poste ich hier eine einfache Demo auf Grund möchte ich nicht in der Vorlage tauchen.
Die Logik ist einfach. Sie müssen den Ereignissen des Eingangs "" und keypress "zuhören", dann prüfen, ob es gültig ist (Ich habe den Code im letzten Chrome getestet, muss diese Überprüfungs-API in anderen Browsern überprüfen oder eigene Bibliotheken erstellen oder eine Bibliothek verwenden). Wenn ja, entfernen Sie das Attribut disabled, wenn nicht, fügen Sie es hinzu.
var inputs = document.querySelectorAll('input'),
button = document.querySelector('button');
addListenerMulti(inputs, 'keyup change', function() {
if (valid()) {
button.removeAttribute('disabled');
}
else {
button.setAttribute('disabled', 'disabled');
}
});
function valid() {
var valid = true;
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].validity.valid) {
valid = false;
}
}
return valid;
}
function addListenerMulti(el, s, fn) {
var col = el.length ? el : [el];
var evts = s.split(' ');
for (var k = 0; k < col.length; k++) {
for (var i = 0, iLen = evts.length; i < iLen; i++) {
col[k].addEventListener(evts[i], fn, false);
}
}
}<form>
<input type="text" required /><br />
<input type="text" required /><br />
<button disabled>Submit</button>
</form>Alle Eingabefelder müssen nicht leer sein, nicht nur eins. –
Sie erwarten nicht, dass ich alle Eingaben für Sie simuliere. Die Antwort ist nur eine Richtung. –
Versuchen die bello HTML und JavaScript-Code:
<form id="my-form">
<input type="text" name="input1" class="required abc" />
<input type="text" name="input2" class=" abc" />
<input type="text" name="input3" class="required abc" />
<input type="text" name="input4" class=" abc" />
<input type="text" name="input5" class="abc" />
<button type="submit" name="finish" onsubmit="alert('SUBMITTED')">Finish</button>
</form>
Java-Script-Code:
$(document).ready(function(){
$("form input").blur(function(){
var has_error = false;
$("form input.required").each(function(){
if($(this).val() == ''){
$(this).css('border','1px solid red');
has_error = true;
}
else{
$(this).css('border','');
}
});
if(has_error == false){
$("form button[name='finish']").prop('disabled', false);
}
else {
$("form button[name='finish']").prop('disabled',true);
}
});
});
Überprüfen Sie Fiddle für weitere Informationen.
Vielen Dank für die Bestätigung ohne Angabe von Gründen. – doe
Deaktivieren Sie die Schaltfläche, lassen Sie jede Eingabe ein 'onchange'-Ereignis oder ähnliches und überprüfen Sie, ob alle Eingaben nicht leer sind, entfernen Sie dann die Deaktivierung und fügen Sie sie hinzu (* fügen Sie sie als separate Funktion * hinzu). Sie möchten das Gleiche auch bei der Submit-Veranstaltung tun. –
Ich habe nicht abgestimmt, aber ich kann sehen warum. Beginnend mit der Tatsache, dass Sie nicht versucht haben, das Problem selbst zu lösen. Wenn Sie haben, fügen Sie Ihren Code hinzu. –