JavaScript: HTML Form - checking for non empty field

Checking non empty field

Often, situations arise when a user should fill a single or more than one field in an 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.

The following function can be used to check whether the user has entered anything in a given field. Blank fields indicate two kinds 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)
         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 otherwise true. Here is the complete web document.


Flowchart: JavaScript - checking for non empty field


<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>JavaScript form validation - checking non-empty</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
<div class="mail">
<h2>Input your Name and Submit</h2>
<form name="form1" action="#" onsubmit="required()">
<li><input type='text' name ='text1'/></li>
<li class="rq">*Required Field</li>
<li><input type="submit" name="submit" value="Submit" /></li>
<script src="non-empty.js"></script>

JavaScript Code

function required()
var empt = document.forms["form1"]["text1"].value;
if (empt == "")
alert("Please input a Value");
return false;
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

See the Pen non-empty-field-1 by w3resource (@w3resource) on CodePen.

Another function to check whether a field is empty

function Emptyvalidation(inputtxt)
 if (inputtxt.value.length == 0) 
 document.inputtxt.style.background =   'Yellow'; 
 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.


Flowchart : JavaScript - checking non empty field

file_download Download the validation code from here.

Other JavaScript Validation :

Previous: JavaScript: HTML Form Validation
Next: JavaScript: HTML Form validation - checking for all letters

JavaScript: Tips of the Day

JavaScript: function and arguments

const person = {
  name: 'Lydia Hallie',
  hobbies: ['coding'],

function addHobby(hobby, hobbies = person.hobbies) {
  return hobbies;

addHobby('running', []);
addHobby('baking', person.hobbies);


The addHobby function receives two arguments, hobby and hobbies with the default value of the hobbies array on the person object.
First, we invoke the addHobby function, and pass "running" as the value for hobby and an empty array as the value for hobbies. Since we pass an empty array as the value for y, "running" gets added to this empty array.
Then, we invoke the addHobby function, and pass "dancing" as the value for hobby. We didn't pass a value for hobbies, so it gets the default value, the hobbies property on the person object. We push the hobby dancing to the person.hobbies array.
Last, we invoke the addHobby function, and pass "bdaking" as the value for hobby, and the person.hobbies array as the value for hobbies. We push the hobby baking to the person.hobbies array.
After pushing dancing and baking, the value of person.hobbies is ["coding", "dancing", "baking"]

Ref: https://bit.ly/2Hcpkm6