Javascript多字段/表单验证

Question

是的,我知道有很多关于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小提琴脚本可以做到这一点,但是,我不断收到错误: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 ="..."只是一种简单的方式,我更喜欢类更改和类删除,如果没有错误.

顶上的糖将是:

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

- 创建所有字段的数组,包括名称,条件和消息

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