表单验证通过后无法提交问题求助

嘿，我来帮你看看这个表单提交的问题～ 仔细看了你的代码，发现两个核心问题导致验证通过后表单还是没法提交：

问题1：验证函数缺少成功时的返回值 #

你的每个验证函数（比如validatename）只有在输入为空时返回false，但验证通过的时候没有返回任何值，默认会返回undefined。而undefined在逻辑判断里会被当成false处理，所以哪怕所有字段都填对了，整个验证表达式的结果还是false，表单自然提交不了。

问题2：位运算符用错了 #

你在onsubmit里用了位与&，但我们需要的是逻辑与&&。位与是对数值做二进制运算的，逻辑与才是用来判断多个条件是否全部成立的。

修复步骤 #

第一步：给所有验证函数加上成功返回值 #

每个函数在验证通过后都要加上return true;，修改后的JS代码如下：

function validatename() {
  if( document.contact.name.value == "" ) {
    alert( "Please provide your name!" );
    document.contact.name.focus() ;
    return false ;
  }
  // 验证通过时返回true
  return true;
}

function validateemail() {
  if( document.contact.email.value == "" ) {
    alert( "Please provide your email address!" );
    document.contact.email.focus() ;
    return false ;
  }
  return true;
}

function validatecomments() {
  if( document.contact.comments.value == "" ) {
    alert( "Please provide your comments!" );
    document.contact.comments.focus() ;
    return false ;
  }
  return true;
}

function validateRecaptcha() {
  var response = grecaptcha.getResponse();
  if (response.length === 0) {
    alert("You need to fill the captcha");
    return false ;
  }
  return true;
}

第二步：修正onsubmit中的运算符 #

把位与&换成逻辑与&&，同时可以去掉多余的!!转换，直接返回验证结果：

<form name="contact" method="post" action="contact.php" onsubmit="return validatename() && validateemail() && validatecomments() && validateRecaptcha();">

额外优化小建议 #

• 页面里有两个id="form"的元素（外层的div和reCAPTCHA的div），ID是唯一标识，重复会导致DOM操作出问题，建议把reCAPTCHA的div改成id="recaptcha-container"。
• 推荐用document.getElementById来获取表单元素，比直接用document.contact.name更健壮，比如给输入框加上id属性：<input type="text" id="name" name="name" maxlength="50" size="30">，然后用document.getElementById('name').value获取值。

这样修改后，当所有验证都通过时，表单就会正常提交啦～

内容的提问来源于stack exchange，提问作者David Thompson