错误消息在简单的JavaScript表单验证中不起作用
[英]Error message not working in simple javascript form validation
问题描述
Here is the following code which is not working to show error message when submitted. 
以下是以下代码，在提交时无法显示错误消息。
The problem is that the error message is not displayed properly when clicked once but if you give multiple clicks it works. 问题是单击该错误消息一次后无法正确显示，但是如果您单击多次，该消息将起作用。
Help will be appreciated. 帮助将不胜感激。
Thanks 谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JavaScript form validation - checking all letters</title>
<style type="text/css">
li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}
</style>
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Enter your Name and Submit</h2>
<form name="form1" action="#">
<ul>
<li>
Code:
</li>
<li id="myList">
<input type='text' name='text1'/>
<p id="error"></p>
</li>
<li class="rq">
*Enter alphabets only.
</li>
<li> </li>
<li>
<input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1)" />
</li>
<li> </li>
</ul>
</form>
</div>
<script type="text/javascript">
function allLetter(inputtxt) {
var letters = /^[A-Za-z]+$/;
if(inputtxt.value.match(letters)) {
document.getElementById("error").innerHTML="error here";
return false;
} else {
document.getElementById("error").innerHTML="success";
return true;
}
}
</script>
</body>
</html>
2 个解决方案
解决方案1
0 已采纳 2017-07-18 13:04:42
Your problem and solution is quite simple. 您的问题和解决方案非常简单。
When you click the form button, the form automatically submits itself and that's why you see nothing. 当您单击表单按钮时，表单会自动提交自己，这就是为什么您什么都看不到的原因。 Add this to your button code so you can prevent the default functionality of the submit input : 将此添加到您的按钮代码中，以便可以防止提交输入的默认功能 ：
<input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1);return false" />
That should solve it: 那应该解决它：
解决方案2
0 2017-07-18 13:14:09
You should to use event.preventDefault method to prevent the page refresh. 您应该使用event.preventDefault方法来防止页面刷新。 So, your function should look like this: 因此，您的函数应如下所示：
function allLetter(event) {
event.preventDefault();
var letters = /^[A-Za-z]+$/;
if (document.form1.text1.value.match(letters)) {
document.getElementById("error").innerHTML="error here";
//return false;
} else {
document.getElementById("error").innerHTML="success";
return true;
}
}
It should be called in the following way: <input type="submit" name="submit" value="Submit" onclick="allLetter(event)" /> 应该以以下方式调用： <input type="submit" name="submit" value="Submit" onclick="allLetter(event)" />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.