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>
This question is related to
javascript
html
The answer is
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:
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.
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"
input element should not contain end element, just close it like:
/>
input element dont have innerHTML, it has value sor your javascript line should be:
document.getElementById("fname").value = "this is invalid name";
Please write in organized way and make sure it is convenient to standards.
I m agree with @ReNjITh.R answer but If you want to display error message just beside textbox. Just like below
<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>
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.
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 = "";
}
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>
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>
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:
<!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>
You should use .value and not .innerHTML as it is a input type form element
<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>
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.
<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>
try this
<html>
<head>
<script type="text/javascript">
function validate() {
if(myform.fname.value.length==0)
{
document.getElementById("error").innerHTML="this is invalid name ";
document.myform.fname.value="";
document.myform.fname.focus();
}
}
</script>
</head>
<body>
<form name="myform">
First_Name
<input type="text" id="fname" name="fname" onblur="validate()"> </input>
<span style="color:red;" id="error" > </span>
<br> <br>
Last_Name
<input type="text" id="lname" name="lname" onblur="validate()"> </input>
<br>
<input type=button value=check>
</form>
</body>
</html>
Source: Stackoverflow.com