简单表单验证不起作用
[英]simple form validation not working
问题描述
Trying to loop through all the fields, and have the errors written above the form, autofocus, and background color changed to red ... 
尝试遍历所有字段，并将表格，自动对焦和背景颜色上方的错误更改为红色...
Form doesn't work. 表格无效。
Why? 为什么？
Bonus points: would really also appreciate if you could explain how to name the fields individually in the errorMessages ... 优点：如果您能解释如何在errorMessages单独命名字段，我也将不胜感激...
Code: 码：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function validateMe(){
document.getElementById("button1").addEventListener("click",validateForm);
function validateForm(){
//alert("Wheeeeee!");
var formy = document.getElementById("testy");
for (var i = 0; i < formy.length; i++) {
if (formy[i].value == "") {
document.getElementById("errorMessages").innerHTML = "Please don't leave blank"
document.form["testy"].focus();
formy[i].style.backgroundColor = "red";
return false;
}
else {
formy[i].style.backgroundColor = "#fff"
}
return true;
}
}
}
window.addEventListener("load",validateMe);
</script>
</head>
<body>
<form name="" id="testy" action="" onsubmit="return validateMe">
<p id="errorMessages"></p>
First Name: <input type="input" name="first_name" id="first_name" />
<br /><br />
Last Name: <input type="input" name="last_name" id="last_name" />
<br /><br />
Email Address: <input type="input" name="email" id="email" />
<br /><br />
<input type="submit" value="Validate" id="button1" />
</form>
</body>
</html>
EDIT 编辑
Avoiding jQuery and HTML5 attributes validation since I'm trying to learn the nitty gritty of JS. 避免jQuery和HTML5属性验证，因为我试图学习JS的精髓。
3 个解决方案
解决方案1
1 已采纳 2017-09-14 03:16:50
Here is the code with javascript validation. 这是带有javascript验证的代码。 I would like to point out few things. 我想指出几件事。 First you added return in the for loop so that will only check first element. 首先，您在for循环中添加了return，以便仅检查第一个元素。 Because either your condition is true or false it will always stops execution of it's next iteration and will get returned back. 因为您的条件为真或假，它将始终停止执行下一个迭代，并将其返回。 Also you can use array for adding error messages with for different elements. 您也可以使用数组为不同元素添加错误消息。
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form name="" id="testy" action="" >
<p id="errorMessages"></p>
First Name: <input class='form-item' type="input" name="first_name" id="first_name" />
<br /><br />
Last Name: <input class='form-item' type="input" name="last_name" id="last_name" />
<br /><br />
Email Address: <input class='form-item' type="input" name="email" id="email" />
<br /><br />
<input type="submit" value="Validate" id="button1" />
</form>
<script>
var form = document.getElementById("testy");
form.addEventListener("submit", function (e) {
e.preventDefault();
var error = [];
for (var i = 0; i < form.length; i++) {
if (form[i].value == "") {
//document.getElementById("errorMessages").innerHTML += "Please don't leave blank<br/>";
error.push("Please don't leave "+form[i].name+" blank<br/>");
form[i].focus();
form[i].style.backgroundColor = "red";
}
else {
form[i].style.backgroundColor = "#fff"
}
}
if(error.length){
document.getElementById("errorMessages").innerHTML = "<ul>";
for(var i=0; i<error.length;i++){
document.getElementById("errorMessages").innerHTML += "<li>"+error[i]+"</li>";
}
document.getElementById("errorMessages").innerHTML += "</ul>";
}else{
form.submit();
}
});
var obj = document.getElementsByClassName("form-item");
for (var i = 0; i < obj.length; ++i) {
var item = obj[i];
item.onfocus = function(){
this.style.backgroundColor = "#fff";
}
}
</script>
</body>
</html>
解决方案2
0 2017-09-14 02:16:43
Try this code for your form validation; 尝试使用此代码进行表单验证；
HTML Form HTML表格
<form name="" id="testy" action="">
<p id="errorMessages"></p>
First Name: <input type="input" name="first_name" id="first_name" />
<br /><br />
Last Name: <input type="input" name="last_name" id="last_name" />
<br /><br />
Email Address: <input type="input" name="email" id="email" />
<br /><br />
<input type="submit" value="Validate" id="button1" />
</form>
JQuery Script jQuery脚本
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
// When the browser is ready...
jQuery(function($){
// Setup form validation on the #register-form element
$("#testy").validate({
// Specify the validation rules
rules: {
first_name: { required: true },
last_name: { required: true },
email: {
required: true,
email: true
},
},
// Specify the validation error messages
messages: {
first_name: "Please enter your first name.",
last_name: "Please enter your last name.",
//txtPhone: "Please Enter your Phone No",
email: {
required: "Please enter your email.",
email: "Please enter valid email id"
}
},
submitHandler: function(form) {
form.formName();
}
});
});
</script>
It is jQuery validation plugin for form validation. 这是用于表单验证的jQuery验证插件。 ( https://jqueryvalidation.org/documentation/ ) （ https://jqueryvalidation.org/documentation/ ）
解决方案3
0 2017-09-14 03:28:19
document.getElementById("button1").addEventListener("click",validateForm); 。的document.getElementById（ “Button1的”）的addEventListener（ “点击”，validateForm）; No need of this line as in form you write onsubmit="return validateForm". 不需要此行，就像您在形式上写onsubmit =“ return validateForm”一样。 Also onsubmit and onclick are different. onsubmit和onclick也不同。
document.form["testy"].focus(); document.form [ “暴躁”]聚焦（）; is generating an exception and your code does not reach till the statement "return false". 正在生成异常，直到语句“ return false”，您的代码才能到达。 Replace with document.getElementById("testy").elements[i].focus(); 替换为document.getElementById（“ testy”）。elements [i] .focus（）; Also you can add some time delay. 您也可以添加一些时间延迟。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.