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

首先，在DOM中存在元素之前，你试图通过它们获取元素（脚本在表单上方）。

其次，如果您更正了这一点，那么您将把HTMLInputElements本身与空字符串进行比较，而不是将它们与.value属性进行比较。

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

将<{1}}添加到您要获取的元素中，然后移动以下代码，使其该函数。

.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属性。更好的是，bind your event listener with JS。

当出现错误时，您无法阻止表单的正常操作。据推测，您希望它阻止数据提交。之一：

使用onsubmit（参见上文），接受函数的参数，并在出现错误或 addEventListener >
当出现错误时，将.preventDefault()添加到return属性值的前面，并从函数中添加onsubmit。

另请注意

Your label elements are useless;他们需要return false属性。
You shouldn't use tables to layout (most) forms。
for将永远是字符串，因此与value相比毫无意义。

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，所以我只解决了你的一个问题，同时在我的解决方案中犯了错误（现在更正），所以坚持Quentins answer

Answer 3

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

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

此外，您应该在函数内声明您的变量。

试试这个：

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!");
}

}

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

3 个答案: