如果字段无效，则阻止表单提交（对于多字段表单）

问题描述 投票：0回答：1

好的。我有这个表单，如果提交验证失败，我会在其中发出错误。问题是，它仍然提交到服务器。

对于验证失败的每个字段，我仍然收到警报错误消息。但无论如何它都会提交到服务器。除非它是验证失败的最后一个字段。在这种情况下，我会收到错误消息，但它不会提交。

我正在努力找出我做错了什么。当我将每个字段放入单个 HTML 文件中时，我已经能够阻止提交每个字段。但当我将所有字段放在 HTML 文件中时，情况就不同了。

我之前的大部分表单验证都是单字段表单。

我做错了什么？
我的 HTML：
”

<form name="locationForm" action="https://www.w3schools.com/action_page.php" target="_blank" onsubmit="return validateForm();" method="post"> 
<label for="strname">Street Or PO Box Address:</label>
<input type="text" id="strname" name="strname"><br><br> 

<label for="cityname">City:</label> 
<input type="text" id="cityname" name="cityname"><br><br>

<label for="statename">State ( or territory ):</label>
<select id="statename" name="statename"> 
<option value="">Please pick your state or territory of residence:</option>
<option value="Alabama">AL</option>
<option value="Alaska">AK</option>
<option value="Arizona">AZ</option>
<option value="Arkansas">AR</option> 
<option value="California">CA</option> 
<option value="Colorado">CO</option> 
<option value="Connecticut">CT</option> 
<option value="Delaware">DE</option> 
<option value="Florida">FL</option> 
<option value="Georgia">GA</option> 
<option value="Hawaii">HI</option> 
<option value="Idaho">ID</option> 
<option value="Illinois">IL</option> 
<option value="Indiana">IN</option> 
<option value="Iowa">IA</option> 
<option value="Kansas">KS</option> 
<option value="Kentucky">KY</option> 
<option value="Louisiana">LA</option> 
<option value="Maine">ME</option> 
<option value="Maryland">MD</option> 
<option value="Massachusetts">MA</option> 
<option value="Michigan">MI</option> 
<option value="Minnesota">MN</option> 
<option value="Mississippi">MS</option> 
<option value="Missouri">MO</option> 
<option value="Montana">MT</option> 
<option value="Nebraska">NE</option> 
<option value="Nevada">NV</option> 
<option value="New Hampshire">NH</option> 
<option value="New Jersey">NJ</option> 
<option value="New Mexico">NM</option> 
<option value="New York">NY</option> 
<option value="North Carolina">NC</option> 
<option value="North Dakota">ND</option> 
<option value="Ohio">OH</option>
<option value="Oklahoma">OK</option> 
<option value="Oregon">OR</option> 
<option value="Pennsylvania">PA</option> 
<option value="Rhode Island">RI</option> 
<option value="South Carolina">SC</option>
<option value="South Dakota">SD</option> 
<option value="Tennessee">TN</option> 
<option value="Texas">TX</option> 
<option value="Utah">UT</option> 
<option value="Vermont">VT</option>
<option value="Virginia">VA</option> 
<option value="Washington">WA</option>
<option value="West Virginia">WV</option>
<option value="Wisconsin">WI</option>
<option value="Wyoming">WY</option>
<option value="District Of Columbia">DC</option>
<option value="American Samoa">AS</option> 
<option value="Guam">GU</option>
<option value="Northern Mariana Islands">MP</option> 
<option value="Puerto Rico">PR</option> 
<option value="US Virgin Islands">VI</option>
</select><br><br>

<label for="zipcode">Zip Code:</label> 
<input type="number" id="zipcode" name="zipcode"><br><br>
<input type="submit" value="Submit"> 
</form> 

<script> 
function validateForm() { 
valid = true;

let w = /^([0-9A-Za-z]+\s)+([0-9A-Za-z]+\s)+([0-9A-Za-z]+\s)+([0-9A-Za-z])+|([A-Z]+\s)+([A-Za-z]+\s)+([0-9]+)$/;
if ( document.locationForm.strname.value == "" ) { 
alert ( "Physical ( street or PO ) address cannot be blank" ); 
valid = false; 
} 

else if ( document.locationForm.strname.value.match ( w ) ) 
{ valid = true; } 

else { 
alert ( "A physical address can only have letters and numbers with spaces between them" ); 
valid = false; 
}

let x = /^[A-Za-z]+$/; 
if ( document.locationForm.cityname.value == "" ) { 
alert ( "City name cannot be blank" ); 
valid = false; 
}

else if ( document.locationForm.cityname.value.match ( x ) ) 
{ valid = true; } 

else { 
alert ( "A city name can only have letters in it." ); 
valid = false; 
}

if ( document.locationForm.statename.selectedIndex == 0 ) {
alert ( "What state or territory do you live in?" ); 
valid = false; 
} 

else if ( document.locationForm.statename.selectedIndex != 0 ) { 
valid = true; 
} 

let z = /^[0-9]{5}$/; 
if ( document.locationForm.zipcode.value == "" ) { 
alert ( "Zip code cannot be blank" ); 
valid = false; 
} 

else if ( document.locationForm.zipcode.value.match ( z ) ) 
{ valid = true; } 

else { 
alert ( "Zip code must have exactly five digits." ); 
valid = false; 
}
return valid; 
} 
</script>

