在表单验证中同时显示所有错误消息

-1

为什么我的条件语句无法正常工作？我想同时显示错误消息。在表单验证中同时显示所有错误消息

function validate() { 
 
    if (firstName.value == "") { 
 
    document.getElementById('error').innerHTML = "*Field is empty"; 
 
    return false; 
 
    } else if (lastName.value == "") { 
 
    document.getElementById('errorTwo').innerHTML = "*Field is empty"; 
 
    return false; 
 
    } else { 
 
    return true; 
 
    } 
 
}

<form name="form" action="action.php" method="post" onsubmit="return validate()"> 
 
    <div class="wrapper"> 
 
    <span>Name</span> 
 
    <br> 
 
    <input type="text" name="firstName" id="firstName" placeholder="First Name" onfocus="this.placeholder=''" onblur="this.placeholder='First Name'" />&nbsp; 
 
    <label id="error"></label> 
 
    <br> 
 
    <input type="text" name="middleName" id="middleName" placeholder="Middle Name (optional)" onfocus="this.placeholder=''" onblur="this.placeholder='Middle Name (optional)'" /> 
 
    <input type="text" name="lastName" id="lastName" placeholder="Last Name" onfocus="this.placeholder=''" onblur="this.placeholder='Last Name'" />&nbsp; 
 
    <label id="errorTwo"></label> 
 
    <br> 
 
    <br> 
 
    </div>

来源

2015-03-31 Juan Carlos De Luna

你错过了关闭'}'。您是否在[JavaScript控制台]中看到任何错误（http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers）？ – 2015-03-31 14:49:36

您已将脚本标记粘贴到HTML标记范围之外，这是您的第一个问题，第二个问题是您尚未声明姓氏或姓氏 – Brad 2015-03-31 14:54:27

对不起，我只是没有将它包含在我的帖子中，但我已经关闭在我的实际代码..我没有任何错误，它只是不工作的方式，我想它是 – 2015-03-31 14:54:36

你的条件语句工作正常，但你对它们的理解有点偏离。

的if/else if声明将停止运行时，条件匹配，因此，如果firstName.value是空的，那么if声明将被匹配和代码将退出那里，而不是评估条件的休息。

您希望为每个测试使用独立的条件语句，而不是返回true或false，而是将变量设置为true或false，并在条件检查后返回该条件语句。

所以......

function validate() 
{ 
    var valid = true; 
    if(firstName.value=="") 
    { 
     document.getElementById('error').innerHTML="*Field is empty"; 
     valid = false; 
    } 

    if(lastName.value=="") 
    { 
     document.getElementById('errorTwo').innerHTML="*Field is empty"; 
     valid = false; 
    } 

    return valid; 
}

只是代码本身的说明，上述评论是正确的为主，如果你发布你的整个代码，你可能会得到更多有用的响应。此外，您可以消除==""部分检查，只需测试变量的值，因为空字符串的计算结果为false。

来源

2015-03-31 15:04:37

非常感谢！有用。 :) – 2015-03-31 15:07:29

不用担心。希望我所说的一切都对你有意义。如果您有问题，只需询问，我会尽力回答。 – 2015-03-31 15:08:10

不要链的验证用的if-else否则，如果头名验证失败，那么你将永远不会检查姓氏验证一起。

来源

2015-03-31 14:57:27

帮助自己:-)

这里快速的创建的jsfiddle是：

正如其他人所提到的，缺少括号等： http://jsfiddle.net/23tnpve4/1/

你会很容易通过努力看到一些问题
正如其他人所说，如果第一次测试失败，其他字段不会被检查，所以错误可以通过逐步纠正。
没有代码可以刷新错误DIV。在新的表格检查中，必须首先清除错误字段。检查表格是具有几种可能的启动状态的循环。

尽量收集在一个阵列领域的地位，后来他们的工作，像这样：

window.validate = function() 
{ 
    var firstName = document.getElementById('firstName'); 
    var lastName = document.getElementById('lastName'); 

    // Clear 
    firstName.val(''); 
    lastName.val(''); 

    // Check 
    var errorNames = []; 
    if(firstName.value=="") 
    { 
    errorNames.push('firstName'); 
    } 

    if(lastName.value=="") 
    { 
    errorNames.push('lastName'); 
    } 

    // Inform 
    for (var i=0; i<errorNames.length; i++) { 
    document.getElementById(errorNames[i]).innerHTML="*Field is empty"; 
    } 

    // Return value 
    return errorNames.length == 0; 
}

这段代码的概念将更加直观。我没有检查它是否有错别字，这是一个草稿，但我希望它能帮助你。

来源

2015-03-31 15:14:45

在表单验证中同时显示所有错误消息

回答

相关问题