Tag: form validation

Intorduction to JavaScript-From Validation

by shashank KUncategorizedLeave a Comment on Intorduction to JavaScript-From Validation

What is form validation?

when we got to any of popular site to register, we notice that they provide feedback when we didn’t fill the data or filled in correct format. we will get message such as:-

“This field is requied(when we leave the field blank).”

“Please enter your phone number in the format XXXXX”(When the data entered is not in correct format).

“Please enter the valid email address.”( when the email entered is not in correct format).

” Password needs to be between 8 to 20 character long and must contain one upper case letter, one symbol and a number.”( A very specific data format is required for the data).

This is called form validation.

OR

Before submitting the data to the server, it is important to ensure that all the fieds are correctly filled. This is called client side validation. It help us to ensure that the data entered matches the requirement. If the data entered is incorrect or simply missing, the server send the data back to the client requesting to resubmit the form with correct data.

There are two types or validation:-

  1. Client side validation:- When the validation is done on the browser is called client side validation.
  2. Server side validation:- when then the validation is done on server is called server side validation.

Three main reasons of validation:

  1. We want to get the right data, in the right format.
  2. We want to protect our users data.
  3. We want to protect ourselves.

Different types of client side varification:-

There are two types of validation:-

  1. built-in form validation:– It uses the HTML5 validation features. This validation generally doesn’t require much JavaScript. Built-in form validation has better performance than JavaScript, but it is not customizable as JavaScript validation.
  2. JavaScript:- JavaScript validation is coded using JavaScript. this is completely customizable, but we need to create it or use a library.

Form validation performs 2 functions:-

  1. Basic validation:- In this validation the is checked that all the mandatary fields must be filled.
  2. Data Format Validation:- In this validation it is checked that all the filled data must be of correct form and value.

Using built-in form validation

One of the most significant features of html5 is the ability to validate user data without relying on JavaScript. This is done by using the validation attributes on form elements. Some of the attributes are written below:

  1. required: It specifies that whether a form field needs to be filled in before submitting.
  2. minlength: Specifies minimum length of the data.
  3. maxlength: Specifies the max length of the data.
  4. pattern: Specifies a regular expression that defines the entered data need to be follow.

Tagged : /

Registration Form Validation Using Javascript

by abhishek kJavaScript / Websites1 Comment on Registration Form Validation Using Javascript

There are two methods for validating a form

  1. Using a keyword “validate” inside the input tag (<input type=”text” name=”userid” placeholder= “User-Id” size=”20″ required />).

This Will present output as:-

This will present error output as “! Please fill out the field”

Complete code for the above form is shared below :-

Presented output for the above operation :-

2. Using function call we need to define a function that will validate the field data and return corresponding errors.

We need to write the html code for input field in the form

<form><label><b> User-Id</b>  </label>   <input type=”text” name=”userid” placeholder= “User-Id” size=”20″ id=”userId” /> <p id=”error1″></p></form>

First we need to call the function on submit of form as (<form name=”myForm”  onsubmit=”return validateForm()” methord=”post”>) Then we need to define the function

This would produce output as

Complete code for the above function is shared below :-

Conclusion:- Validating a form in javascript is easy and is done with the function call and displays an error with respect to the type of input in the field.

Tagged : / / / / / /