Submit and Validate HTML Form Using JavaScript

This is a basic JavaScript lesson on how to submit an HTML form using JavaScript. I’m generating an HTML form and using JavaScript to validate the data. Once the data is successfully validated, we’ll submit the form to the server side to update a database or send an email, among other things.

I’m not utilizing any frameworks, such as jQuery to validate and submit forms or Bootstrap for CSS or third-party libs for validation. To build user id input, first name, last name, etc., I’m utilizing straightforward HTML components.

We will create the following files in this tutorial,

• index.html : This file will contain HTML form.
• styles.css : This file will contain all css styles classes.
• common.js : This file will contain all JavaScript code to validate and submit the form.

Create HTML Sign Up form

To create a form, we will insert the following code into the index.html file. The fields needed to register a user are all on this form.

<script type="text/javascript" src="common.js"></script></pre>
<form class="modal-content" name="registration">
<div class="container">
<h1>Sign Up form using Javascript</h1>
<label for="userid"><b> User Id:</b></label> <input name="userid" size="12" type="text" placeholder="Enter  your desired user ID">
<div id="status" class="status">&nbsp;</div>
<label for="fname"><b>First name:</b></label> <input name="fname" type="text" placeholder="Enter  First name"> <label for="lname"><b>Last name:</b></label> <input name="lname" type="text" placeholder="Enter  Last name"> <label for="email"><b>Email</b></label> <input class="form-control" name="email" type="text" placeholder="Enter Email">
<div class="help-block with-errors">&nbsp;</div>
<label for="password"><b>Password</b></label> <input name="password" size="12" type="password" placeholder="Enter Password"> <label for="phone"><b>Phone number</b></label> <input name="phone" size="12" type="number" placeholder="Enter Phone number">
<div class="clearfix"><button class="signupbtn" type="submit">Sign Up</button></div>
</div>
</form>

Add Styling into Signup Form

We will add some css classes to add styling to the above HTML form, css help to create beautiful user interface and enhance user experience.We will add below code into style.css file.

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box}
 
input[type=text], input[type=password], input[type=number] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}
 
 
input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}
 
/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}
 
button:hover {
    opacity:1;
}
 
 
.container {
    padding: 16px;
}
 
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto;
    border: 1px solid #888;
    width: 50%;
}
 
hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}

@media screen and (max-width: 300px) {
    .cancelbtn, .signupbtn {
       width: 100%;
    }
}

Validating and Submit HTML form Using JavaScript

The code below will be inserted into the common.js file to validate all input items and notify the user of any errors. We will also create a method to submit the form once the data has been correctly validated.

function validateForm() {
	var uname = document.registration.userid;
	var fname = document.registration.fname;
	var uid = document.registration.userid;
	var phone = document.registration.phone;
	var email = document.registration.email;
	var lname = document.registration.lname;
	var passid = document.registration.password;

	var uid_len = uid.value.length;
	var check_letter_regex = /^[A-Za-z]+$/;
	var numbers = /^[0-9]+$/;
	var emails_fmt =  /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

	if (uid_len == 0 || uid_len >= 5 || uid_len < 12)
	{
		alert("User Id should not be empty / length be between "+5+" to "+12);
		uid.focus();
		return false;
	} else if(!(uname.value.match(check_letter_regex))) {
    	alert('first name must have alphabet characters only and it should not be empty.');
    	uname.focus();
	} else if(!(phone.value.match(numbers))) {
    	alert('phone number must have number.');
    	phone.focus();
	} else if(!(email.value.match(emails_fmt))) {
		alert('Please enter a valid email');
		email.focus();
		return false;
	} else {
		alert('Successfully! form ha been submitted.');
	}

}
function submitForm() {
	console.log('Successfully! form ha been submitted.');
}