</body> 
</html>

我正在努力找出我做错了什么。当我将每个字段放入单个 HTML 文件中时，我已经能够阻止提交每个字段。但当我将所有字段放在 HTML 文件中时，情况就不同了。

我之前的大部分表单验证都是单字段表单。

javascript html forms validation
1个回答
0
投票

您可以使用浏览器内置的表单验证。在这里，我将不同的消息添加为每个表单字段上的属性，并使用该值向用户显示自定义错误消息。

只要所有必填表单字段均无效，表单就不会提交。验证基于对不同表单字段上的模式、最小和最大属性的评估。

document.locationForm.addEventListener('invalid', e => {
  let message = (e.target.value == '') ? e.target.dataset.blank : e.target.title;
  e.target.setCustomValidity(message);
}, true);
form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
}
<form name="locationForm" action="/location.php" method="post">
  <label>Street Or PO Box Address: <input type="text" name="strname" pattern="[0-9A-Za-z]+[0-9A-Za-z\s]+" title="A physical address can only have letters and numbers with spaces between them" data-blank="Physical ( street or PO ) address cannot be blank" required></label>

  <label>City: <input type="text" name="cityname" pattern="[A-Za-z]+" title="A physical address can only have letters and numbers with spaces between them" data-blank="City name cannot be blank" required></label>

  <label>State ( or territory ): <select name="statename" title="What state or territory do you live in?" data-blank="What state or territory do you live in?" required>
    <option value="">Please pick your state or territory of residence:</option>
    <option value="Alabama">AL</option>
    <option value="Alaska">AK</option>
    <option value="Arizona">AZ</option>
    <option value="Arkansas">AR</option>
    <option value="California">CA</option>
    <option value="Colorado">CO</option>
    <option value="Connecticut">CT</option>
    <option value="Delaware">DE</option>
    <option value="Florida">FL</option>
    <option value="Georgia">GA</option>
    <option value="Hawaii">HI</option>
    <option value="Idaho">ID</option>
    <option value="Illinois">IL</option>
    <option value="Indiana">IN</option>
    <option value="Iowa">IA</option>
    <option value="Kansas">KS</option>
    <option value="Kentucky">KY</option>
    <option value="Louisiana">LA</option>
    <option value="Maine">ME</option>
    <option value="Maryland">MD</option>
    <option value="Massachusetts">MA</option>
    <option value="Michigan">MI</option>
    <option value="Minnesota">MN</option>
    <option value="Mississippi">MS</option>
    <option value="Missouri">MO</option>
    <option value="Montana">MT</option>
    <option value="Nebraska">NE</option>
    <option value="Nevada">NV</option>
    <option value="New Hampshire">NH</option>
    <option value="New Jersey">NJ</option>
    <option value="New Mexico">NM</option>
    <option value="New York">NY</option>
    <option value="North Carolina">NC</option>
    <option value="North Dakota">ND</option>
    <option value="Ohio">OH</option>
    <option value="Oklahoma">OK</option>
    <option value="Oregon">OR</option>
    <option value="Pennsylvania">PA</option>
    <option value="Rhode Island">RI</option>
    <option value="South Carolina">SC</option>
    <option value="South Dakota">SD</option>
    <option value="Tennessee">TN</option>
    <option value="Texas">TX</option>
    <option value="Utah">UT</option>
    <option value="Vermont">VT</option>
    <option value="Virginia">VA</option>
    <option value="Washington">WA</option>
    <option value="West Virginia">WV</option>
    <option value="Wisconsin">WI</option>
    <option value="Wyoming">WY</option>
    <option value="District Of Columbia">DC</option>
    <option value="American Samoa">AS</option>
    <option value="Guam">GU</option>
    <option value="Northern Mariana Islands">MP</option>
    <option value="Puerto Rico">PR</option>
    <option value="US Virgin Islands">VI</option>
  </select></label>
  <label>Zip Code: <input type="number" name="zipcode" min="10000" max="99999" title="Zip code must have exactly five digits" data-blank="Zip code cannot be blank" required></label>
  <input type="submit" value="Submit">
</form>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.