JavaScript : HTML Form - checking for non empty field
has average rating
7
out of 10.
Total 84 users rated.
Description
Often, situations arise when an user should fill a single or more than one fields in a HTML form before they submit it. You can write a JavaScript form validation script to check whether the required field(s) in the HTML form is blank or not.
Watch JavaScript form validation video tutorial.
The following function can be used to check whether user has entered anything in a given field. Blank fields indicate two kind of values. A zero length string or a NULL value.
Javascript function to check whether a field is empty or not
// If the length of the element's string is 0 then display helper message
function required(inputtx)
{
if (inputtx.value.length == 0)
{
alert("message");
return false;
}
return true;
}
At first the function required() will accept the HTML input value through inputtx parameter. After that length property of string object is used to get the length of the said parameter. If the length of value.inputtx is 0 then it returns false other wise true. Here is the complete web document.
HTML Code
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript form validation - checking non-empty</title> <link rel='stylesheet' href='form-style.css' type='text/css' /> </head> <body> <div class="mail"> <h2>Input your Name and Submit</h2> <form name="form1" action="#" onsubmit="required()"> <ul> <li><input type='text' name ='text1'/></li> <li class="rq">*Required Field</li> <li><input type="submit" name="submit" value="Submit" /></li> </ul> </form> </div> <script src="non-empty.js"></script> </body> </html>
JavaScript Code
function required()
{
var empt = document.forms["form1"]["text1"].value;
if (empt == "")
{
alert("Please input a Value");
return false;
}
else
{
alert('Code has accepted : you can try another');
return true;
}
}
CSS Code
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;
}
View the example in the browser
Practice the example online
JavaScript form validation - checking non-empty
Another function to check whether a field is empty
function Emptyvalidation(inputtxt)
{
if (inputtxt.value.length == 0)
{
document.inputtxt.style.background = 'Yellow';
}
else
{
document.inputtxt.style.background = 'White';
}
return error;
}
In the above function background color of the input field will be yellow if the user input a blank field otherwise the background color will be white.
