使用提醒进行表单验证并显示所有选中的项目

我终于可以验证我的单选按钮和复选框。不过，我仍然有一些小问题。使用提醒进行表单验证并显示所有选中的项目

问题1：

当我提交我的表单填写所有需要的信息，形式输出所有选定的信息后，但我注意到，当我选择多个复选框，则仅显示一个在输出总结。表单验证

对于每个文本字段：如何让其他的复选框选中的项目出现，例如，如果我检查2个项目我应该看到两个检查输出摘要页面项目

第2期的任何提示，收音机框和未选中的复选框，这意味着如果我要填充除文本之外的所有文本并提交表单而未选择收音机框和复选框，则应收到警报，指出缺少的内容。但是，警报会在电子邮件后的第1步之后结束。如果没有选中无线电框和复选框，它甚至不会发出警报，除非我点击提交以再次验证表单。

如何强制从检查步骤1到3的验证？

我主要关心的是能够验证复选框，并能够选择多个，并让我的选择出现在输出中。

<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 = ""; 
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) 
    { 
    alert("Required data missing in Step 1"); 
    } 

if (validateRadio()==false) 
    { 
    alert("Required data missing in Step 2"); 
    } 

if(validateTops()==false) 
    { 
    alert("Required data missing in Step 3"); 
    return; 
    } 

/*This alerts tells the order form is complete and it will list all the customer information such as Name address etc.*/ 
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:" + document.PizzaForm.customer.value + "<br>") 
write("Address:" + document.PizzaForm.address.value + "<br>") 
write("City:" + 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:" + validateRadio() + "<br>") 
write("Pizza Toppings:" + validateTops() + "<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.*/ 

{ 
if (document.PizzaForm.customer.value == "") 
{ 
    alert("Please provide your name"); 
    document.PizzaForm.customer.focus(); 

} 

if (document.PizzaForm.address.value == "") 
{ 
    alert("Please provide your address."); 
    document.PizzaForm.address.focus(); 

} 

if (document.PizzaForm.city.value == "") 
{ 
    alert("Please provide your City."); 

} 

if (document.PizzaForm.state.value == "") 
{ 
    alert("Please provide your State."); 

} 

if (document.PizzaForm.zip.value == "" || 
    isNaN(document.PizzaForm.zip.value) || 
    document.PizzaForm.zip.value.length != 5) 
{ 
    alert("Please provide your Zip code."); 
    document.PizzaForm.zip.focus() ; 

} 

if (!/^\d{3}-\d{3}-\d{4}$/.test(document.PizzaForm.phone.value)) { 
    alert("Please provide a correct phone number."); 
    document.PizzaForm.phone.focus(); 
} 

var emailID = document.PizzaForm.email.value; 
atpos = emailID.indexOf("@"); 
dotpos = emailID.lastIndexOf("."); 
if (atpos < 1 || (dotpos - atpos < 2)) 
{ 
    alert("Please enter correct Email.") 
    document.myForm.Email.focus() ; 

} 
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 a pizza size."); 
    return false; 
} 

function validateTops()/*This function validates the checkbox selection*/ 
{ 
    for(i=0;i<document.PizzaForm.toppings.length;i++) 
     if(document.PizzaForm.toppings[i].checked==true) 
     return document.PizzaForm.toppings[i].value; 
    alert("Please pick a topping of your choice."); 
    return false; 
} 



</s cript> 

</ head> 
<body> 
<form Name ="PizzaForm"> 
<h1> The JavaScrpt Pizza Parlor</h> 
<p> 
<h4> Step 1: Enter your name, address, phone number, and email:</h4> 
<font face="Courier New"> 
Name: &nbsp;&nbsp;&nbsp;<Input name="customer" size="50" type="text"><br> 
Address:&nbsp;<Input name="address" size="50" type="text"><br> 
City: &nbsp;&nbsp;&nbsp;<Input name="city" size="15"type="text"> 
State:<Input name="state" size="2"type="text"><br> 
Zip:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Input name="zip" size="5"type="text"><br> 
Phone: &nbsp;&nbsp;<Input name="phone" size="50"type="text"><br> 
Email: &nbsp;&nbsp;<Input name="email" size="31"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> 
<!-- 
======================================================== 
The submit and clear form buttons belows. 
======================================================== 
--> 
<input type="button" value="Submit Order" onClick="doSubmit()"> 
<input type="button" value="Clear Entries" onClick="doClear()"> 
</ form> 
</ body> 
</ html>

来源

2015-05-28 Bigpat

jsfiddle请 –

http://www.html-form-guide.com/php-form/php-form-checkbox.html – user3633383

我想你有很多事情要做。你确定你不能使用jQuery吗？它肯定会简化你的一些代码（imao）。关于多重选择，您希望如何显示它？它可以是逗号分隔的列表吗？（例如，“辣香肠”，“黑橄榄”，“额外奶酪”等） –

好吧，我会尽量解决我从你的描述有：

问题＃1：当你在一个函数中陈述一个return，你最终它的执行。所以，在你的validateTops()上，当你找到第一个打顶时，你几乎可以结束它。这里有一个替代方法：

function validateTops()/*This function validates the checkbox selection*/ 
{ 
    var toppings = []; //<== empty array 
    for(i=0;i<document.PizzaForm.toppings.length;i++) 
     if(document.PizzaForm.toppings[i].checked==true) 
      toppings.push(document.PizzaForm.toppings[i].value); //<== including on the array 

    if (toppings.length == 0) { //<== testing if array is empty, meaning 'no tops' 
     alert("Please pick a topping of your choice."); 
     return false; 
    } else { return toppings; } 
}

我并没有完全得到你的其他问题，但我认为它是与警告有关被您在验证缺少的步骤，对不对？因此，这里是别的东西：

var stepsMissing = []; //<== new empty array 
if (validateText()==false) { 
    stepsMissing.push('Step 1'); 
} 
if (validateRadio()==false) { 
    stepsMissing.push('Step 2'); 
} 
if(!(validateTops())) { //<==same as "validateTops() == false", just so you know... 
    stepsMissing.push('Step 3'); 
} 
if (stepsMissing.length > 0) { 
    alert('Requiring data missing in '+stepsMissing); //<== this is turning your validation message into one message. For keeping it separated in 3 alerts, you can use a for loop iterating through stepsMissing 
}

的另一件事：你在呼唤你的验证功能一次，做验证，然后你再次调用它来fullfill你“订单”。难道你不应该只调用一次，并将返回的值存储在本地变量中，那么您将测试它们，然后在最终订单表单中使用它们？我知道这些功能太简单了，但你不会像这样浪费处理相同的事情。顺便说一句：如果你可以使用jQuery，你可以用更少的代码和更可读的方式（imao）来实现它。

来源

2015-05-28 02:19:03

使用提醒进行表单验证并显示所有选中的项目

回答

相关问题