In most cases, the standard validation options that ship with Visual Form Builder will cover most of your needs. However, there are those occasions where you need something customized and the standard options just don’t cut it. Today, we’re going to look at how you can add your own jQuery validation rules.
Before we begin, you might want to head over to the jQuery Form Validation plugin pageand read through some of the documentation to get a better idea of what we’ll be talking about.
Create a JS file and add to your theme via functions.php file
Go into your theme’s folder and create a new file called vfb-js.js in a folder called js. Create that folder if it doesn’t exist.
Now, go to your theme’s functions.php file and add the following code:
function my_scripts_method() {
wp_register_script( 'vfb-js-file',
get_template_directory_uri() . '/js/vfb-js.js',
array( 'jquery' ),
'1.0',
false );
wp_enqueue_script( 'vfb-js-file' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
You are now ready to configure your JavaScript file.
Prepping our validation class
All custom rules that you want applied to a form will need to be placed inside the validation class. But first you will need to find the ID of the form you want to configure. Here, I am using Firebug to find that out, but View Source works just as well.
Getting the form ID using Firebug
Open your vfb-js.js file and add the following code:
jQuery(document).ready(function($) {
$('#contact-us').validate({
rules: {
}
});
});
Example #1: Require multiple checkboxes to be selected
For this example, let’s say that we have a form with a Checkbox field called Topics of Interest with several different topics to choose from. This is a required field, but we also want to make sure they select at least two topics.
In the same way that we grabbed the ID of the form, we’ll need to do the same here to get the name property of the checkbox field.
Getting the name property of the checkbox field using Firebug
Open your vfb-js.js file and add the following code:
jQuery(document).ready(function($) {
$('#contact-us').validate({
rules:{
'vfb-topics-of-interest-26[]':{
required: true,
minlength: 2
}
}
});
});
But that’s not all. We can also customize the error messages for that field!
jQuery(document).ready(function($) {
$('#contact-us').validate({
rules:{
'vfb-topics-of-interest-26[]':{
required: true,
minlength: 2
}
},
messages:{
'vfb-topics-of-interest-26[]':{
minlength: 'Please select at least two topics.'
}
}
});
});
Example #2: Require one field to be equal to another field
In this example, we have a Test Answer field but we need to be able to confirm that the user has entered the data correctly. To do this, we’ll add a second Text field and call it Confirm Test Answer. Now, we just need to make our first text field equal to our second one in our jQuery and throw an error message that lets them know if they don’t match.
Requiring one field to be equal to another
jQuery(document).ready(function($) {
$('#contact-us').validate({
rules:{
'vfb-topics-of-interest-26[]':{
required: true,
minlength: 2
},
'vfb-confirm-test-answer-621':{
equalTo: '#vfb-test-answer-620'
}
},
messages:{
'vfb-topics-of-interest-26[]':{
minlength: 'Please select at least two topics.'
},
'vfb-confirm-test-answer-621':{
equalTo: 'Your answers do not match'
}
}
});
});
Example #3: Make a field required, depending on the value of another field
Let’s say that you have a form where you have a Start Date and an End Date. If the user fills out the Start Date, the End Date needs to be required. The End Date, in this case, is dependent on the Start Date not being left empty.
jQuery(document).ready(function($) {
$('#contact-us').validate({
rules:{
'vfb-topics-of-interest-26':{
required: true,
minlength: 2
},
'vfb-confirm-test-answer-621':{
equalTo: '#vfb-test-answer-620'
},
'vfb-end-date-85':{
required: function(e){
return $('#vfb-start-date-80').val() !== '';
}
}
},
messages:{
'vfb-topics-of-interest-26':{
minlength: 'Please select at least two topics.'
},
'vfb-confirm-test-answer-621':{
equalTo: 'Your answers do not match.'
}
}
});
});
You can customize this to your needs so if you need the Start Date to have a certain value before the End Date is required, you can do that too.
As you can see, there are plenty of ways to extend your form with jQuery to accomplish some custom and complex things.
