Chat with us, powered by LiveChat

Blog

How To Use Html5 Validations In Pardot Forms

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 field with the help of the checkbox as shown below:

Screenshot Pardot

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 (<p></p>) tag of that field as shown below:

<p class=”form-field email pd-text required”>
<label class=”field-label” for=”272882_64499pi_272882_64499″>Email</label>
<input type=”email” name=”272882_64499pi_272882_64499″ id=”272882_64499pi_272882_64499″ value=”” class=”text” size=”30″ maxlength=”255″ onchange=”piAjax.auditEmailField(this, 272882, 64499, 71707565);” onfocus=”” required=””>
</p>

Now that we know which all fields have been set as a “required“ field through Pardot we can go ahead and enhance the validations of those fields by using a jQuery function to apply the custom “required property“ in those fields 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:

Screenshot Pardot 2

Validation Type 2 – If we now want to enhance the validations 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.

Tags: , ,

Calander Dec 27, 2019

Leave a Reply

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

Enter the text from the image below *