Javascript多个字段/表单验证

Question

是的，我知道堆叠涉及表单验证有很多问题，但有些已经非常接近我想要完成的工作，我认为这是独一无二的。

我有this JS小提琴this我想使用的脚本将返回所有未填写名称的字段。我觉得这是因为我在做这个下面的代码，试图实现与多个现场验证的相同结果的更好的方法：

function validate () 
{ 
valid = true; 

if (document.contactinfo.Name.value == "") 
{ 
    alert ("You need to fill the name field!"); 
    valid = false; 
} 

    if (document.contactinfo.email.value == "") 
{ 
    alert ("You need to fill in your email!"); 
    valid = false; //change variable valid to false 
} 
return valid; 
} 

虽然上述作品，并推出多个警告框，我手动不得不提醒他们几次在什么领域需要填写。我宁愿发出警报，告诉他们一举失踪的领域，并将重点放回这些领域。 JS小提琴脚本这样做，但是，我不断得到的错误：ValidateRequiredFields is not defined ，我不明白问题在哪里。我已经正确地命名了一切，并且表单数据应该越过。

有什么想法？一如既往，如有需要，要求澄清。谢谢！

注：我不想使用JQuery，因为我知道他们有非常简单的插件，可以让您设置所需的类！

Answer 1

我不知道小提琴错误，但你的脚本有severall改进：

您可以通过收集所有信息到一个字符串改善这一点，做一个警报

function validate () { 
    var valid = true; 
    var msg="Incomplete form:\n"; 
    if (document.contactinfo.Name.value == "") { 
    msg+="You need to fill the name field!\n"; 
    valid = false; 
    } 
    if (document.contactinfo.contact_email.value == "") { 
    msg+="You need to fill in your email!\n"; 
    valid = false; 
    } 
    if (!valid) alert(msg); 
    return valid; 
} 

改善现在

function validate () { 
    var valid = true; 
    var msg="Incomplete form:\n"; 
    if (document.contactinfo.Name.value == "") { 
    if (valid)//only receive focus if its the first error 
     document.contactinfo.Name.focus(); 
    //change border to red on error (i would use a class change here... 
    document.contactinfo.Name.style.border="solid 1px red"; 
    msg+="You need to fill the name field!\n"; 
    valid = false; 
    } 
    if (document.contactinfo.contact_email.value == "") { 
    if (valid) 
     document.contactinfo.contact_email.focus(); 
    document.contactinfo.contact_email.style.border="solid 1px red"; 
    msg+="You need to fill in your email!\n"; 
    valid = false; 
    } 
    if (!valid) alert(msg); 
    return valid; 
} 

，上面的鳕鱼，焦点返回到第一个字段中的错误，改变边界色域与问题e信号错误，将焦点返回到第一个错误，并将红色边界放在错误的字段上......仍然需要一些改进。 首先，我们需要在字段有效时删除红色边框。这可以在上面的每个字段中使用其他字符来完成......但是我会假设每个字段只有一个错误条件，而且可能不会是这样的。 例如：电子邮件字段可以检查不空和有效的电子邮件

干净的一种方法是在开始时删除所有红色边框，然后开始验证。

style.border =“...”只是一个简单的做法，我更喜欢类更改和类删除，如果不是错误。

顶部的糖是：

- 我们需要一次现场变成有效去除红色边框

- 制作所有字段的数组包括姓名，条件和消息

自动化循环阵列的过程。这样我们就可以做一个清理边界的循环，另一个循环来检查条件，以一个紧凑且可重用的代码结束。