How To Display Error Message In Html Form With Javascript Without Using Alert? Tweet

Using javascript validation is one of the most appealing part in web development where you can display errors messages to users in case a form doesn't contain required field data. Let's add a form first before working on the validation part.

<form name="myForm" method="post" onsubmit="return validateForm()">
	<div class="form-group">
		<label>Your Name</label> <span id="error-name"></span>
		<input type="text" name="your-name" class="form-control" placeholder="Enter your Name">
	</div>
	<div class="form-group"> 
		<label>Your Email</label> <span id="error-email"></span>
		<input type="email" name="your-email" class="form-control" placeholder="Enter your Email">
	</div>
	<div class="form-group">
		<label>Your Phone</label> <span id="error-phone"></span>
		<input type="text" name="your-phone" class="form-control" placeholder="Enter your Phone">
	</div>
	<div class="form-group">
		<label>Your Message</label> <span id="error-message"></span>
		<textarea name="your-message" class="form-control" rows="10" placeholder="Enter your Message"></textarea>
	</div>
	<div class="form-group">
		<input type="submit" value="Send">
	</div>
</form>

Here, we created a form adding a name to it with post method which prevents the form from being sent via url and added a javascript function to be initialized on the event of form submission. We also added an empty id beside the labels for each form field where we'll display the error message. Now, let's add the function to validate it.

<script>
function validateForm(){
	var name = document.forms["myForm"]["your-name"].value;
	var email = document.forms["myForm"]["your-email"].value;
	var phone = document.forms["myForm"]["your-phone"].value;
	var message = document.forms["myForm"]["your-message"].value;

	if (name.length<1) {
        document.getElementById('error-name').innerHTML = " Please Enter Your Name *"
    }
    if (email.length<1) {
        document.getElementById('error-email').innerHTML = " Please Enter Your Email *";
    }
    if (phone.length<1) {
        document.getElementById('error-phone').innerHTML = " Please Enter Your Phone *";      
    }
    if (message.length<1) {
        document.getElementById('error-message').innerHTML = " Please Enter Your Message *";
    }          
    if(name.length<1 || email.length<1 || phone.length<1 || message.length<1){
       	return false;
    }            
}
</script>

Inside the function validateForm() which is programmed to initialize on form submission, we created individual variable to store input values from each of the form fields. Then, we checked the string length of each of the values. If any of those formfield values have no texts inside it, then, their respective error ids will display the defined texts inside it with the javascript pre-built function getElementByID(). To prevent the form from being submitted in case of any error, we added a huge combination of OR statement to return the user back to the same page without further processing fo data at the end.

I've done a detailed video tutorial on javascript form validation which is on my youtube channel webtrickshome if you are interested to learn more.