Question

我对使用Javascript的HTML表单提交有疑问。

我的Javascript如下：

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;


    }

这是我在HTML格式中具有属性的表单：

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

当我在填写所有要求后单击“提交”按钮（因此一切都不返回false）时，表单将不会自行提交。

在阅读了关于return false之后，我尝试添加else {return true;但它所做的只是提交我的表格而不进行验证。

如何才能使其仅使用Javascript和/或HTML？谢谢！

Answer 1

您需要检查输入是否通过了测试。您可以使用var isValid。

来实现

如果您的某个条件未满足，则需要将isValid设置为false，然后返回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

在提交功能结束时，您将返回：

    return false;
}

无论验证是否成功。这可以防止表单提交。确保您在此使用return true并使用标记正确验证，然后标记为true，return false。

你已经有一面旗帜isValid。将以上行替换为：

    return isValid;
}

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

2 个答案: