JavaScript Form Validation (Invoice Form)

This tutorial comes on second number on my series of making online invoice sample with pdf invoice and email delivery system.
In this tutorial I am going to use JavaScript form validation to forms field to get valid input from user. This is very important that form should only process valid data. As we know that in most case we use database to hold the input comes from the HTML form. If forms, in case of spammer user, sends the garbage data which have no meaning to our requirement and this data will occupy additional space in our database. It also increase our labour, and we have to check manually data of databases and delete unnecessary data. So it is better practice to check data validity as much as on user end i.e. on receiving input data from where user is making entry on the form. As we know that JavaScript is user end language and therefore we are making JavaScript form validation. We already learn how to make a simple form which tends to auto adjust in the given width. If you want to start at beginning of this tutorial series then you can first check my previous tutorial about simple form making at given link below:-
Make Online Invoice Sample with pdf Invoice and email delivery system form

What we are doing and validating in our tutorial.
1. javascript email validation
2. Javascript date validation and input format
3. Recieve only numbers input for numeric amounts
4. Blank Fileds should not be received.
5. Auto sum total field
6. Show JQuery Calendar when focus on Date Field

javascript form validation

Implementing JavaScript Form Validation

Rename “invoice_form_sample.php” with name “invoice_form_validated.php” and create a Javascript_validate.js file in the same folder where your input form resides. We shall write all our JavaScript form validation functions in this file. This javascript file should be included in the input form “invoice_form_validated.php” under the head tag. To include script file we shall write following code on the form under head tag:-


Javascript Email Validation

Email which has a fixed pattern i.e. Beginning with a string name and @ of symbol and some domain name like Write following function to javascript_validate.js file:


The above function is checking the input from the email textbox exists in the form and returning false if the input email is not like the correct pattern otherwise it returns true value. We have two input fields for emails i.e. one for invoice sender and other for receiver. So we have another validation check in the validation function.


This function is called in input form under the form tag on “onsubmit” event. So we have to add the following lines on the invoice form “invoice_form_validated.php”. The code will look like this.


When user press submit button to send form. This javascript validator function will check is the email pattern is true, then it’s ok the form will be submitted. If not the form will stop and not to be submitted and ready for correction to be make as message box is triggered telling where exactly the error is occurring and also it will set the focus cursor to that text field.

Javascript Blank Fields Validation

While submitting the form, a main function of javascript validation is to check whether an important field is not sending a blank values. For the purpose we have to check that following should not be sent blank.

1. Name of Company
2. First description field
3. First price/amount value field
So we add following code to our validate function.


Validate 03 Input Date Fields

Now it is turn to validate 03 input date fields. For the purpose we use three JavaScript “if” statements to validate three date fields separately. This validation required that our all 03 date input fields are in format like dd/mm/yyyy and accept years only 19XX and 20XX. We use match expression technique to implement validation. The following code will be used in Validate function.


Invoice Form Final Total Value Validation

We have to check that final total in invoice form

1. Should not be zero
2. Final total must be a numeric value

For the purpose following code will be added in Validate function.


Most of all above code is written in our validate function which is residing in Javascript_validate.js file and will be called when we press form submit button (as it is in onsubmit event handler of form tag ).

Javascript Validation of amount text field and Auto Total

In this section we are going to add following features in our “invoice_form_validated.php” file.

1. 03 amount fields should accept only numbers and float (decimal) numbers and if we write other than a number then JavaScript should triggered an error message.
2. After entering a number final total should auto add the three values and show final result on the run.

Enter only numbers in Amount text field

To implement this we add 03 more javascript functions in Javascript_validate.js file. These function will be called from onkeyup event handler of 03 price/amount text fields named “prow1”, “prow2” and“prow3”, exists in invoice form. These function check that only number is entered and show final total in the total text field. These three functions are given below:


In all above three function we call a GetTotal function which calculate total from all these three price text fields named “prow1”, “prow2” and“prow3”, in invoice form. We call above three function from the onkeyup Javascript event handler of these text fields. The code on invoice form will look like this.

GetToal() Function

Now we are adding GetTotal() function in Javascript_validate.js file.


Adding JQuery Calendar in the Date Input Text Fields.

Now we are adding an feature to our invoice web form i.e. JQuery Celandar that will appear when someone click on the date fields. This calendar make it easy to enter date by one click. And it also write date in our desired date format.

First of all we have to include JQuery source file in our invoice form. For that go to JQuery official website and download zip file which hold the full and minified version of jquery source file. We will use minified version of jQuery source file.

Go to JQuery official site and download source zip file

Extract files and copy following file in your invoice form folder:-


If you want more information about jQuery and its usage. You can read my article below:-

Fundamentals of jQuery

Now go to JQuery-UI library website and down JQuery-UI zip file from link given below:-

extract downloaded zip file and copy following two files in your invoice form folder.


to work jquery properly, we have to create another js (javascript) file named “app.js” in invoice form folder and add following code in it:-


In this function we are passing three ids of date fields and their formats to jquery to make calendar on click or focus. Be sure that in form, all three date text fields should have ids as given in function like “dt1”,  “dt2” and “dt3” respectively like this:-


Now the time we have to include above four files in our main invoice form in its head section. The code will look like this:

You can read my detail article on making JQuery calendar

Make a Beautiful Date Picker from a Textbox using JQuery

Now our invoice form validation is complete. The complete javascript_validate.js file will look like this


And  complete code for invoice_form_validated.php is look like this.

style.css file is same as in my previous tutorial, you can copy it form there which link I have mentioned in beginning of this tutorial. As this tutorial is at no.2 in series of email invoice sending project. In next tutorial of this series we will learn about making pdf invoice from the information we collect from this invoice form

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *