How-to-use-HTML5-Form-validation-in-Pardot-Form

How to use HTML5 Form validation in Pardot Form

By admin December 30, 2019
Blog 0

Though Pardot has its own form validations, there are still certain restrictions which we can overcome / enhance form validations using custom HTML5 form validations. HTML5 validations are quite easier in comparison to JS/jQuery validations. Here in this article we will help to understand on how to use HTML5 validations, it’s as easy as adding a required property in any form field that you desire and validations will work automatically.

Checkout this simple form where we have implemented HTML5 validations and further down in this article we have shared an explanation on how those validations have been applied in this form.

Validation Type 1 – How to make any field a “required“ field in a Pardot form and run validations in real-time through HTML5 validations instead of running validations after each page refresh.

When we add/edit any field in Pardot we have the provision to set that field as a required fieldwith the help of the checkbox as shown below:

Now that we have set the form fields as “required“ using Pardot’s default validation we will need to go at frontend of the form and view the source code, in it we will see that there is a “required property“ added in the paragraph (

) tag of that field as shown below:

Email

Now that we know which all fields have been set as a “required“ field through Pardotwe can go ahead and enhance the validations of those fields by using a jQuery function to apply the custom “required property“ in thosefields which have “required“ in its paragraph tag. Use the appended code for that:

$('p.required').each(function(){
$(this).find("input,select,textarea").prop('required','required');
});

This aforesaid script will apply the property “required“ in each “input“, “select“& “text area“type of fields and as this form now has HTML5 validation properties, see how the validations work real-time on this form as soon we hit the“submit“ button. Refer to the appended screenshot:

Validation Type 2 – If we now want toenhance thevalidations for field types such as a “email“&“website“field to change their type, use the appended code to do the same:

$('p.email').each(function(){
$(this).find("input").prop('type','email');
});
$('p.website').each(function(){
$(this).find("input").prop('type','url');
});

Validation Type 3 – We can also add custom validations in the field type“phone“ to allow only numeric value, + sign or minimum & maximum characters. To do the same use the code as shared below:

$('p.phone').each(function(){
$(this).find("input").prop('pattern','[0-9+ ]{9,40}');
});

We hope this article will be helpful in understanding how we can apply custom HTML5 validations in our Pardot form. If you have any query or need any help with setting up custom Pardot forms and landing pages then kinldy reach out to us.

Related Posts

Popular post