Javascript 多字段/表单验证

Javascript Multiple Field/Form Validation

提问by Brian

Yes, I know there are many questions on Stacked involving form validation but while some have been very close to what I'm trying to accomplish, I think this is unique.

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

I have thisJS fiddle with thisscript that I want to use that will return all the fields by name that have not been filled out. I feel this is a much better approach as I was doing this below code to try to accomplish the same result with multiple field validation:

我有这个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;
}

While the above works and puts out multiple alert boxes, I manually have to alert them several times on what fields need to be filled out. I'd much rather send out an alert that tells them what fields they are missing in one fell swoop and return the focus to those fields. The JS fiddle script does that, however, I keep getting the error that: ValidateRequiredFields is not definedand I don't see where the issue lies. I've named everything correctly and the form data should be getting passed up.

虽然上述工作并发出多个警报框，但我必须手动多次提醒他们需要填写哪些字段。我更愿意发出警报，告诉他们一举丢失了哪些字段，然后将焦点返回到这些字段。JS 小提琴脚本做到了这一点，但是，我不断收到以下错误：ValidateRequiredFields is not defined我看不出问题出在哪里。我已经正确命名了所有内容，并且应该传递表单数据。

Any thoughts? As always, ask for clarification if needed.Thanks!

有什么想法吗？与往常一样，如果需要，请要求澄清。谢谢！

Note: I would not like to use JQuery as I know they have very easy plugins that allow you to set required classes!

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

回答by neu-rah

I dont know about the fiddle error, but about your script there are severall improvements:

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

you can improve that by collecting all messages into a string and do a single alert

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

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

improvement, return focus to first field in error and changing border color of fields with problems:

改进，将焦点返回到错误的第一个字段并更改有问题的字段的边框颜色：

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

now, the above code signals error, return focus to first error and puts red borders on field with error... still we need some improvement. first we need to remove red border once the field is valid.. this could be done with an else on each field check above... however i would be assuming that there is only one error condition for each field, and that might not be the case. ex: email field can check for not empty and for valid email

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

one way to do that clean is to remove all red border at the beggining and then start validation.

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

the style.border="..." is only a simplistic way of doing it, i would prefer a class change and a class remove if not on error.

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

the sugar on top would be:

上面的糖是：

-we need to remove the red border once the field becomes valid

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

-Make an array of all fields including names, conditions and messages

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

Automate the process by cycling the array. That way we could do a cycle for cleaning borders and another to check conditions, ending with a compact and reusable code.

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