Javascript 多字段/表单验证

Question

是的，我知道有关 Stacked 的许多问题涉及表单验证，但虽然有些问题与我想要完成的任务非常接近，但我认为这是独一无二的。

我有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 fiddle 脚本会这样做，但是，我不断收到错误消息：ValidateRequiredFields is not defined 而且我看不出问题出在哪里。我已经正确命名了所有内容，并且应该传递表单数据。

有什么想法吗？与往常一样，如有需要请寻求说明。谢谢！

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

Answer 1

我不知道小提琴错误，但是关于你的脚本有几个改进：

您可以通过将所有消息收集到一个字符串中并执行单个警报来改进这一点

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;
}

现在，上面的代码表示错误，将焦点返回到第一个错误，并在有错误的字段上加上红色边框......我们仍然需要一些改进。 首先，一旦字段有效，我们需要删除红色边框。这可以通过上面每个字段检查的 else 来完成...但是我假设每个字段只有一个错误条件，这可能不是案子。 例如：电子邮件字段可以检查不为空和有效的电子邮件

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

style.border="..." 只是一种简单的方法，如果没有错误，我更喜欢更改类和删除类。

上面的糖是：

-一旦字段有效，我们需要删除红色边框

-制作一个包含名称、条件和消息在内的所有字段的数组

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