Javascript 在 Java Script 中显示没有警告框的错误消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14702190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
To show error message without alert box in Java Script
提问by user2042156
Please correct the below code it is not working as expected i.e, i need a error message to be shown just beside the textfield in the form when user enters an invalid name
请更正以下代码，它没有按预期工作，即，当用户输入无效名称时，我需要在表单中的文本字段旁边显示一条错误消息
<html>
<head>
<script type="text/javascript">
function validate() {
if(myform.fname.value.length==0)
{
document.getElementById("fname").innerHTML="this is invalid name ";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
回答by ?т?
Try this code
试试这个代码
<html>
<head>
<script type="text/javascript">
function validate() {
if(myform.fname.value.length==0)
{
document.getElementById('errfn').innerHTML="this is invalid name";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input><div id="errfn"> </div>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
回答by Devang Rathod
I m agree with @ReNjITh.Ranswer but If you want to display error message just beside textbox. Just like below
我同意@ReNjITh.R 的回答，但如果您想在文本框旁边显示错误消息。就像下面一样
<html>
<head>
<script type="text/javascript">
function validate()
{
if(myform.fname.value.length==0)
{
document.getElementById('errfn').innerHTML="this is invalid name";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()" /><span id="errfn"></span>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"/><br>
<input type=button value=check />
</form>
</body>
回答by Fredrick Gauss
web masters or web programmers, please insert
网络管理员或网络程序员，请插入
<!DOCTYPE html>
at the start of your page. Second you should enclose your attributes with quotes like
在页面的开头。其次，您应该用引号将您的属性括起来，例如
type="text" id="fname"
inputelement should not contain end element, just close it like:
输入元素不应包含结束元素，只需将其关闭，例如：
/>
input element dont have innerHTML, it has valuesor your javascript line should be:
输入元素没有innerHTML，它有valuesor你的javascript行应该是：
document.getElementById("fname").value = "this is invalid name";
Please write in organized way and make sure it is convenient to standards.
请以有条理的方式书写，并确保它便于标准。
回答by SHUNMUGA RAJ PRABAKARAN
you can try it like this
你可以这样试试
<html>
<head>
<script type="text/javascript">
function validate()
{
var fnameval=document.getElementById("fname").value;
var fnamelen=Number(fnameval.length);
if(fnamelen==0)
{
document.getElementById("fname_msg").innerHTML="this is invalid name ";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input>
<span id=fname_msg></span>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
回答by Thiyagu
You can also try this
你也可以试试这个
<tr>
<th>Name :</th>
<td><input type="text" name="name" id="name" placeholder="Enter Your Name"><div id="name_error"></div></td>
</tr>
function register_validate()
{
var name = document.getElementById('name').value;
submit = true;
if(name == '')
{
document.getElementById('name_error').innerHTML = "Name Is Required";
return false;
}
return submit;
}
document.getElementById('name').onkeyup = removewarning;
function removewarning()
{
document.getElementById(this.id +'_error').innerHTML = "";
}
回答by Amadi
You should place your script code after your HTML code and within your body tags. That way it doesn't run before the html code.
您应该将脚本代码放在 HTML 代码之后和 body 标签内。这样它就不会在 html 代码之前运行。
回答by marbor3
Setting innerHtml of input value wont do anything good here, try with other element like span, or just display previously made and hidden error message. You can set value of name field tho.
设置输入值的innerHtml在这里不会有任何好处，尝试使用其他元素，如span，或者只显示以前制作和隐藏的错误消息。您可以设置名称字段的值。
<head>
<script type="text/javascript">
function validate() {
if (myform.fname.value.length == 0) {
document.getElementById("fname").value = "this is invalid name ";
document.getElementById("errorMessage").style.display = "block";
}
}
</script>
</head>
<body>
<form name="myform">First_Name
<input type="text" id="fname" name="fname" onblur="validate()"></input> <span id="errorMessage" style="display:none;">name field must not be empty</span>
<br>
<br>Last_Name
<input type="text" id="lname" name="lname" onblur="validate()"></input>
<br>
<input type="button" value="check" />
</form>
</body>
回答by ElPedro
First you are trying to write to the innerHTML of the input field. This will not work. You need to have a div or span to write to. Try something like:
首先，您尝试写入输入字段的innerHTML。这是行不通的。您需要有一个 div 或 span 来写入。尝试类似：
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input>
<div id="fname_error"></div>
Then change your validate function to read
然后将您的验证功能更改为读取
if(myform.fname.value.length==0)
{
document.getElementById("fname_error").innerHTML="this is invalid name ";
}
Second, I'm always hesitant about using onBlur for this kind of thing. It is possible to submit a form without exiting the field (e.g. return key) in which case your validation code will not be executed. I prefer to run the validation from the button that submits the form and then call the submit() from within the function only if the document has passed validation.
其次，我总是对使用 onBlur 做这种事情犹豫不决。可以在不退出字段（例如返回键）的情况下提交表单，在这种情况下，您的验证代码将不会被执行。我更喜欢从提交表单的按钮运行验证，然后仅当文档通过验证时才从函数内部调用 submit()。
回答by codeguerrilla
Try like this:
像这样尝试：
function validate(el, status){
var targetVal = document.getElementById(el).value;
var statusEl = document.getElementById(status);
if(targetVal.length > 0){
statusEl.innerHTML = '';
}
else{
statusEL.innerHTML = "Invalid Name";
}
}
Now HTML:
现在 HTML：
<!doctype html>
<html lang='en'>
<head>
<title>Derp...</title>
</head>
<body>
<form name="myform">
First_Name
<input type="text" id="fname" name="fname" onblur="validate('fname','fnameStatus')">
<br />
<span id="fnameStatus"></span>
<br />
Last_Name
<input type="text" id="lname" name="lname" onblur="validate('lname','lnameStatus')">
<br />
<span id="lnameStatus"></span>
<br />
<input type=button value=check>
</form>
</body>
</html>
回答by Techmonk
You should use .value and not .innerHTML as it is a input type form element
你应该使用 .value 而不是 .innerHTML 因为它是一个输入类型的表单元素
<html>
<head>
<script type="text/javascript">
function validate() {
if(myform.fname.value.length==0)
{
document.getElementById("fname").value="this is invalid name ";
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type=text id=fname name=fname onblur="validate()"> </input>
<br> <br>
Last_Name
<input type=text id=lname name=lname onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
