whateveryourscriptis

Implement JS Validation Against A Required Field In A Pardot Form

By admin March 17, 2020
Blog 0

Pardot does not provide any functionality to check whether the form fields are filled out or not – before submitting the form although it checks after submitting the form. In this article we will talk of a solution that all can implement. Implementing this validation will allow us to restrict the form submission if the required fields are not filled by any value or ignored by the user against the required fields. We can implement this against input box, text area, drop down list, check box and radio button type of fields.
1. Code for Validating Input Box: To validate the input box, we need to add a class with CSS class box. Here for instance we have defined “myclass”.


if( $(this).find('. myclass ').hasClass('required') ){
if( $(this).find('. myclass ').find('input[type="text"]').val() == '' ){
// Write a js code to display error message against field
}
}

2. Code for Validating Drop down field: To validate drop down field types, use the appended code.

if( $(this).find('.pd-select').hasClass('required') ){
if( $(this).find('.pd-select').find('select option:selected').val() == '' ){
// Write a js code to display error message against field
}
}

3. Code for Validating text area: To validate the text area field types, use the appended code.

if( $(this).find('.pd-textarea').hasClass('required') ){
if( $(this).find('.pd-textarea').find('textarea').val() == '' ){
// Write a js code to display error message against field
}
}

4. Code for validating check box: To validate check box field types, use the appended code.

if( $(this).find('.pd-checkbox').hasClass('required') ){
if(!$('input[type="checkbox"]').is(':checked')){
// Write a js code to display error message against field
}
}

5. Code for validating radio button: To validate radio button field types, use the appended code.

if( $(this).find('.pd-radio').hasClass('required') ){
if(!$('input[type="radio"]').is(':checked')){
// Write a js code to display error message against field
}
}

Also appended is the complete code which you need to write in the layout section.

$('form#pardot-form input [type="submit"]').on('click', function(){
if( $(this).find('. myclass ').hasClass('required') ){
if( $(this).find('. myclass ').find('input[type="text"]').val() == '' ){
// Write a js code to display error message against field
}
}
if( $(this).find('.pd-select').hasClass('required') ){
if( $(this).find('.pd-select').find('select option:selected').val() == '' ){
// Write a js code to display error message against field
}
}
if( $(this).find('.pd-textarea').hasClass('required') ){
if( $(this).find('.pd-textarea').find('textarea').val() == '' ){
// Write a js code to display error message against field
}
}
if( $(this).find('.pd-checkbox').hasClass('required') ){
if(!$('input[type="checkbox"]').is(':checked')){
// Write a js code to display error message against field
}
}
if( $(this).find('.pd-radio').hasClass('required') ){
if(!$('input[type="radio"]').is(':checked')){
// Write a js code to display error message against field
}
}
});

We hope this article will be helpful. 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