CODEWITHSUNDEEP
javascriptvalidation
RoyalSwish
RoyalSwish

Reputation: 1573

JavaScript: Validate form all at once

When my script validates a filled out form, it will check for errors one at a time rather than for all the errors all at once. I know this is because I'm using if statements which will obviously stop when an argument validates as True.

How do I adapt my script so that it will show the end-user all the errors in one go? Do I use the continue statement? Or is there a better way?

function checkForm() {
            if (!retext.test(document.myform.sport.value)) {
                document.myform.textfield.style.border = "3.5px solid red";
                document.getElementById("text").innerHTML = "Invalid text.";
                document.getElementById("text").style.display = "block";
                return false;
            }

            else if (!re.test(document.myform.email.value)) {
                document.myform.email.style.border = "3.5px solid red";
                document.getElementById("emailwarn").innerHTML = "Invalid email.";
                document.getElementById("emailwarn").style.display = "block";
                return false;
            }

            else if (!retel.test(document.myform.tel.value)) {
                document.myform.tel.style.border = "3.5px solid red";
                document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
                document.getElementById("telwarn").style.display = "block";
                return false;
            }
        }

<form name="myform" method="POST" action="http://youtube.com" onsubmit="return checkForm()">
        <fieldset>
            <legend>Hi</legend>
            <label>Random text: </label>
            <input type="text" name="textfield">
            <div id="text"></div>
            <label>Email: </label>
            <input type="email" name="email">
            <div id="emailwarn"></div>
            <label>Tel: </label>
            <input type="tel" name="tel" maxlength="11">
            <div id="telwarn"></div>
            <input type="submit" value="Submit Form">
            <input type="reset" value="Reset Form">
        </fieldset>
    </form>

Upvotes: 0

Views: 95

Answers (3)

starsplusplus
starsplusplus

Reputation: 1253

Set a return value and return it at the end.

function checkForm() {
        var valid = true;
        if (!testcondition) {
            // do stuff
            valid = false;
        }

        if (!othertestcondition) {
            // do stuff
            valid = false;
        }

        return valid;
    }

Upvotes: 0

Maurice Perry
Maurice Perry

Reputation: 32831

function checkForm() {
    var ok = true;
            if (!retext.test(document.myform.sport.value)) {
                document.myform.textfield.style.border = "3.5px solid red";
                document.getElementById("text").innerHTML = "Invalid text.";
                document.getElementById("text").style.display = "block";
                ok =false;
            }

            if (!re.test(document.myform.email.value)) {
                document.myform.email.style.border = "3.5px solid red";
                document.getElementById("emailwarn").innerHTML = "Invalid email.";
                document.getElementById("emailwarn").style.display = "block";
                ok =false;
            }

            if (!retel.test(document.myform.tel.value)) {
                document.myform.tel.style.border = "3.5px solid red";
                document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
                document.getElementById("telwarn").style.display = "block";
                ok = false;
            }
            return ok;
        }

Upvotes: 0

Brenton Alker
Brenton Alker

Reputation: 9072

You need to make the checkForm function run all of the checks, and only have one return (at the end).

eg.

function checkForm() {
    var valid = true;

    if (!retext.test(document.myform.sport.value)) {
        document.myform.textfield.style.border = "3.5px solid red";
        document.getElementById("text").innerHTML = "Invalid text.";
        document.getElementById("text").style.display = "block";
        valid = false;
    }

    if (!re.test(document.myform.email.value)) {
        document.myform.email.style.border = "3.5px solid red";
        document.getElementById("emailwarn").innerHTML = "Invalid email.";
        document.getElementById("emailwarn").style.display = "block";
        valid = false;
    }

    if (!retel.test(document.myform.tel.value)) {
        document.myform.tel.style.border = "3.5px solid red";
        document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
        document.getElementById("telwarn").style.display = "block";
        valid = false;
    }

    return valid;
}

Upvotes: 2

Related Questions