How to make a JavaScript form validation that displays an error message simultaneously

Question

Am a new JavaScript programmer and am trying to make a form validator using JavaScript but the error messages don't seem to be displaying if all the forms are not filled, that is if all are empty, only the name form error displays.

This is what I tried:

function myValidate() {
    var x = document.forms["myform"]["name"].value;
    var y = document.forms["myform"]["country"].value;
    var z = document.forms["myform"]["occupation"].value;
    var a = document.forms["myform"]["status"].value;

    if (x == "null" || x == "") {
        var b = document.getElementById("nameErr");
        b.innerHTML = "Name Must Be Filled Out";
        return false;
    } else {
        var b = document.getElementById("nameErr");
        b.innerHTML = "";
        return true;
    }

    if (y == "null" || y == "") {
        var c = document.getElementById("countryErr");
        c.innerHTML = "Country Must Be Filled Out";
        return false;
    } else {
        var c = document.getElementById("countryErr");
        c.innerHTML = "";
        return true;
    }

    if (z == "null" || z == "") {
        var d = document.getElementById("occupationErr");
        d.innerHTML = "Occupation Must Be Filled Out";
        return false;
    } else {
        var d = document.getElementById("occupationErr");
        d.innerHTML = "";
        return true;
    }

    if (a == "null" || a == "") {
        var e = document.getElementById("statusErr");
        e.innerHTML = "Status Must Be Filled Out";
        return false;
    } else {
        var e = document.getElementById("statusErr");
        e.innerHTML = "";
        return true;
    }
}

This is the JavaScript code.

<form action="process.php" method="post" onsubmit="return myValidate()" name="myform">
    Name:
    <input type="text" id="name" name="name">
    <span id="nameErr"></span><br><br>

    Country:
    <input type="text" id="country" name="country">
    <span id="countryErr"></span><br><br>

    Occupation:
    <input type="text" id="occupation" name="occupation">
    <span id="occupationErr"></span><br><br>

    Status:
    <input type="text" id="status" name="status">
    <span id="statusErr"></span><br><br>

    <input type="submit" name="submit" value="Submit">
</form>

This is the HTML form.

Please help, Thanks

Answer 1

It seems you don't realize that calling return ends the function you are in. If the validation fails, you'll want to return false , but you do not want to return true until the end of the validation process.

Try:

function myValidate() {
    var x = document.forms["myform"]["name"].value;
    var y = document.forms["myform"]["country"].value;
    var z = document.forms["myform"]["occupation"].value;
    var a = document.forms["myform"]["status"].value;
    var b = document.getElementById("nameErr");    
    var c = document.getElementById("countryErr");
    var d = document.getElementById("occupationErr");
    var e = document.getElementById("statusErr");

    if (!x || x.length==0) {
        b.innerHTML = "Name Must Be Filled Out";
        return false;
    } else {
        b.innerHTML = "";
    }

    if (!y || y.length==0) {
        c.innerHTML = "Country Must Be Filled Out";
        return false;
    } else {
        c.innerHTML = "";
    }

    if (!z || z.length==0) {
        d.innerHTML = "Occupation Must Be Filled Out";
        return false;
    } else {
        d.innerHTML = "";
    }

    if (!a || a.length==0) {
        e.innerHTML = "Status Must Be Filled Out";
        return false;
    } else {
        e.innerHTML = "";
    }
    return true;
}

This will return the first error it comes across. If you want to check them all at once, you will need to store your true/false in a variable and hold off on any return calls until then end and call return theVariableName;

Answer 2

you can use a flag for save state :

http://jsfiddle.net/vEvT2/1/

var flag = true;

and change to false if find empty control