当我单击表单提交按钮时，为什么不进入下一页？

Question

我试图弄清楚为什么表单的“提交此表单”按钮不能将我带到在<form ... action="submit form.html" method="get">属性中指定的另一个HTML页面，而不仅仅是但是，当我输入错误的名字，电子邮件地址，订单号和订单日期时，它不会返回我在使用JavaScript的if-else代码中指定的JavaScript消息。

这是我在表单上使用的JavaScript代码。

 var $ = function (id) { return document.getElementById(id); } var submitForm = function() { var FirstName= $("firstName").value; var OrderNumber= $("orderNumber").value; var DateOfOrder= $("date_of_order").value; var emailAddress= $("email_address").value; var isValid=true; if(FirstName !== "Cherry", "Micheal", "Sandra", "Cookie") { $("firstname_error").firstChild.nodeValue= "This person does not exist."; isValid=false; } else{ $("firstname_error").firstChild.nodeValue="";} if(OrderNumber !== 3134, 4234, 9234, 3566) { $("orderNumber_error").firstChild.nodeValue="Invalid Order Number."; isValid=false; } else{ $("orderNumber_error").firstChild.nodeValue="";} if(DateOfOrder !=='12-07-23', '15-04-24', '16-02-01', '14-01-12') { $("date_of_order_error").firstChild.nodeValue="Date doesn't exist in system"; isValid=false; } else{ $("date_of_order_error").firstChild.nodeValue="";} if(emailAddress !="cherryjackson@gmail.com", "michealroberts@yahoo.com", "sandrabell@hotmail.com", "cookiedanny@outlook.com") { $("email_address_error").firstChild.nodeValue="The email doesn't exist"; isValid=false; } else{ $("email_address_error").firstChild.nodeValue="";} if(isValid) { //submit the form if all entries are valid $("cookie_form").submit(); } } window.onload = function() { $("form_submission").onclick = submitForm; $("email_address").focus(); }

 body{ background-color:#FBFBE8; } /* Tells HTML5 to find the font-type-face that my OS has and then use that for heading 1 and also centers the first heading */ h1{ font-family:Arial, Helvetica, sans-serif; text-align:center; } /* Tells HTML5 to use any of the font-types for my first paragraph in HTML source file if one is not available. Also clears some white space from the left margin of the paragraph and finally tells it to give that paragraph a size of 20 pixels. */ p{ font-family:Arial, Helvetica, sans-serif; padding: 20px; font-size:20px; } label{ float: left; width: 11em; text-align: right; font-family:Arial, Helvetica, sans-serif; color:#800000; } input{ margin-left: 1em; margin-bottom:.5em; } span{ color: red; } .field_set_1{ border-color: purple; border-style: solid; } #form_submission{ background-color:black; color:white; } legend{ font-family:Arial, Helvetica, sans-serif; color:blue; } /* All of the classes are just for positioning and floating the four same images around the form input information */ .Wrap1{ float:right; margin:40px; width:200px; height:200px; } .Wrap2{ float:left; margin:40px; width:200px; height:200px; } .clearfix { clear: both; }

 <!DOCTYPE html> <html> <head> <title>Cookie Order Form </title> <link rel="stylesheet" href="First_Design.css"> <script src="cookieform.js"></script> </head> <body> <h1>Cookie Order Form</h1> <p>This form is a cookie order form for customers that purchased cookies from Daron's Cookies Company and the following below must be filled out in order for each customer to receive a final message that tells them when their order will be ready.</p> <IMG class="Wrap1" SRC="cookie.gif" alt="cookie"> <IMG class="Wrap2" SRC="cookie.gif" alt="cookie2"> <!--The customer will be sent to the HTML page named "submit form.html" after they click the "Submit this Form" button. The code below does this. --> <div> <form id="cookie_form" name="cookie_form" action="submit form.html" method="get"> <fieldset class="field_set_1"> <!-- Below sets the title of the form-->    <legend>Customer Order Form Information:</legend> <!-- Creates the first left label to specify what should be placed in the text box the the right of the label. The rest below does the same.--> <label for="firstName">First Name:</label> <input type="text" id="firstName" name="firstName"> <span id="firstname_error">*</span><br> <label for="orderNumber">Order Number:</label> <input type="text" id="orderNumber" name="orderNumber"> <span id="orderNumber_error">*</span><br> <label for="date_of_order">Date of Order:</label> <input type="text" id="date_of_order" name="date_of_order"> <span id="date_of_order_error">*</span><br> <label for="email_address">Email Address:</label> <input type="text" id="email_address" name="email_address"> <span id="email_address_error">*</span><br> <label>&nbsp;</label> <input type="button" id="form_submission" value="Submit this Form"> </fieldset> </form> </div> <div class="clearfix"> </div> <IMG class="Wrap1" SRC="cookie.gif" alt="cookie"> <IMG class="Wrap2" SRC="cookie.gif" alt="cookie2"> </body> </html>

Answer 1

您的代码有很多问题，但是最大的是您的验证测试，每个测试都遵循以下相同的结构：

if(FirstName !== "Cherry", "Micheal", "Sandra", "Cookie")

您不能针对以逗号分隔的值列表测试firstName 。 每一个都必须单独进行测试，并且您必须在它们之间使用复合逻辑运算符：

if(FirstName !== "Cherry" && FirstName !== "Micheal" &&
   FirstName !== "Sandra" && FirstName !== "Cookie")

您还使用了一个标准按钮，而不是一个提交按钮，在某些情况下，当您按下ENTER键时，这可能会导致所有验证都被绕过。 始终使用提交按钮并在submit事件中进行验证。

请参阅我经过重组和重新组织的代码解决方案以获取内联注释。

堆栈溢出代码段环境（如下）不适用于表单（因为它已被沙盒化），但是可以在此处运行相同的代码。

 // W3C DOM Event model instead of node event properties: window.addEventListener("DOMContentLoaded", function() { // Since we're now using the submit event, we hook into that event: // Use camelCase for JavaScript identifiers var form = getElem("cookieForm"); form.addEventListener("submit", validate); getElem("emailAddress").focus(); // Opening curly braces should appear on the same line as the declaration they open // Dollar signs are legal identifiers, but usually denote libraries (like JQuery) and // can be confusing if you are not using those libraries. function getElem (id) { return document.getElementById(id); } function validate(evt) { var inputs = document.querySelectorAll(".validate"); // It's better logic to assume false, which avoids "false positives" var isValid = false; // Loop through the fields that need validation for (var i = 0; i < inputs.length; ++i){ var message = ""; // This is the potential error message // Validate the input according to its id: switch (inputs[i].id) { case "firstName" : // You can't check a single value against a comma-separated list, you have to check // it against each value you are interested in: isValid = (inputs[i].value !== "Cherry" && inputs[i].value !== "Micheal" && inputs[i].value !== "Sandra" && inputs[i].value !== "Cookie") ? false : true; message = (!isValid) ? "This person does not exist." : ""; break; case "orderNumber" : // Remember, HTML form fields always return strings, not numbers isValid = (inputs[i].value !== "3134" && inputs[i].value !== "4234" && inputs[i].value !== "9234" && inputs[i].value !== "3566") ? false : true; message = (!isValid) ? "Invalid Order Number." : ""; break; case "dateOfOrder" : isValid = (inputs[i].value !=='12-07-23' && inputs[i].value !== '15-04-24' && inputs[i].value !== '16-02-01' && inputs[i].value !== '14-01-12') ? false : true; message = (!isValid) ? "Date doesn't exist in system" : ""; break; case "emailAddress" : isValid = (inputs[i].value != "cherryjackson@gmail.com" && inputs[i].value !== "michealroberts@yahoo.com" && inputs[i].value !== "sandrabell@hotmail.com" && inputs[i].value !== "cookiedanny@outlook.com") ? false : true; message = (!isValid) ? "The email doesn't exist" : ""; break; } // Update the UI with the correct message: inputs[i].nextElementSibling.textContent = message; } if(!isValid) { // cancel the submission if we're invalid evt.preventDefault(); // Cancel the form's submission evt.stopPropagation(); // Don't bubble the event } } });

 body{ background-color:#FBFBE8; } /* Tells HTML5 to find the font-type-face that my OS has and then use that for heading 1 and also centers the first heading */ h1{ font-family:Arial, Helvetica, sans-serif; text-align:center; } /* Tells HTML5 to use any of the font-types for my first paragraph in HTML source file if one is not available. Also clears some white space from the left margin of the paragraph and finally tells it to give that paragraph a size of 20 pixels. */ p { font-family:Arial, Helvetica, sans-serif; padding: 20px; font-size:20px; } label{ float: left; width: 11em; text-align: right; font-family:Arial, Helvetica, sans-serif; color:#800000; } input{ margin-left: 1em; margin-bottom:.5em; } span { color: red; } .field_set_1{ border-color: purple; border-style: solid; } #form_submission{ background-color:black; color:white; } legend{ font-family:Arial, Helvetica, sans-serif; color:blue; } /* All of the classes are just for positioning and floating the four same images around the form input information */ .Wrap1{ float:right; margin:40px; width:200px; height:200px; } .Wrap2{ float:left; margin:40px; width:200px; height:200px; } .clearfix { clear: both; }

 <form id="cookieForm" name="cookieForm" action="submit form.html" method="get"> <fieldset class="field_set_1"> <!-- Below sets the title of the form-->    <legend>Customer Order Form Information:</legend> <!-- Creates the first left label to specify what should be placed in the text box the the right of the label. The rest below does the same.--> <label for="firstName">First Name:</label> <input type="text" id="firstName" name="firstName" class="validate"> <span id="firstname_error">*</span><br> <label for="orderNumber">Order Number:</label> <input type="text" id="orderNumber" name="orderNumber" class="validate"> <span id="orderNumber_error">*</span><br> <label for="dateOfOrder">Date of Order:</label> <input type="text" id="dateOfOrder" name="dateOfOrder" class="validate"> <span id="dateOfOrder_error">*</span><br> <label for="emailAddress">Email Address:</label> <input type="text" id="emailAddress" name="emailAddress" class="validate"> <span id="emailAddress_error">*</span><br> <label>&nbsp;</label> <!-- Always use a "submit" button to initiate form submission, even if there will be form validation --> <input type="submit" id="form_submission" value="Submit this Form"> </fieldset> </form>

当我单击表单提交按钮时，为什么不进入下一页？

问题描述

1 个解决方案

解决方案1
2 2017-02-03 20:27:55

当我单击表单提交按钮时，为什么不进入下一页？

问题描述

1 个解决方案

解决方案1 2 2017-02-03 20:27:55

解决方案1
2 2017-02-03 20:27:55