3

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

我有这个JS 摆弄这个我想使用的脚本，它将按名称返回所有尚未填写的字段。我觉得这是一种更好的方法，因为我在下面的代码中尝试通过多个字段验证来完成相同的结果：

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，因为我知道它们有非常简单的插件，可以让您设置所需的类！

4

1 回答 1

5

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

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

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

上面的糖是：

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

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

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

于 2012-04-23T23:50:29.773 回答