Validation is the essential part of any HTML form as you need your data to be valid all the time.

Hey there,

Today, I am gonna teach you how to add custom validations to your HTML forms (LoadForms).

I know how important it is to have required RegExp patterns, So as to validate the data BUT at the same time, it's really important to have only those RegExp patterns which are required for your site.
That's the only reason we have added only the very basic required patterns.

Available RegExp

We already have few very basic RegExp patterns which you already use by adding data-validation="email" data attribute on input field.

All among them are listed below.

  1. data-validation="required"
  2. data-validation="email"
  3. data-validation="number"
  4. data-validation="url"
  5. data-validation="domain"

If you are using data-validation="" other than required then no need to add required :) as it has its own RegExp pattern.

How to add new RegExp patterns

It's really simple to add new RegExp patterns trust me,
You just need to create a new script tag underneath the loadforms-script.js script tag.

Your code should look something like this.

<script type="text/javascript" src="https://loadforms.com/client/v1/loadforms-script.js" ></script>
<script type="text/javascript"> 
	     /* Adding custom validation */
</script>

Here comes the magic of the day,
Create a new variable called loadFormsCustom. Now create a new instance of the already existing class loadFormsRegex() and assign it to the created variable as shown below:

var loadFormsCustom = new loadFormsRegex();

this will help you to get access to the existing class and you can add more methods to it including the existing one.

For this example we will add CVV RegExp to demonstrate how it really works.

I wrote a small RegExp pattern for CVV code validation, try assigning the new method (cvv) to the loadFormsCustom variable.

loadFormsCustom.cvv = /^[0-9]{3,4}$/;

Your job is done, your complete code should look like this

<script type="text/javascript" src="https://loadforms.com/client/v1/loadforms-script.js" ></script>
<script type="text/javascript"> 
         /* Custom Validation */
         var loadFormsCustom = new loadFormsRegex();
         loadFormsCustom.cvv = /^[0-9]{3,4}$/;
</script>

You successfully created the custom RegExp pattern call cvv, Now you can use it
in your HTML form as shown below

<input type="text" data-validation="cvv" />

Where cvv is the method which you have created.
This way you can add your own RegExp patterns. You can add as many as you want.

More Examples

<script type="text/javascript"> 
         /* Custom Validation */
         var loadFormsCustom = new loadFormsRegex();
	     loadFormsCustom.firstName = /^(?=.{1,50}$)[a-z]+(?:['_.\s][a-z]+)*$/i;
	     loadFormsCustom.age = /\s[0-1]{1}[0-9]{0,2}/;
	     loadFormsCustom.birthDate = /^[0-9]{2}[\/]{1}[0-9]{2}[\/]{1}[0-9]{4}$/g;
</script>

you can use them in your HTML form like data-validation="firstname" data-validation="age" or data-validation="birthDate"

Add your own RegExp patterns to have more valid data :)

Hope, you enjoyed adding your own RegExp patterns

If yes, Please do share this article and let the people know that this is one of the best plugin to reduce the efforts of coding.

If you didn't get anything in this article or even if you have a very small doubt regarding anything please feel free to contact us