Ich möchte, dass, wenn beide Felder, dh fname und lname, leer bleiben, im Popup-Fenster beide Meldungen angezeigt werden, dh "Vorname muss ausgefüllt werden", "Nachname muss ausgefüllt werden" ".

Welche Änderungen muss ich vornehmen?

<!DOCTYPE html>
<html>
<head>
    <script>
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;
            if (x == null || x == "") {
                alert("First name must be filled out");
                document.myForm.fname.focus();
                return false;
            }

            var y = document.forms["myForm"]["lname"].value;
            if (y == null || y == "") {
                alert("Last name must be filled out");
                document.myForm.lname.focus();
                return false;
            }
        }
    </script>
</head>
<body>

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">First name:
    <input type="text" name="fname">Last name:
    <input type="text" name="lname">
    <input type="submit" value="Submit">
</form>

</body>
0
user3026996 24 Nov. 2013 im 15:13

3 Antworten

Beste Antwort

Vielleicht gibt Ihnen dies einige Ideen, wie Sie vorgehen sollen:

function validateForm() {
    var errors = [],
        fname = document.forms["myForm"]["fname"],
        lname = document.forms["myForm"]["lname"];

    if (lname.value == "") {
        errors.unshift("Last name must be filled out");
        lname.focus();
    }
    if (fname.value == "") {
        errors.unshift("First name must be filled out");
        fname.focus();
    }
    if (errors.length > 0) {
        alert("Cannot submit\n" + errors.join("\n"));
        return false;
    }
}

Demo: http://jsfiddle.net/MKdg5/

Das erste, was Sie bemerken werden, ist, dass es einfacher zu lesen ist, da Blöcke eingerückt sind. Ebenfalls:

  • Sie verwenden derzeit document.forms["myForm"]["fname"] und document.myForm.fname, um auf dasselbe Feld zuzugreifen. Wählen Sie einen Weg und verwenden Sie ihn konsequent, oder
  • Erstellen Sie eine Variable, die auf das Feld fname verweist, und verwenden Sie dann fname.value und fname.focus()
  • Testen Sie nicht auf null, da die Eigenschaft .value niemals vorhanden sein wird.
  • Anstatt einen Fehler sofort zu melden und zurückzukehren, fügen Sie den Fehlertext einem Array hinzu und testen Sie am Ende, ob das Array leer ist.
2
nnnnnn 24 Nov. 2013 im 11:24

Versuchen Sie, Ihr Feld wie folgt zu validieren:

if (!x || x.length == 0)
0
aksu 24 Nov. 2013 im 11:48

Aufgrund Ihrer validateForm-Funktion würde Ihr Code niemals das zweite Feld überprüfen. Bei Verwendung der return-Anweisung stoppt die Funktion die Ausführung und gibt den angegebenen Wert zurück. Eine Lösung besteht darin, verschachtelte if-Anweisungen zu verwenden und beide Felder in einem bedingten Block zu überprüfen

if (x==null || x=="")
{
    if (y==null || y=="")
    {
    //codes for both are not validated
    }
    else
    {
    //codes for just x is not validated
    }
}
else
    if (y==null || y=="")
    {
    //codes for y is not validated
    }
    else
    {
    //codes for all validated
    }

Auf diese Weise wird die Funktionsausführung durch die Verwendung der return-Anweisung in jedem Block nicht unterbrochen

0
Hessam 24 Nov. 2013 im 11:48