如何验证复选框并在警报中显示所有用户输入？

Question

I need to add a function to validate the checkboxes. 我需要添加一个功能来验证复选框。 I have tried so many options and I am totally stuck. 我尝试了很多选择，但完全陷入困境。 Also, I am able to show the user's name, address, and other info once the submit button is clicked but I need to also add the size of the pizza they selected and the toppings in the alert. 另外，单击提交按钮后，我就能显示用户的姓名，地址和其他信息，但我还需要在警报中添加他们选择的比萨饼的大小和浇头。 This is what I have so far: 这是我到目前为止的内容：

<html>

<head>
<title>HTML and JavaScript</title>
<script>
/*nff Add the doClear function to clear the information entered by the user and enter the information to be cleared when the clear entries button is clicked at the bottom of the Web Page.*/

function doClear()
{
  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()


/*nff Add an if statement to the doSubmit function to show an alert message if there is missing information once the user clicks the submit order button at the bottom of the Web Page.*/

{
  if (validateText() == false) {
    return false;
  }

  //nff Add another if statment to the doSubmit function so that an alert is shown if no radio button has been selected for the size of the pizza.

  if (validateRadio() == false) {
    return false;
  }

  //nff Add an alert box to show customer information from text fields when the Submit Order button is clicked.

  var customer = document.PizzaForm.customer.value;
  var address = document.PizzaForm.address.value;
  var city = document.PizzaForm.city.value;
  var state = document.PizzaForm.state.value;
  var zip = document.PizzaForm.zip.value;
  var phone = document.PizzaForm.phone.value;
  var email = document.PizzaForm.email.value;
  alert("Name: " + customer + '\n' +
    "Address: " + address + '\n' +
    "City: " + city + '\n' +
    "State: " + state + '\n' +
    "Zip: " + zip + '\n' +
    "Phone: " + phone + '\n' +
    "Email: " + email);

}
//nff Add the validateText function to ensure that all fields are complete before the order is submitted.

function validateText() {
  var customer = document.PizzaForm.customer.value;
  if (customer.length == 0) {
    alert('name cannot be blank');
    document.PizzaForm.customer.focus();
    return false
  };
  var address = document.PizzaForm.address.value;
  if (address.length == 0) {
    alert('address cannot be blank');
    return false;
  }
  var city = document.PizzaForm.city.value;
  if (city.length == 0) {
    alert('name cannot be blank');
    return false;
  }
  var state = document.PizzaForm.state.value;
  if (state.length == 0) {
    alert('state cannot be blank');
    return false;
  }
  var zip = document.PizzaForm.zip.value;
  if (zip.length == 0) {
    alert('zip cannot be blank');
    return false;
  }
  var phone = document.PizzaForm.phone.value;
  if (phone.length == 0) {
    alert('phone cannot be blank');
    return false;
  }
  var email = document.PizzaForm.email.value;
  if (email.length == 0) {
    alert('email cannot be blank');
    return false;
  }
  return true;
}

//nff Add the validateRadio function so that if none of the radio buttons for size are selected it will alert the user as shown above.

function validateRadio() {
  if (document.PizzaForm.sizes[0].checked) return true;
  if (document.PizzaForm.sizes[1].checked) return true;
  if (document.PizzaForm.sizes[2].checked) return true;
  if (document.PizzaForm.sizes[3].checked) return true;
  alert('need to select a type of piza');
  document.PizzaForm.sizes[0].foucs();
  return false;
}
</script>
</head>

<body>
  <form name="PizzaForm">

<!--nff add title to the Web Page-->

  <h1>The JavaScript Pizza Parlor</h1>

<!--nff add directions to the user for the information to be entered-->

  <p>
  <h4>Step 1: Enter your name, address, and phone number:</h4>

<!--nff change the font-->

  <font face="Courier New">

<!--nff insert a text field for user to enter their name, add spaces between the title of the text box and the box itself, specify the size of the input box, and the type of input into the box as text.-->
    Name: &nbsp;&nbsp;&nbsp;<input name="customer" size="50"
    type="text"><br>

<!--nff insert a text field for user to enter their address, specify the size of the input box, and the type of input into the box as text.-->
    Address: <input name="address" size="50" type="text"><br>

<!--nff Insert a text field for user to enter their city, add spaces between the title of the text box and the box itself, specify the size of the input box, and the type of input into the box as text.-->
    City: &nbsp;&nbsp;&nbsp<input name="city" size="15" type="text">

<!--nff Insert text fields for the user to enter their state and zip, specify the sizes of the input boxes, and specify that the text to be entered into the boxes will be in all caps for the state box. These input boxes should be on the same line as the last one.-->
    State: <input name="state" size="2" type="TEXT">
    Zip: <input name="zip" size="5" type="text"><br>

<!--nff Insert a text field for the user to enter their phone number, insert spaces after the title of the box, specify the size of the box, and the type of input as text.-->
    Phone: &nbsp;&nbsp;<input name="phone" size="50" type="text"><br>

<!--nff Insert a text field for the user to enter their email address, insert spaces after the title of the box, specify the size of the box, and the type of input as text.-->
    Email: &nbsp;&nbsp;<input name="email" size="50" type="text"><br>
  </font>
 </p>

 <!--nff add second step to order a pizza-->
 <p>
   <h4>Step 2: Select the size of pizza you want:</h4>
   <font face="Courier New">

<!--nff Add radio buttons to choose from three options for pizza sizes.-->
     <input name="sizes" type="radio">Small
     <input name="sizes" type="radio">Medium
     <input name="sizes" type="radio">Large
     <input name="sizes" type="radio">Jumbo<br>
   </font>
 </p>
 <p>
   <h4>Step 3: Select the pizza toppings you want:</h4>
   <font face="Courier New">

<!--nff Add check boxes for user to choose toppings.-->
     <input name="toppings" type="checkbox">Pepperoni
     <input name="toppings" type="checkbox">Canadian Bacon
     <input name="toppings" type="checkbox">Sausage<br>
     <input name="toppings" type="checkbox">Mushrooms
     <input name="toppings" type="checkbox">Pineapple
     <input name="toppings" type="checkbox">Black Olives<br>
     <input name="toppings" type="checkbox">Green Peppers
     <input name="toppings" type="checkbox">Extra Cheese
     <input name="toppings" type="checkbox">None<br>
    </font>
   </p>

 <!--nff Add buttons for the options to submit order or clear entries. Add an onClick event to show the alert entered at the beginning of this document when the submit button is clicked at the bottom of the Web Page. Add and onClick event to clear the entries in this form upon clicking the clear entries button.-->
   <input type="button" value="Submit Order" onClick="doSubmit()">
   <input type="button" value="Clear Entries" onClick="doClear()">
  </form>
</body>

</html>

Answer 1

Try 尝试

 /*nff Add the doClear function to clear the information entered by the user and enter the information to be cleared when the clear entries button is clicked at the bottom of the Web Page.*/ function doClear() { 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() /*nff Add an if statement to the doSubmit function to show an alert message if there is missing information once the user clicks the submit order button at the bottom of the Web Page.*/ { if (validateText() == false) { return false; } //nff Add another if statment to the doSubmit function so that an alert is shown if no radio button has been selected for the size of the pizza. if (validateRadio() == false) { return false; } //nff Add an alert box to show customer information from text fields when the Submit Order button is clicked. var customer = document.PizzaForm.customer.value; var address = document.PizzaForm.address.value; var city = document.PizzaForm.city.value; var state = document.PizzaForm.state.value; var zip = document.PizzaForm.zip.value; var phone = document.PizzaForm.phone.value; var email = document.PizzaForm.email.value; var size = ""; for (var i = 0; i < document.PizzaForm.sizes.length; i++) { if (document.PizzaForm.sizes[i].checked) { size = document.PizzaForm.sizes[i].nextSibling.nodeValue.trim(); break; } } var toppings = []; for (var i = 0; i < document.PizzaForm.toppings.length; i++) { if (document.PizzaForm.toppings[i].checked) { toppings.push(document.PizzaForm.toppings[i].nextSibling.nodeValue.trim()); } } alert("Name: " + customer + '\\n' + "Address: " + address + '\\n' + "City: " + city + '\\n' + "State: " + state + '\\n' + "Zip: " + zip + '\\n' + "Phone: " + phone + '\\n' + "Email: " + email + '\\n' + "Size: " + size + '\\n' + (toppings.length ? 'Toppings: ' + toppings.join(', ') : '')); } //nff Add the validateText function to ensure that all fields are complete before the order is submitted. function validateText() { var customer = document.PizzaForm.customer.value; if (customer.length == 0) { alert('name cannot be blank'); document.PizzaForm.customer.focus(); return false }; var address = document.PizzaForm.address.value; if (address.length == 0) { alert('address cannot be blank'); return false; } var city = document.PizzaForm.city.value; if (city.length == 0) { alert('name cannot be blank'); return false; } var state = document.PizzaForm.state.value; if (state.length == 0) { alert('state cannot be blank'); return false; } var zip = document.PizzaForm.zip.value; if (zip.length == 0) { alert('zip cannot be blank'); return false; } var phone = document.PizzaForm.phone.value; if (phone.length == 0) { alert('phone cannot be blank'); return false; } var email = document.PizzaForm.email.value; if (email.length == 0) { alert('email cannot be blank'); return false; } return true; } //nff Add the validateRadio function so that if none of the radio buttons for size are selected it will alert the user as shown above. function validateRadio() { if (document.PizzaForm.sizes[0].checked) return true; if (document.PizzaForm.sizes[1].checked) return true; if (document.PizzaForm.sizes[2].checked) return true; if (document.PizzaForm.sizes[3].checked) return true; alert('need to select a type of piza'); document.PizzaForm.sizes[0].foucs(); return false; }

 <form name="PizzaForm"> <!--nff add title to the Web Page--> <h1>The JavaScript Pizza Parlor</h1> <!--nff add directions to the user for the information to be entered--> <p> <h4>Step 1: Enter your name, address, and phone number:</h4> <!--nff change the font--> <font face="Courier New"> <!--nff insert a text field for user to enter their name, add spaces between the title of the text box and the box itself, specify the size of the input box, and the type of input into the box as text.--> Name: &nbsp;&nbsp;&nbsp;<input name="customer" size="50" type="text"/><br/> <!--nff insert a text field for user to enter their address, specify the size of the input box, and the type of input into the box as text.--> Address: <input name="address" size="50" type="text"/><br/> <!--nff Insert a text field for user to enter their city, add spaces between the title of the text box and the box itself, specify the size of the input box, and the type of input into the box as text.--> City: &nbsp;&nbsp;&nbsp<input name="city" size="15" type="text"/> <!--nff Insert text fields for the user to enter their state and zip, specify the sizes of the input boxes, and specify that the text to be entered into the boxes will be in all caps for the state box. These input boxes should be on the same line as the last one.--> State: <input name="state" size="2" type="TEXT"/> Zip: <input name="zip" size="5" type="text"/><br/> <!--nff Insert a text field for the user to enter their phone number, insert spaces after the title of the box, specify the size of the box, and the type of input as text.--> Phone: &nbsp;&nbsp;<input name="phone" size="50" type="text"/><br/> <!--nff Insert a text field for the user to enter their email address, insert spaces after the title of the box, specify the size of the box, and the type of input as text.--> Email: &nbsp;&nbsp;<input name="email" size="50" type="text"/><br/> </font> </p> <!--nff add second step to order a pizza--> <p> <h4>Step 2: Select the size of pizza you want:</h4> <font face="Courier New"> <!--nff Add radio buttons to choose from three options for pizza sizes.--> <input name="sizes" type="radio"/>Small <input name="sizes" type="radio"/>Medium <input name="sizes" type="radio"/>Large <input name="sizes" type="radio"/>Jumbo<br/> </font> </p> <p> <h4>Step 3: Select the pizza toppings you want:</h4> <font face="Courier New"> <!--nff Add check boxes for user to choose toppings.--> <input name="toppings" type="checkbox"/>Pepperoni <input name="toppings" type="checkbox"/>Canadian Bacon <input name="toppings" type="checkbox"/>Sausage<br/> <input name="toppings" type="checkbox"/>Mushrooms <input name="toppings" type="checkbox"/>Pineapple <input name="toppings" type="checkbox"/>Black Olives<br/> <input name="toppings" type="checkbox"/>Green Peppers <input name="toppings" type="checkbox"/>Extra Cheese <input name="toppings" type="checkbox"/>None<br/> </font> </p> <!--nff Add buttons for the options to submit order or clear entries. Add an onClick event to show the alert entered at the beginning of this document when the submit button is clicked at the bottom of the Web Page. Add and onClick event to clear the entries in this form upon clicking the clear entries button.--> <input type="button" value="Submit Order" onClick="doSubmit()" /> <input type="button" value="Clear Entries" onClick="doClear()" /> </form>

Answer 2

Use http://jqueryvalidation.org/ 使用http://jqueryvalidation.org/

It is the best plugin for JQuery I found, it works perfectly and it is very simple. 这是我发现的JQuery最好的插件，它可以完美工作并且非常简单。

In the website you can find examples and how to do exactly what you need. 在网站上，您可以找到示例以及如何准确地执行所需的操作。

Example: 例：

$().ready(function() {
    // validate the comment form when it is submitted
    $("#commentForm").validate();

    // validate signup form on keyup and submit
    $("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname",
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy"
        }
    });

如何验证复选框并在警报中显示所有用户输入？

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-05-27 04:38:24

解决方案2
0 2015-05-27 04:07:03

如何验证复选框并在警报中显示所有用户输入？

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-05-27 04:38:24

解决方案2 0 2015-05-27 04:07:03

解决方案1
1 已采纳 2015-05-27 04:38:24

解决方案2
0 2015-05-27 04:07:03