javascript 表单验证不会 return 正确

Question

正在尝试学习 JS 并且似乎进展顺利，但卡在这个表单验证上...它应该验证文本框没有留空或使用默认值。当验证 return 为 false 时可以弹出警报，但在字段中输入信息后，表单不会 return true 提交..

感谢任何帮助。请参阅下面的代码：

function validateFunc() {
  var nameField = document.forms[0].visitor_name.value
  var emailField = document.forms[0].email.value
  var phoneField = document.forms[0].phone.value
  var areaField = document.forms[0].area.value
  if (nameField || emailField || phoneField || areaField === "") { 
    window.alert("Please fill out all fields!");
    return false;
  }
  else {
    return true        
  }
}

<form action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded" onsubmit= "return validateFunc()">
  <p>Name<br />
    <input type="text" name="visitor_name" size="50"/ value="Enter your name" onclick="if (this.value == 'Enter your name') this.value='';">    
  </p>
  <p>E-mail Address<br />
    <input type="text" name="email" size="50" value="Enter your email address" onclick="if (this.value == 'Enter your email address') this.value='';"/>    
  </p>
  <p>Phone<br />
    <input type="text" name="phone" size="50" value="Enter your phone number" onclick="if (this.value == 'Enter your phone number') this.value='';"/>    
  </p>
  <p>Area of town<br />
    <input type="text" name="area" size="50" value="What area of town are you interested in?" onchange="noEmptyBoxes()" onclick="if (this.value == 'What area of town are you interested in?') this.value='';"/>    
  </p>
  <p>Property
    <select name="property_type">
      <option value="unselected">Select a property type</option> 
      <option value="condo">Condos</option> 
      <option value="single">Single Family Homes</option> 
      <option value="multi">Multifamily Homes</option> 
      <option value="mobile">Mobile Homes</option> 
      <option value="land">Land</option> 
    </select>
    Sq. feet <input type="text" name="feet" size="5" value="???" onclick="if (this.value == '???') this.value='';"/>    
  </p>
  <p>Bedrooms <input type="text" name="bedrooms" size="5" value="???" onclick="if (this.value == '???') this.value='';"/>
    Maximum Price <input type="text" name="price" size="12" value="$$$" onclick="if (this.value == '$$$') this.value='';"/>     
  </p>
  <p>How should we contact you?
    <input type="radio" name="contactHow" value="call_me"/>Call me
    <input type="radio" name="contactHow" value="e-mail_me"/>Email me    
  </p>
  <p>
    <input type="submit"/>
  </p>
</form>

Answer 1

如果变量是空字符串，那么语句 if (nameField) 将 return 为假。

您的陈述等同于：

if ( (nameField is NOT blank) OR 
     (emailField is NOT blank) OR
     (phoneField is NOT blank) OR
     (areaField IS blank) )

要检查是否有任何变量为空，请包括每个变量的比较：

if ( nameField=="" || emailField=="" || phoneField=="" || areaField=="" )

在下面找到一个演示：

我注意到您还没有编写代码来检查默认值，所以我暂时删除了它们。我一般都是先用placeholder attribute for default values, but check its compatibility再用

function validateFunc() {
  var nameField = document.forms[0].visitor_name.value
  var emailField = document.forms[0].email.value
  var phoneField = document.forms[0].phone.value
  var areaField = document.forms[0].area.value
  if (nameField == "" || emailField == "" || phoneField == "" || areaField == "") {
    alert("Please fill out all fields!");
  } else {
    alert("Ready to submit.");
  }
  return false;
}

<form action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded" onsubmit="return validateFunc()">
  <p>Name <input type="text" name="visitor_name" size="50" value=""></p>
  <p>E-mail Address <input type="text" name="email" size="50" value="" /></p>
  <p>Phone <input type="text" name="phone" size="50" value="" /></p>
  <p>Area of town <input type="text" name="area" size="50" value="" /></p>
  <p><input type="submit" /></p>
</form>

javascript 表单验证不会 return 正确

javascript form validation won't return true

javascript

forms

validation

return

onsubmit