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

我不知道 fiddle 错误，但关于你的脚本有几个改进:

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

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="..."只是一种简单的实现方式，如果没有出错，我更喜欢更改类和删除类。

上面的糖是:

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

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

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