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小提琴脚本会这样做，我不断收到错误：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 =“...”只是一种简单的方式，我更喜欢类更改和类删除，如果没有错误。

上面的糖将是：

- 我们需要在字段生效后删除红色边框

- 创建包含姓名，条件和消息的所有字段的数组

通过循环数组自动执行该过程。这样我们可以做一个循环来清理边框，另一个循环来检查条件，以紧凑和可重用的代码结束。

Javascript多字段/表单验证

1 个答案: