In this blog, I will tell you how to create a custom basic validation, which could be applicable in all the forms. It is really tuff and time consuming to create jquery basic validation every time for each. So it came to my mind that why should I don’t use JQuery Validation library but when I started using the library it look quite tuff to do changes in the library and as a starter, in JQuery I couldn’t able to do many changes in the library. So I started thinking how to make a basic validation library. So I started doing some rnd’s on the JQuery validation.
Firstly I created a basic HTML form.
See the below design a basic HTML form.
In below snapshot, you can see the full HTML code of above form design. I have marked few red boxes.
- Class=”required” : You can use this if you want to mark any field mandatory.
- data-bind=”alphanum” : I have used the data-bind attribute to mark the type of field means which type of value can come in this field. I have already defined the field’s type in the library I will show you in next few steps.
How to write the script of this validation form.
It is quite simple to write the script. Just need to make a click event of the submit form and pass a message array and form name. Both message and form name are mandatory but you can pass the blank message also. See the below snapshot.
You are writing the HTML and script if you will submit the blank form it will give an error like this.
If you enter wrong values then it will show the relevant message automatically.
If you want to put your custom message. Then pass the message in array format with key as input fields name. See below pic:
Now I will tell you how we are working on the validation or you can create the validation script. There are following steps you can follow:
- Create a click event of the submit button.
- Put the name of the form and pass it into validation function.
- Create a message array put blank if you don’t want to put the custom message of your’s else you can create an array with the key name of input field’s name.
So as you will click the submit button. It will get all the input fields of the form and start checking whether required class is their or not. If required class is there and the value of the input is blank then it will show the required error. Else it will check the data-bind attribute is there or not. If it will find the data-attr then it will check the type of value is matched or not and will show error accordingly.
Note: That class=’required’ and data-bind attribute both are not mandatory you can use any or not accordingly to your use. Like if you want a field to be mandatory but don’t want to check the content type and put the required class only. Or you want to check the data should be filled correctly but it not mandatory then use only data-bind attribute. If you don’t want any then don’t put validation will skip it.