Ich verwende Eingaben mit dem erforderlichen Tag, und in diesem Moment funktioniert es nicht und das Senden kann problemlos durchgeführt werden, auch ohne ein Wort in den Eingaben. Ich habe abit nach dem Grund gesucht und ich denke, dass dies geschieht, weil ich die Onclick-Funktion verwende.

<form id="regform" method="POST">
First name: <input type="text" id="firstname" required  ><br>
Last name: <input type="text" id="lastname" required ><br>
Username: <input type="text" id="username" required><br>
Password: <input type="password" id="password" required><br>
<input type="radio" name="sex" value="male" required>Male<br>
<input type="radio" name="sex" value="female" >Female
<input type="submit" value="Register" onclick="regBtn(event)">
</form>

Gibt es eine Möglichkeit, die erforderliche Aktivität bei Verwendung von onclick aktiv zu halten?

0
Juvi 2 Dez. 2013 im 19:52

3 Antworten

Beste Antwort

Ja. Im Moment haben Sie irgendwo eine solche Linie:

document.getElementById("regform").submit();

Welche alle eingebauten Validierungen ignorieren und nur das Formular senden.

Verschieben Sie stattdessen den Funktionsaufruf wie folgt in den Onsubmit des Formulars:

<form id="regform" method="POST" onsubmit="return regBtn(event);">

Und ändern Sie die Funktion, um true oder false zurückzugeben, anstatt submit zu erzwingen:

function regBtn(event) {
    if (some_cond_here) {
        //all is good, let's submit the form!
        return true;
    } else {
        //something is off, cancel form submission:
        return false;
    }
}

Dadurch bleibt die integrierte HTML5-Formularüberprüfung erhalten.

Live-Testfall - Geben Sie einen Benutzernamen mit nur einem oder zwei Buchstaben ein, damit die manuelle Validierung beginnt.

1
Shadow Wizard is Ear For You 2 Dez. 2013 im 15:57

Fügen Sie Ihrer regBtn-Funktion einige Zeilen hinzu.

function regBtn(event) {
    if (!Array.prototype.slice.call(document.querySelectorAll('input[required]:not([required=false])')).every(function (element) {
        return element.value != '';
    })) {
        return false;
    }
    //main function
}
0
Tom Chung 2 Dez. 2013 im 16:23

Denken Sie daran: Das erforderliche Attribut des Eingabe-Tags wird in Internet Explorer 9 und früheren Versionen oder in Safari nicht unterstützt.

Sicherer ist es, so vorzugehen:

<form id="regform" method="POST">
First name: <input type="text" id="firstname" class="required"><br>
Last name: <input type="text" id="lastname" class="required" ><br>
Username: <input type="text" id="username" class="required"><br>
Password: <input type="password" id="password" class="required"><br>
<input type="radio" name="sex" value="male" class="required">Male<br>
<input type="radio" name="sex" value="female" >Female
<input id="submit" type="submit" value="Register" onclick="regBtn(event)">
</form>

Und jQuery-Code:

 $(".required").each(function() 
    {
      if ($(this).val() == "") 
        {
            $('#submit').prop('disabled','disabled');   
        }
    }); 
0
Aditzu 2 Dez. 2013 im 16:00