使用 Javascript 验证后，HTML 表单不会提交

Question

I have questions regarding form submitting in HTML with Javascript.

My Javascript is as follows:

function validateForm() {
        var a= document.forms["myForm"]["pname"].value;
        var b = document.forms["myForm"]["pemail"].value;
        var c = document.forms["myForm"]["pdob"].value;
        var d = document.forms["myForm"]["unit of choice"].value;
        var els = document.forms["myForm"].elements["Issue[]"];
        var f = document.forms["myForm"]["description"].value;
        var g = document.forms["myForm"]["pdatee"].value;
        var h = document.forms["myForm"]["ptimee"].value;

        var isValid = false;
        for (i = 0; i < els.length; i += 1) {
        if (els[i].checked) {
            isValid = true;
            }
        }


        if (a == null || a == "") {
            alert("Your name cannot be blank");
            }
        if (b == null || b == "") {
            alert("Enter a valid email address.");
            }
        if (c == null || c == "") {
            alert("Enter a valid Date of Birth. (dd/mm/yyyy)");
            }
        if (d == null || d == "") {
            alert("Unit and Tutor have to be selected.");
            }

        if (!isValid) {
            alert("Must select an Issue.");
            }

        if (f == null || f == "") {
            alert("Must fill in a description.");
            }

        if (f == null || f == "") {
            alert("Must fill in a description.");
            }
        if (g == null || g == "") {
            alert("Preferred date must follow the format set.");
            }
        if (h == null || h == "") {
            alert("Preferred time must follow the format set.");
            }

        return false;


    }

And this is my form with its attributes in HTML:

<form name="myForm" onsubmit="return validateForm()" method="post" action="confirm.html" novalidate="novalidate" >

What happens is that when I click the Submit button after filling in all the requirements(so everything does not return false) , the form won't submit itself.

After reading around regarding return false, I tried adding else{ return true; } but all it does is submit my form without validation at all.

What do I do to make it work with only Javascript and/or HTML? Thank you!

Answer 1

You need to check if your inputs have passed your tests. You can do that by using your var isValid .

All you need to do is set isValid to false if one of your conditions was not met, and then return isValid .

function validateForm() {
    var a= document.forms["myForm"]["pname"].value;
    var b = document.forms["myForm"]["pemail"].value;
    var c = document.forms["myForm"]["pdob"].value;
    var d = document.forms["myForm"]["unit of choice"].value;
    var els = document.forms["myForm"].elements["Issue[]"];
    var f = document.forms["myForm"]["description"].value;
    var g = document.forms["myForm"]["pdatee"].value;
    var h = document.forms["myForm"]["ptimee"].value;

    var isValid = false;
    for (i = 0; i < els.length; i += 1) {
    if (els[i].checked) {
        isValid = true;
        }
    }


    if (a == null || a == "") {
        isValid=false;
        alert("Your name cannot be blank");
        }
    if (b == null || b == "") {
        isValid=false;
        alert("Enter a valid email address.");
        }
    if (c == null || c == "") {
        isValid=false;
        alert("Enter a valid Date of Birth. (dd/mm/yyyy)");
        }
    if (d == null || d == "") {
        isValid=false;
        alert("Unit and Tutor have to be selected.");
        }

    if (!isValid) {
        isValid=false;
        alert("Must select an Issue.");
        }

    if (f == null || f == "") {
        isValid=false;
        alert("Must fill in a description.");
        }

    if (f == null || f == "") {
        isValid=false;
        alert("Must fill in a description.");
        }
    if (g == null || g == "") {
        isValid=false;
        alert("Preferred date must follow the format set.");
        }
    if (h == null || h == "") {
        isValid=false;
        alert("Preferred time must follow the format set.");
        }

    return isValid;


}

Answer 2

At the end of the submission function, you are returning:

    return false;
}

No matter if the validation was successful or not. This prevents the form from submitting. Make sure you are using return true here and correctly validate using a flag and then if the flag is true , return false .

You have already a flag isValid . Replace the above line with:

    return isValid;
}