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

  1. First, make an HTML page with installing bootstrap on it

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

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

  4. Call a javascript function on submit of the form with return

  5. Write the validating script on the function

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

  7. 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


  Bootstrap Form Validation Example
  
  
  
   

Bootstrap 3 form validation with field attached alert message

'; 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

Share The Post On -

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.