Registration Form with JavaScript Validation (Free Code)

Currently, almost all registration forms use JavaScript validation. So in this tutorial, I have shown you how to create JavaScript Registration Form Validation.

Earlier I shared tutorials on creating different types of registration forms and login forms. All those designs were made by HTML and CSS only. But here I have used some JavaScript to make this registration form fully functional.

Basically, some conditions have been added here for your input. According to those conditions, you have to input in the information input box.

Here an error message has been added to each input box. If you input something incorrectly then enter this registration form. Then this error message can be seen.

Registration Form with Validation

Here I have shared a complete step-by-step tutorial and provided complete source code for your work. You can create this JavaScript form validation by copying the code directly if you want.

What I am saying is if you have difficulty understanding then you can follow the demo section below.

See the Pen Untitled by Shantanu Jana (@shantanu-jana) on CodePen.

As you can see, this is a simple registration form with five input boxes and one button. First I created a box on the web page. 

A shadow has been used around this box and the background color has been white. First of all, there is a heading which is basically for beauty. Then there are the five input boxes.

Since this is a registration form many types of input have been used here. Although you can create many more types of input boxes here if you want.

How to Create Registration Form with Validation

If you just want to create a registration form then you can see my other tutorials. Let's see how Registration Form with JavaScript Validation can be created. 

First I gave a step-by-step tutorial for beginners. Then I gave the button to download the source code.

Step 1: Basic structure of registration form

I have created the basic structure of this registration form using the following HTML and CSS codes. Basically created an area in which all the information can be found. Box width: 450px and white background used.

<div class="container">

  <form name="custom_form" id="customForm" onsubmit="return FormValidation()" action="valid.html">

    <div class="form_box">

 

    </div>

  </form>

</div>

*,*:after,*:before{

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

}

body{

font-family: arial;

font-size: 16px;

margin: 0;

background: #068abc;

color: #000;

display: flex;

min-height: 100vh;

justify-content: space-around;

align-items: center;

}

.form_box{

width: 450px;

background:#ffffff;

padding: 30px;

border-radius: 7px;

box-shadow: 0 0 20px rgba(0,0,0,0.2);

}

Step 2: Add headings to the form

Now a heading has been added here. The h1 tag has been used for this heading in JavaScript form validation.

<h1>Registration Form</h1>

h1{

  text-align: center;

  margin-top: 0;

  margin-bottom: 50px;

}

Step 3: Input box of Form Validation

Now all the input boxes have been created. Here an error message has been added along with the input boxes. However, these error messages will not be able to be viewed as normal because display: none has been used.

<div class="input-row">

  <input type="text" name="name" placeholder="Name*">

  <span class="error">Please Enter Your Name</span>

</div>

<div class="input-row">

  <input type="text" name="email" placeholder="Email*">

  <span class="error">Please Enter Your Email</span>

</div>

<div class="input-row">

  <input type="text" name="phone" placeholder="Phone*">

  <span class="error">Please Enter Your Phone</span>

</div>

<div class="input-row">

  <select name="subject">

    <option value="">Subject*</option>

    <option value="Design">Web Designer</option>

    <option value="Develpment">Frontend Developer</option>

    <option value="Marketing">Backend Developer</option>

  </select>

  <span class="error">Please Enter Your Subject</span>

</div>

<div class="input-row">

  <input placeholder="Message*" name="message">

  <span class="error">Please Enter Your Message</span>

</div>

.input-row{margin-bottom: 13px; position: relative;}

.form_box input:not([type="submit"]),

.form_box textarea,

.form_box select{

font-family: arial;

width: 100%;

margin: 0 0 3px;

padding: 13px 15px;

font-size: 20px;

color: #000;

border-radius: 5px;

background: #d3d1d1;

border: 1px solid transparent

}

*::-webkit-input-placeholder {

opacity: 1;

color: inherit;

}

.form_box textarea{ height: 100px; resize: none; }

.error{

font-weight: 700;

font-size: 14px;

color: red;

display: none;

}

Step 4: Submit button for JavaScript Form Validation

Now I have created the submit button. This button was created using input. Button size depends on padding: 10px 50px and blue color is used in the background.

<input type="submit" value="Submit" name="">

.form_box input[type="submit"]{

padding: 10px 50px;

font-size: 20px;

cursor: pointer;

border-radius: 5px;

border:0;

color: #fff ;

background: #00668d;

margin: 0 auto;

display: block;

}

.form_box input[type="submit"]:hover{ background: #000; }

Step 5: Activate the validation of the registration form

The registration form with validation has been designed above. Now it's time to activate it via JavaScript.

function FormValidation(){

//alert("Alert")

var name=document.custom_form.name;

var email=document.custom_form.email;

var phone=document.custom_form.phone;

var subject=document.custom_form.subject;

var message=document.custom_form.message;

var conditions=document.custom_form.conditions;

//Name validation

if (name.value == "") {

   name.nextElementSibling.style.display = "block";

   name.style.border = "1px solid #f00";

   return false

}else{

  name.nextElementSibling.style.display = "none";

  name.style.border = "1px solid transparent";

}

//email validation

if (!email.value.match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/) || email.value == "") {

   email.nextElementSibling.style.display = "block";

   email.style.border = "1px solid #f00";

   return false

}else{

  email.nextElementSibling.style.display = "none";

  email.style.border = "1px solid transparent";

}

//phone no validation

if (!phone.value.match( /^\(?([5-9]{1})\)?([0-9]{9})$/) || phone.value == "") {

   phone.nextElementSibling.style.display = "block";

   phone.style.border = "1px solid #f00";

   return false

}else{

  phone.nextElementSibling.style.display = "none";

  phone.style.border = "1px solid transparent";

}

//subject select box validation

if (subject.value == "") {

   subject.nextElementSibling.style.display = "block";

   subject.style.border = "1px solid #f00";

   return false

}else{

  subject.nextElementSibling.style.display = "none";

  subject.style.border = "1px solid transparent";

}

//message validation

if (message.value == "") {

   message.nextElementSibling.style.display = "block";

   message.style.border = "1px solid #f00";

   return false

}else{

  message.nextElementSibling.style.display = "none";

  message.style.border = "1px solid transparent";

}

}

Hopefully, you have been able to create this Registration Form with JavaScript Validation using the above codes. If there is any problem then you can definitely let me know by commenting.

The download will start automatically