Tag archive for: form validation

How to use jQuery to intercept form submissions and validate form input

There came a time where I had to create a HTML form to accept inputs from users in order to generate a report. Before submitting the form to the back end server, there are some validations that I can perform on the data at the client side to reduce the number of HTTP responses that my server had to generate for unwanted inputs. The cost savings is especially significant when the form submission contains large file as part of the HTTP request.

I chose to use jQuery for intercepting the form submissions and do some data validation before I allow the browser to create a HTTP request to the server. This post documents a proof of concept, as a stepping stone, to realize my objective.

How to ensure that your Javascript is able to write unicode characters from external Javascript files to your HTML contents

Ever tried injecting Chinese characters into your HTML DOM from an external Javascript file but got something that resembles the following?

Well that was what I got for the Chinese version of my bilingual form initially as a result of validating an input field as the user is filling up my form.

In this post, I will discuss why I got the unwanted characters and what I did to solve the problem.

How to validate input fields as the user is filling up a form with jQuery

In order to get sensible data from users via an online form, we have to validate data that we receive from them . As much as possible, we will want the data validation process to minimize frustration to our users.

We could have perform the data validation on the input fields at the point when the form is submitted. However, a better way will be to perform data validation on the input fields as the user is filling up the form. The validation process can follow such a sequence:

1. User clicks on the input field.
2. User fills up the input field with data.
3. User clicks away from the input field.
4. Data validation occurs on the input field. If there are any errors, display the error message near to the input field. Else everything proceeds as usual.