Client Side Live Form Validation using JavaScript

0
661

Download Source Code

Introduction

When we are worked with the input Form than it is more important for validation of all of the data. There are two type of validation are exists is that Server Side Validation and Client Side Validation. Client-side validation is often much faster and provides the user with a very good experience. Validating form data from the client side is easy to do and can save a lot of unnecessary calls to the server as all processing is handled by the web browser. JavaScript provides a way to validate form’s data on the client’s computer before sending it to the web server.

Recently I have done an interactive client side form validation using JavaScript that’s I want to share with this Codeproject community. So let’s get started,

HTML Input Form

Here I have present an Form that contains Name, Address, Email, Password, Web URL, Comment box and answer an addition box. The code segment for the HTML input Form is as following,

Form outlook

Adding Style

Here I have used the following style sheet for the above HTML input Form,

JavaScript Live Validation

Here I have used two types of events to live validation of this form using the JavaScritpt. First event is triggered when you click on the input form field and another event will be trigger when you click on the submit button. So I want to discuss about the two types of event one by one.

Field Click Event:

When you click on an input form field than function FieldFocus() will be called and the function definition is as following,

The above function is only responsible for the change the field background color, display the field hints text below the input field, display the animated text right side of the field and after that it will be send the argument in the live_check() function for the further processing.

The function definition of the live_check() function is as following,

In this function take the input as field value and check it is null or not. If the field value is null then call the field_output() function and change the background color of the field and display the wrong text right side of the input field. And for the another case if the field value is matched with the correct format than it will be return true or else send the argument in the field_output() function to display the error text.

The function field_output() code segment is as following,

Depend on the set of arguments of the field_output() function the background color of the input field will be animated and the required text message will be shown right side of the input field.

Form field action after event click

Submit Button Click Event:

When user click on the submit button then sequentially for the one by one field arguments is pass through Submit_Check() function. The Submit_Check() function definition is as following,

In this function take the input as field value and check it is null or not. If the field value is null then call the field_output() function and change the background color of the field and display the wrong text right side of the input field. And for the another case if the field value is matched with the correct format than it will be return true or else send the argument in the field_output() function to display the error text.

Form live validation

Conclusion

Actually it is most important for any input form to validation the data that user are input. Client-side form validations help in giving immediate feedback to the user but it is also required to add server side form validation form to processing script. The user can disable JavaScript on their server or even auto-bots might try to submit your form as well. But as the client side validation can be give the immediate feedback to the user so that it should be used for the form processing. I hope you will enjoy this above project to validate the data for the client side form validation. Happy Coding to you…..:)

SHARE
Previous articleVideo Creation Software Video Maker Fx with Crack
I am a professional software developer from last 4 years. I have experience in analysis, design, development, testing and implementation of desktop (using C, C++, C#) and web (using HTML5, CSS3, JavaScript, PHP, MySql) platform using. I have good exposure to object-oriented design, software architectures, design patterns, test-driven development and Project Management.

LEAVE A REPLY