如果验证失败，如何使表单不提交。 [英] How to get the form not to submit if validation fails.
本文介绍了如果验证失败，如何使表单不提交。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
即使验证失败，我的应用程序似乎仍会提供输出。我已经尝试了很多方法来编辑代码但是没有用，表单仍然允许提交并给出输出。
我需要帮助才能使这个表单能够在提交时验证，如果甚至有一个失败验证或错误，表单不应提交并给出输出。只有提醒。我需要帮助验证。如果验证失败并且表单甚至不应提交输出，则应该只有警报。请帮我解决一下这个。请参阅下面的表格。在此先感谢
我已经尝试过堆栈但仍然没有运气。
It seems that my application still gives an output even if the validation fails. I have tried so many ways to edit the codes but to no avail the form still allows submissions and gives an output.
I need help to get this form to be able to validate upon submission and if there is even one fail validation or error the form should not submit and gives an output. Only alerts. I need help with validation. There should be only alerts if the validation fails and the form should not even submit with an output. Please help me with this. Please see my form below. Thanks in advance
I have tried stack but still no luck.
<html>
<head>
<title>Hello and JavaScript</title>
<script>
function doClear()/*This function clears the order form once it has been completed*/
{
document.PizzaForm.customer.value = "";
document.PizzaForm.address.value = "";
document.PizzaForm.city.value = "";
document.PizzaForm.state.value = "PA";
document.PizzaForm.zip.value = "";
document.PizzaForm.phone.value = "";
document.PizzaForm.email.value = "";
document.PizzaForm.sizes[0].checked = false;
document.PizzaForm.sizes[1].checked = false;
document.PizzaForm.sizes[2].checked = false;
document.PizzaForm.sizes[3].checked = false;
document.PizzaForm.toppings[0].checked = false;
document.PizzaForm.toppings[1].checked = false;
document.PizzaForm.toppings[2].checked = false;
document.PizzaForm.toppings[3].checked = false;
document.PizzaForm.toppings[4].checked = false;
document.PizzaForm.toppings[5].checked = false;
document.PizzaForm.toppings[6].checked = false;
document.PizzaForm.toppings[7].checked = false;
document.PizzaForm.toppings[8].checked = false;
return;
}
function doSubmit() /*This function submits the order form once it has been completed*/
{
if (validateText() == false)
if (validateRadio() == false)
if (validateTops() == false)
{
return;
}
/*This function cap the firs letters of the name and city*/
function capitalizeString(stringToCapitalize) {
var words = stringToCapitalize.split(' ');
for (var i=0, il=words.length; i<il; i++) {
if (words[i].length > 0) {
words[i] = words[i].charAt(0).toUpperCase()
+ words[i].substring(1, words[i].length);
}
}
return words.join(' ');
}
var toppings = "";/*This validates the topping for the alerts*/
for(i=0;i<document.PizzaForm.toppings.length;i++){
if(document.PizzaForm.toppings[i].checked)
toppings += (i==0?"":",")+document.PizzaForm.toppings[i].value;
}
/*This alerts tells the order form is complete and it will list all the customer information such as Name address etc on a new page.*/
var OrderWindow
OrderWindow = window.open("","","status,height=500,width=500");
OrderWindow.focus();
with (OrderWindow.document)
{
write("<h1><center>Customer Order Summary</center></h1><p>")
write("Name:" + capitalizeString(document.PizzaForm.customer.value) + "<br>")
write("Address:" + document.PizzaForm.address.value + "<br>")
write("City:" + capitalizeString(document.PizzaForm.city.value) + "<br>")
write("State:" + document.PizzaForm.state.value + "<br>")
write("Zip Code:" + document.PizzaForm.zip.value + "<br>")
write("Phone Number:" + document.PizzaForm.phone.value + "<br>")
write("E-Mail:" + document.PizzaForm.email.value + "<br>")
write("Pizza Size:" + document.PizzaForm.sizes.value + "<br>")
write("Toppings:" + toppings + "<br>")
write("<h3><center>Thank You for your Order.</center></h3><p>")
}
return;
}
function validateText()/*This function validate all the text field in step 1.*/
{
var customer = document.PizzaForm.customer.value;
if (customer.length == 0)
{
alert("Please enter your name.")
document.PizzaForm.customer.focus();
}
var address = document.PizzaForm.address.value;
if (address.length == 0)
{
alert("Please enter your address.")
document.PizzaForm.address.focus();
}
var city = document.PizzaForm.city.value;
if (city.length == 0)
{
alert("Please enter your city.")
document.PizzaForm.city.focus();
}
var state = document.PizzaForm.state.value;
if (state.length == 0)
{
alert("Please enter your state.")
document.PizzaForm.state.focus();
}
if (document.PizzaForm.zip.value == "" ||
isNaN( document.PizzaForm.zip.value ) ||
document.PizzaForm.zip.value.length != 5 )
{
alert("Please provide a valid Zip code.");
document.PizzaForm.zip.focus() ;
}
/*This test for phone format xxx-xxx-xxxx, xxxxxxxxxx,(xxx)xxxxxxx, (xxx)xxx-xxxx.*/
if (!/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/.test(document.PizzaForm.phone.value)){
alert("Please provide a valid phone number.");
document.PizzaForm.phone.focus();
}
var email = document.PizzaForm.email.value;/* This test validates the email addres input.*/
if(!(/^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/.test(email))){
alert('Please enter a valid e-mail address');
document.PizzaForm.email.focus() ;
return false;
}
return true;
}
function validateRadio()/*This function validates the radio selection*/
{
for(i=0;i<document.PizzaForm.sizes.length;i++)
if(document.PizzaForm.sizes[i].checked)
return document.PizzaForm.sizes[i].value;
alert("Please choose the size of your order.");
return false;
}
function validateTops()/*This function validates the toppings.*/
{
if (document.PizzaForm.toppings[0].checked == false &&
document.PizzaForm.toppings[1].checked == false &&
document.PizzaForm.toppings[2].checked == false &&
document.PizzaForm.toppings[3].checked == false &&
document.PizzaForm.toppings[4].checked == false &&
document.PizzaForm.toppings[5].checked == false &&
document.PizzaForm.toppings[6].checked == false &&
document.PizzaForm.toppings[7].checked == false &&
document.PizzaForm.toppings[8].checked == false)
{
alert("Please select a topping of your choice.");
return false;
}
return true;
}
</script>
</head>
<body bgcolor="#EFEFCF">
<div align="center">
<pre><h2>Pizza Menu Prices Today's Selection</h2></pre>
<iframe name="left" src="prices.html" width="40%" height="380" scrolling="no" frameborder="0"></iframe>
<iframe name="right" src="images.html" width="35%" height="380" scrolling="no" frameborder="0"></iframe>
<form Name ="PizzaForm">
<h1>The JavaScript Pizza Parlor</h>
<p>
<h4> Step 1: Enter your Name, Address, City, State, Phone, Zip, and email:</h4>
<font face="Courier New">
Name: <Input name="customer" size="50" type="text"><br>
Address: <Input name="address" size="50" type="text"><br>
City: <Input name="city" size="16"type="text">
State:<select name="state">
<option value="">Select</option>
<option value="PA">PA</option>
<option value="NJ">NJ</option>
<option value="NY">NY</option>
<option value="DE">DE</option>
</select>
Zip:<Input name="zip" size="5"type="text"><br>
Phone: <Input name="phone" size="50"type="text"><br>
Email: <Input name="email" size="50"type="text"><br>
</font>
</p>
<p>
<h4> Step 2: Select the size of pizza you want:</h4>
<font face="Courier New">
<input name="sizes" type="radio" value="Small">Small
<input name="sizes" type="radio" value="Medium">Medium
<input name="sizes" type="radio" value="Large">Large
<input name="sizes" type="radio" value="Jumbo">Jumbo<br>
</font>
</p>
<p>
<h4> Step 3: Select the pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox" value="Pepperoni">Pepperoni
<input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon
<input name="toppings" type="checkbox" value="Sausage">Sausage<br>
<input name="toppings" type="checkbox" value="Mushrooms">Mushrooms
<input name="toppings" type="checkbox" value="Pineapple">Pineapple
<input name="toppings" type="checkbox" value="Black Olives">Black Olives<br>
<input name="toppings" type="checkbox" value="Green Peppers">Green Peppers
<input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese
<input name="toppings" type="checkbox" value="Plain">Plain
</font>
</p>
<input type="button" value="Submit Order" onClick="doSubmit()">
<input type="button" value="Clear Entries" onClick="doClear()">
</form>
</div>
</body>
</html>推荐答案
/.test(document.PizzaForm.phone.value)){
alert(\"Please provide a valid phone number.\");
document.PizzaForm.phone.focus();
}
var email = document.PizzaForm.email.value;/* This test validates the email addres input.*/
if(!(/^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]
/.test(document.PizzaForm.phone.value)){ alert("Please provide a valid phone number."); document.PizzaForm.phone.focus(); } var email = document.PizzaForm.email.value;/* This test validates the email addres input.*/ if(!(/^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]
/.test(email))){
alert('Please enter a valid e-mail address');
document.PizzaForm.email.focus() ;
return false ;
}
返回 true ;
}
function validateRadio()/*This function validates the radio selection*/
{
for(i=0;i<document.PizzaForm.sizes.length;i++)
if(document.PizzaForm.sizes[i].checked)
return document.PizzaForm.sizes[i].value;
alert(\"Please choose the size of your order.\");
return false ;
}
function validateTops()/*This function validates the toppings.*/
{
if (document.PizzaForm.toppings[0].checked == false &&
document.PizzaForm.toppings[1].checked == false &&
document.PizzaForm.toppings[2].checked == false &&
document.PizzaForm.toppings[3].checked == false &&
document.PizzaForm.toppi ngs[4].checked == false &&
document.PizzaForm.toppings[5].checked == false &&
document.PizzaForm.toppings[6].checked == false &&
document.PizzaForm.toppings[7].checked == false &&
document.PizzaForm.toppings[8].checked == false)
{
alert(\"Please select a topping of your choice.\");
return false ;
}
return true;
}
</script>
</head>
<body bgcolor=\"#EFEFCF\">
<div align=\"center\">
<pre><h2>Pizza Menu Prices Today's Selection</h2></pre>
<iframe name=\"left\" src=\"prices.html\" width=\"40%\" height=\"380\" scrolling=\"no\" frameborder=\"0\"></iframe>
<iframe name=\"right\" src=\"images.html\" width=\"35%\" height=\"380\" scrolling=\"no\" frameborder=\"0\"></iframe>
<form Name =\"PizzaForm\">
<h1>The JavaScript Pizza Parlor</h>
<p>
<h4> Step 1: Enter your Name, Address, City, State, Phone, Zip, and email:</h4>
<font face=\"Courier New\">
Name: <Input name=\"customer\" size=\"50\" type=\"text\"><br>
Address: <Input name=\"address\" size=\"50\" type=\"text\"><br>
City: <Input name=\"city\" size=\"16\"type=\"text\">
State:<select name=\"state\">
<option value=\"\">Select</option>
<option value=\"PA\">PA</option>
<option value=\"NJ\">NJ</option>
<option value=\"NY\">NY</option>
<option value=\"DE\">DE</option>
</select>
Zip:<Input name=\"zip\" size=\"5\"type=\"text\"><br>
Phone: <Input name=\"phone\" size=\"50\"type=\"text\"><br>
Email: <Input name=\"email\" size=\"50\"type=\"text\"><br>
</font>
</p>
<p>
<h4> Step 2: Select the size of pizza you want:</h4>
<font face=\"Courier New\">
<input name=\"sizes\" type=\"radio\" value=\"Small\">Small
<input name=\"sizes\" type=\"radio\" value=\"Medium\">Medium
<input name=\"sizes\" type=\"radio\" value=\"Large\">Large
<input name=\"sizes\" type=\"radio\" value=\"Jumbo\">Jumbo<br> value=\"Extra Cheese\">Extra Cheese
</font>
</p>
<p>
<h4> Step 3: Select the pizza toppings you want:</h4>
<font face=\"Courier New\">
<input name=\"toppings\" type=\"checkbox\" value=\"Pepperoni\">Pepperoni
<input name=\"toppings\" type=\"checkbox\" value=\"Canadian Bacon\">Canadian Bacon
<input name=\"toppings\" type=\"checkbox\" value=\"Sausage\">Sausage<b r>
<input name=\"toppings\" type=\"checkbox\" value=\"Mushrooms\">Mushrooms
<input name=\"toppings\" type=\"checkbox\" value=\"Pineapple\">Pineapple
<input name=\"toppings\" type=\"checkbox\" value=\"Black Olives\">Black Olives<br>
<input name=\"toppings\" type=\"checkbox\" value=\"Green Peppers\">Green Peppers
<input name=\"toppings\" type=\"checkbox\"
<input name=\"toppings\" type=\"checkbox\" value=\"Plain\">Plain
</font>
</p>
<input type=\"button\" value=\"Submit Order\" onClick=\"doSubmit()\">
<input type=\"button\" value=\"Clear Entries\" onClick=\"doClear()\">
</form>
</div>
</body>
</html>
/.test(email))){ alert('Please enter a valid e-mail address'); document.PizzaForm.email.focus() ; return false; } return true; } function validateRadio()/*This function validates the radio selection*/ { for(i=0;i<document.PizzaForm.sizes.length;i++) if(document.PizzaForm.sizes[i].checked) return document.PizzaForm.sizes[i].value; alert("Please choose the size of your order."); return false; } function validateTops()/*This function validates the toppings.*/ { if (document.PizzaForm.toppings[0].checked == false && document.PizzaForm.toppings[1].checked == false && document.PizzaForm.toppings[2].checked == false && document.PizzaForm.toppings[3].checked == false && document.PizzaForm.toppings[4].checked == false && document.PizzaForm.toppings[5].checked == false && document.PizzaForm.toppings[6].checked == false && document.PizzaForm.toppings[7].checked == false && document.PizzaForm.toppings[8].checked == false) { alert("Please select a topping of your choice."); return false; } return true; } </script> </head> <body bgcolor="#EFEFCF"> <div align="center"> <pre><h2>Pizza Menu Prices Today's Selection</h2></pre> <iframe name="left" src="prices.html" width="40%" height="380" scrolling="no" frameborder="0"></iframe> <iframe name="right" src="images.html" width="35%" height="380" scrolling="no" frameborder="0"></iframe> <form Name ="PizzaForm"> <h1>The JavaScript Pizza Parlor</h> <p> <h4> Step 1: Enter your Name, Address, City, State, Phone, Zip, and email:</h4> <font face="Courier New"> Name: <Input name="customer" size="50" type="text"><br> Address: <Input name="address" size="50" type="text"><br> City: <Input name="city" size="16"type="text"> State:<select name="state"> <option value="">Select</option> <option value="PA">PA</option> <option value="NJ">NJ</option> <option value="NY">NY</option> <option value="DE">DE</option> </select> Zip:<Input name="zip" size="5"type="text"><br> Phone: <Input name="phone" size="50"type="text"><br> Email: <Input name="email" size="50"type="text"><br> </font> </p> <p> <h4> Step 2: Select the size of pizza you want:</h4> <font face="Courier New"> <input name="sizes" type="radio" value="Small">Small <input name="sizes" type="radio" value="Medium">Medium <input name="sizes" type="radio" value="Large">Large <input name="sizes" type="radio" value="Jumbo">Jumbo<br> </font> </p> <p> <h4> Step 3: Select the pizza toppings you want:</h4> <font face="Courier New"> <input name="toppings" type="checkbox" value="Pepperoni">Pepperoni <input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon <input name="toppings" type="checkbox" value="Sausage">Sausage<br> <input name="toppings" type="checkbox" value="Mushrooms">Mushrooms <input name="toppings" type="checkbox" value="Pineapple">Pineapple <input name="toppings" type="checkbox" value="Black Olives">Black Olives<br> <input name="toppings" type="checkbox" value="Green Peppers">Green Peppers <input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese <input name="toppings" type="checkbox" value="Plain">Plain </font> </p> <input type="button" value="Submit Order" onClick="doSubmit()"> <input type="button" value="Clear Entries" onClick="doClear()"> </form> </div> </body> </html>
Change
Change
<input type="button" value="Submit Order" onClick="doSubmit()">
to
to
<input type="button" value="Submit Order" onClick="return doSubmit()">
function doSubmit()
{
if (/* your fields are all valid */)
{
return true;
}
else
{
return false;
}
{这篇关于如果验证失败，如何使表单不提交。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
