Bootstrap form validation using javascript

Hi, in the post ‘ Bootstrap form validation using javascript ‘ we are going to learn how to make a validated form on the bootstrap framework using javascript only without any validator js plugin.

To make the form and validate the form using the below code. here we are going to use only 3 fields the name, email and contact number thus we will test the length of character if there is the only character without any special character or number, a proper format of email and a proper format of contact number with 0 or + and country code and then 10 digit phone number.

Let us start Bootstrap form validation using javascript step by step

First, make an HTML page with installing bootstrap on it
Then make a bootstrap form with name, contact number, and email address field as input and give them proper id
Make a button or input field with type submit, on which click the form will be submitted
Call a javascript function on submit of the form with return
Write the validating script on the function
On blur of field call a function for validation of that particular field
Write each js function for each input field calling the function for validation.

Now the sample code for Bootstrap form validation using javascript

Example Code

Try it yourself



  Bootstrap Form Validation Example
  
  
  
       Bootstrap 3 form validation with field attached alert message
 
 
     Name  
  Email  
  Phone No

'; if (name.length < 2 || !/^[A-Za-z\s]+$/.test(name)) { var message = message_init + 'Name lenth must be greter then 2 and only character' + message_ends; $('#id_name').focus(); if($('input#id_name + div.alert.alert-danger').length == 0) { $('#id_name').after(message); } return false; }else{ $('input#id_name + div.alert.alert-danger').remove(); } if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) { var message = message_init + 'Please enter an email with proper formet' + message_ends; $('#id_email').focus(); if($('input#id_email + div.alert.alert-danger').length == 0) { $('#id_email').after(message); } return false; }else{ $('input#id_email + div.alert.alert-danger').remove(); } if (!/^\+?([0]{1})\)?([0-9]{9,10})$/.test(phone_no) && !/^\+?([91]{2})\)?([0-9]{9,10})$/.test(phone_no) ) { var message = message_init + 'Please fill your proper phno with +91 Or 0' + message_ends; $('#id_phone_no').focus(); if($('input#id_phone_no + div.alert.alert-danger').length == 0) { $('#id_phone_no').after(message); } return false; }else{ $('input#id_phone_no + div.alert.alert-danger').remove(); } return true; } function validate_name(){ var name = $('#id_name').val(); if (name.length < 2 || !/^[A-Za-z\s]+$/.test(name)) { var message = '

×Name lenth must be greter then 2 and only character

'; $('#id_name').focus(); if($('input#id_name + div.alert.alert-danger').length == 0) { $('#id_name').after(message); } }else{ $('input#id_name + div.alert.alert-danger').remove(); } } function validate_email(){ var email = $('#id_email').val(); if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) { var message = '

×Please enter an email with proper formet

'; $('#id_email').focus(); if($('input#id_email + div.alert.alert-danger').length == 0) { $('#id_email').after(message); } }else{ $('input#id_email + div.alert.alert-danger').remove(); } } function validate_phone(){ var phone_no = $('#id_phone_no').val(); if (!/^\+?([0]{1})\)?([0-9]{9,10})$/.test(phone_no) && !/^\+?([91]{2})\)?([0-9]{9,10})$/.test(phone_no) ) { var message = '

×Please fill your proper phno with +91 Or 0

'; $('#id_phone_no').focus(); if($('input#id_phone_no + div.alert.alert-danger').length == 0) { $('#id_phone_no').after(message); } }else{ $('input#id_phone_no + div.alert.alert-danger').remove(); } }

In this post we have done Bootstrap form validation using javascript, I hope that you have enjoyed

Thanks for Reading

Bootstrap form validation using javascript

Let us start Bootstrap form validation using javascript step by step

First, make an HTML page with installing bootstrap on it

Then make a bootstrap form with name, contact number, and email address field as input and give them proper id

Make a button or input field with type submit, on which click the form will be submitted

Call a javascript function on submit of the form with return

Write the validating script on the function

On blur of field call a function for validation of that particular field

Write each js function for each input field calling the function for validation.

Bootstrap 3 form validation with field attached alert message

Share The Post On -

Ads Blocker Detected!!!