在电子邮件字段中使用Javascript进行表单验证时出错
[英]Error in form validation using Javascript in email field
问题描述
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel = "stylesheet" type = "text/css" href = "form.css" /> <script> function validateForm() { var x = document.forms["myForm"]["email"].value; if (x == "") { alert("Name must be filled out"); return false; } } </script> </head> <body> <form name="myForm" onsubmit="return validateForm()" method="post"> <div class="container"> <h2><center>SignUp</center></h2> <div class="form-group"> <label><b>Email</b></label> <input type="text" class="form-control" placeholder="Enter Email" name="email"> </div> <div class="form-group"> <label><b>User Name</b></label> <input type="text" class="form-control" placeholder="Enter User Name" name="userid" required> </div> <div class="form-group"> <label><b>Password</b></label> <input type="password" class="form-control" placeholder="Enter Password" name="pwd" required> </div> <div class="form-group"> <label><b>Re-enter Password</b></label> <input type="password" class="form-control" placeholder="Re-Enter Password" name="pwd1" required> </div> <div class="form-group"> <label><b>Enter DOB</b></label> <input type="date" class="form-control" name="dob" required> </div> <input type="reset" class="cancelbtn" value="Reset"> <input type="submit" class="signupbtn" value="Submit"> </div> </form> </body> </html>
I have tried beginner level javascript validation to ensure that email field cannot be left blank.However on running the code, no validation is being performed for the email field. 
我已经尝试过初学者级javascript验证，以确保电子邮件字段不会留空。但是，在运行代码时，不会对电子邮件字段执行任何验证。 That is, no popup appears and directly the required attribute of userid gets displayed. 也就是说，没有弹出窗口出现，并且直接显示userid的必需属性。 Can anyone point out the errors in the code? 谁能指出代码中的错误？
4 个解决方案
解决方案1
0 2017-07-31 15:11:44
In the email input box, you don't have required condition mentioned, hence form will get submitted if you try to submit without entering any values. 在email输入框中，您没有提到required条件，因此，如果您尝试在不输入任何值的情况下提交表单，则表单将被提交。
If you don't want this, you need to add required . 如果您不希望这样做，则需要添加required 。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel = "stylesheet" type = "text/css" href = "form.css" /> <script> function validateForm() { var x = document.forms["myForm"]["email"].value; if (x == "") { alert("Name must be filled out"); return false; } } </script> </head> <body> <form name="myForm" onsubmit="return validateForm()" method="post"> <div class="container"> <h2><center>SignUp</center></h2> <div class="form-group"> <label><b>Email</b></label> <input type="text" class="form-control" placeholder="Enter Email" name="email" required> </div> <div class="form-group"> <label><b>User Name</b></label> <input type="text" class="form-control" placeholder="Enter User Name" name="userid" required> </div> <div class="form-group"> <label><b>Password</b></label> <input type="password" class="form-control" placeholder="Enter Password" name="pwd" required> </div> <div class="form-group"> <label><b>Re-enter Password</b></label> <input type="password" class="form-control" placeholder="Re-Enter Password" name="pwd1" required> </div> <div class="form-group"> <label><b>Enter DOB</b></label> <input type="date" class="form-control" name="dob" required> </div> <input type="reset" class="cancelbtn" value="Reset"> <input type="submit" class="signupbtn" value="Submit"> </div> </form> </body> </html>
解决方案2
0 2017-07-31 15:11:56
You have added the HTML5 validation on each field except the email field. 您已在除电子邮件字段之外的每个字段上添加了HTML5验证。
Look at here: 看这里：
placeholder="Enter User Name" name="userid" required>
^^^ this require attribute
So first your HTML5 validation will execute and after that your javascript will work. 因此，首先将执行HTML5验证，然后您的javascript将起作用。
required attribute is validation in HTML5 and most of browser support that. required属性是HTML5中的验证，大多数浏览器都支持。
To check your javascript, first fill the form except the email field and after that the alert will work. 要检查您的JavaScript，请先填写表格，除了电子邮件字段，然后警报将起作用。
解决方案3
0 已采纳 2017-07-31 15:40:15
The standard HTML5 validation is always performed before the form gets submitted. 始终在提交表单之前执行标准HTML5验证。 That means that if that validation fails, ie any of your required fields don't have a valid value, the submit event is never even triggered and your custom validation doesn't run at all. 这意味着，如果验证失败，即您的任何必填字段都没有有效值，则将永远不会触发submit事件，并且您的自定义验证根本不会运行。
This makes sense, because why would your custom validation need to run if the form isn't ready to be submitted to begin with? 这是有道理的，因为如果尚未准备好开始提交表单，为什么还要运行自定义验证？
In other words, there are no errors in your code, it behaves as expected . 换句话说， 您的代码中没有错误，它的行为符合预期 。
If you always want your custom validation to run, you need to remove the required attributes on all the other fields so that there's no standard validation and instead validate those fields in your custom validation. 如果您始终希望运行自定义验证，则需要删除所有其他字段上的required属性，以便没有标准验证，而是在自定义验证中验证这些字段。
解决方案4
0 2017-07-31 15:52:44
First of all, you should include you JS code at the end of the <body> section, not in the <head> . 首先，您应该在<body>部分的末尾而不是<head>包含您的JS代码。
Second, you should use jQuery to perform that just including the CDN resource link at the end of the body. 其次，您应该使用jQuery来执行该操作，仅在正文末尾包含CDN资源链接。 You can see here that is really simple: 您可以在这里看到非常简单的内容：
<html> <head> </head> <body> <form id="myForm" action="" method="POST"> Email <input type="text" id="email"> <button type="submit">Submit</button> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $('#myForm').on('submit', function(e) { e.preventDefault(); var email = $('#email').val(); if(email == '') alert('Fill the email'); else this.submit(); }); </script> </body> </html>
Or just adjust yours: 或者只是调整您的：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel = "stylesheet" type = "text/css" href = "form.css"> </head> <body> <form name="myForm" onsubmit="return validateForm()" method="post"> <div class="container"> <h2><center>SignUp</center></h2> <div class="form-group"> <label><b>Email</b></label> <input type="text" class="form-control" placeholder="Enter Email" name="email" id="email"> </div> <div class="form-group"> <label><b>User Name</b></label> <input type="text" class="form-control" placeholder="Enter User Name" name="userid" required> </div> <div class="form-group"> <label><b>Password</b></label> <input type="password" class="form-control" placeholder="Enter Password" name="pwd" required> </div> <div class="form-group"> <label><b>Re-enter Password</b></label> <input type="password" class="form-control" placeholder="Re-Enter Password" name="pwd1" required> </div> <div class="form-group"> <label><b>Enter DOB</b></label> <input type="date" class="form-control" name="dob" required> </div> <input type="reset" class="cancelbtn" value="Reset"> <input type="submit" class="signupbtn" value="Submit"> </div> <script> function validateForm() { document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); }); var x = document.getElementById('email').value; if (x == "") { alert("Name must be filled out"); return false; } } </script> </form> </body> </html>
Good Luck! 祝好运！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.