Javascript - Aktivieren Sie Submit-Taste, wenn alle Eingabe gültig ist

Question

So habe ich ein Formular mit einigen Eingaben (Vor- und Nachname, Benutzername, Geburtstag, Passwort und E-Mail) mit einigen Validierungsbedingungen, die ich wie folgt gemacht habe zum Beispiel:

Dies ändert seine Farbe und kehrt wahr zurück. Ich rufe diese Funktion mit onKeyUp="" auf. Nun möchte ich die Submit-Schaltfläche deaktivieren, bis alle Felder von den Funktionen dort oben ausgefüllt und validiert wurden. Ich schrieb diese Funktion:

function formvalid() { 
if (checkfnlname('fname') && && (all other fields)) { 
    document.getElementByID("submitinput").disabled = false; 
} 
else { 
    document.getElementByID("submitinput").disabled = true; 
} 
return 1;} 

Aber ich habe keine Ahnung, wie/wo es zu nennen. (Ich habe viele Dinge ausprobiert, aber nichts hat funktioniert) Ist das der richtige Weg? Wenn ja, wie kann ich diese Funktion aufrufen?

Answer 1

Sie müssen die Validierungsfunktion in den Ereignissen aufrufen.

// For example 
<input type="text" onkeyup="validateForm()"> 
<select onchange="validateForm()"></select> 

Zweiter Weg:

Statt einen Submit-Button verwenden, eine normale Taste verwenden und eine Funktion aufrufen, die Ihre Formularelemente überprüft.

// Into the form or anywhere you want 
<button type="button" onclick="validateForm()">Submit</button> 

function validateForm() { 
    // Code to validate the form items 
    // if validated, send the form 

    // For example submitting a form with javascript 
    document.getElementById("myForm").submit(); 
} 

Answer 2

Es ist ganz einfach, ruft Taste aktivieren/deaktivieren Funktion in Ihrem Typ/Wert-Check-Funktion, so etwas wie this-

function checkfnlname(field) { 

    //here you can perform input check 
    curr = document.getElementById(field).value; 
    if (curr.length > 0) { 
     updateCSSClass(field, 1); 
     return true; 
    } 
    else { 
     updateCSSClass(field, 0); 
     return false; 
    } 
    // to check button validations 
    formvalid(); 
} 

auf diese Weise gehen, jedes Mal, wenn Sie in der Form geben, es wird überprüfen Sie, ob die Bedingung für die Schaltfläche übereinstimmt oder nicht, und wird entsprechend funktionieren.

Answer 3

Mein Ansatz:

function updateCSSClass(a, b) { 
 

 
} 
 

 
function checkfnlname(field) { 
 
    curr = document.getElementById(field).value; 
 
    if (curr.length > 0) { 
 
    updateCSSClass(field, 1); 
 
    return true; 
 
    } else { 
 
    updateCSSClass(field, 0); 
 
    return false; 
 
    } 
 
} 
 
window.onload = function() { 
 
    // disable submit 
 
    document.getElementById('submit').setAttribute('disabled', 'disabled'); 
 

 
    // attach the keyup event to each input 
 
    [].slice.call(document.querySelectorAll('form input:not([type="submit"])')).forEach(function (element, index) { 
 
    element.addEventListener('keyup', function (e) { 
 
     // compute the number of invalid fields 
 
     var invalidFields = [].slice.call(document.querySelectorAll('form input:not([type="submit"])')).filter(function (element, index) { 
 
     return !checkfnlname(element.id); 
 
     }); 
 
     if (invalidFields.length == 0) { 
 
     // reenable the submit if n. of invalid inputs is 0 
 
     document.getElementById('submit').removeAttribute('disabled'); 
 
     } else { 
 
     // disable submit because there are invalid inputs 
 
     document.getElementById('submit').setAttribute('disabled', 'disabled'); 
 
     } 
 
    }, false); 
 
    }); 
 
}

<form action="http://www.google.com"> 
 
    First name:<br> 
 
    <input type="text" name="firstname" id="firstname"><br> 
 
    Last name:<br> 
 
    <input type="text" name="lastname" id="lastname"><br> 
 
    User name:<br> 
 
    <input type="text" name="username" id="username"><br> 
 
    Birthday:<br> 
 
    <input type="date" name="birthday" id="birthday"><br> 
 
    Password:<br> 
 
    <input type="password" name="password" id="password"><br> 
 
    email:<br> 
 
    <input type="email" name="email" id="email"><br> 
 
    <input type="submit" value="submit" id="submit"> 
 
</form>

Answer 4

Der einfachste Weg, formvalid() zu nennen onkeyup für jedes Feld wäre. Diese Funktion validiert jedes Feld und zeigt die Schaltfläche an, wenn sie gültig sind.

Dies sollte die Arbeit tun, obwohl es nicht sehr effizient ist. Es ist ein Job vergeblich, jedes Feld jedes Mal zu überprüfen, wenn Sie etwas auf irgendeinem Feld eingeben. Bsp .: Wenn Sie bei der ersten Eingabe beginnen, hat es keinen Sinn, die letzte zu überprüfen.

Stattdessen können Sie eine Prüffunktion verwenden, die eine globale boolesche Variable aktualisiert, wenn das Feld gültige Daten enthält, und dann die Prüffunktion, um die booleschen Werte zu überprüfen, anstatt die Prüffunktion aufzurufen. Dann onkeyup in jedem Feld sollten Sie beide separat aufrufen (zuerst die Prüfung, dann die Validierung).

Etwas wie:

validFields=[]; 
function checkField(field) { 
    if (conditionIsMet) validFields[validFields.length]=field; 
} 
function validateForm() { 
    if (validFields.length==numberOfFields) ... 
} 

und

<input type="text" name="field1" value="" onkeyup="checkfield(this.name);validateForm()" />