使用JavaScript / HTML进行基本表单验证

Question

我正在为我制作的“联系我们”表单编写表单验证脚本。 该脚本非常简单，我想知道为什么它不能正常工作。

无论我有什么内容，它总是表示运行脚本后该字段为空。

这是我的代码：

    var firstName = document.getElementById("fname");
var lastName = document.getElementById("lname");
var email = document.getElementById("email");
var message = document.getElementById("msg");
var errors = "";

function formValidation() {
    if (firstName==="" || firstName=== null)
    {
        errors += "-The First Name field is blank! \n";
    }   
    if (lastName==="" || lastName=== null)
    {
        errors += "-The Last Name field is blank! \n";

    }   
    if (email==="" || email=== null)
    {
        errors += "-The E-mail Address field is blank! \n";

    }
    if (message==="" || message=== null)
    {
        errors += "-The Message field is blank! \n";

    }

    if (errors !== "") {
        alert("Whoops! \n \n" + errors);    
    }
    if (errors === "") {
        alert("Message Sent!");
    }

}

此外，这是我制作的jsfiddle： http : //jsfiddle.net/3DxZj/1/

谢谢。

Answer 1

首先，您试图通过元素的ID来获取元素，然后再将它们存在于DOM中（脚本位于表单上方）。

其次，如果您对此进行了更正，则可以将HTMLInputElements自身与一个空字符串（而不是它们的.value属性）进行比较。

第三，您永远不会重置errors因此，如果有人确实得到了错误并修复了错误，那么当他们再次尝试时，他们仍然会收到错误警报。

将.value添加到要获取的元素中，然后移动以下代码 ，使其位于函数内部 。

var firstName = document.getElementById("fname").value;
var lastName = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var message = document.getElementById("msg").value;
var errors = "";

您还仅在使用“提交”按钮提交表单时检查错误。 您应该在提交表单时执行此操作。

将onclick属性的内容移动到form元素上的onsubmit属性。 更好的是， 将事件监听器与JS绑定 。

出现错误时，您不会阻止表单的正常操作。 大概是您希望它停止提交数据。 要么：

1. 使用addEventListener （请参见上文），为您的函数接受参数，并在出现错误或错误时对该参数的值调用.preventDefault() 。
2. 将return添加到onsubmit属性值的前面，并在出现错误时从函数return false 。

另请注意

• 您的label元素无用 ； 他们所需要for属性。
• 您不应该使用表格来布局（大多数）表单 。
• value s始终是字符串，因此与null相比没有意义。

Answer 2

您正在查询dom元素，而不是它们的值。 正确的方法是

var firstName = document.getElementById("fname");
var lastName = document.getElementById("lname");
var email = document.getElementById("email");
var message = document.getElementById("msg");
var errors = "";

function formValidation() {
    if (firstName.value==="" || firstName.value=== null)
    {
        errors += "-The First Name field is blank! \n";
    }   
    if (lastName.value==="" || lastName.value=== null)
    {
        errors += "-The Last Name field is blank! \n";

    }   
    if (email.value==="" || email.value=== null)
    {
        errors += "-The E-mail Address field is blank! \n";

    }
    if (message.value==="" || message.value=== null)
    {
        errors += "-The Message field is blank! \n";

    }

    if (errors !== "") {
        alert("Whoops! \n \n" + errors);    
    }
    if (errors === "") {
        alert("Message Sent!");
    }

}

编辑：愚蠢的我，没有检查jsfiddle，所以我解决了我的解决方案中的一个错误时，我只解决了您的问题之一（现在已更正），所以请坚持昆汀的回答

Answer 3

问题是您没有返回表单字段的.value。

例如：var firstName = document.getElementById（“ fname”）。value;

另外，您应该在函数中声明您的var。

尝试这个：

function formValidation() {
var firstName = document.getElementById("fname").value;
var lastName = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var message = document.getElementById("msg").value;
var errors = "";
if (firstName==="" || firstName=== null)
{
    errors += "-The First Name field is blank! \n";
}   
if (lastName==="" || lastName=== null)
{
    errors += "-The Last Name field is blank! \n";

}   
if (email==="" || email=== null)
{
    errors += "-The E-mail Address field is blank! \n";

}
if (message==="" || message=== null)
{
    errors += "-The Message field is blank! \n";

}

if (errors !== "") {
    alert("Whoops! \n \n" + errors);    
}
if (errors === "") {
    alert("Message Sent!");
}

}