How to compare two fields to pass the validation (jQuery Validation)

To match two fields with the jQuery Validation plugin and the “equalTo” method just follow the next steps:

1. Go to Forms -> Actions -> Settings -> UI Settings -> Load Javascript File and Enter the absolute url to the following file:

https://www.example.com/static_files/js/demo/jquery.validation.equalTo.js

Note: Don’t forget to use your domain name.

2. With the Form Builder add the following Css Class to both fields to compare:

– To the first field (e.g. Password) add the Css Class: first_field
– To the second field (e.g. Confirm Password) add the Css Class: second_field

And that’s it! Test your form!

How to Customize the Validation Error Message

First, I suggest copying our demo javascript file outside the application, and update its absolute URL on Form Settings -> UI Settings.

Then, to customize the validation error message, just edit the text of this line:

$.validator.messages.equalTo = 'Please enter the same value again.';

And if you want to change the css class names, just replace ‘first_field‘ and ‘second_field‘ in the following lines:

$.validator.addClassRules('second_field', {
    equalTo: ".first_field"
});

Then do the same with the Form Builder.

That’s all!

This example introduces you how to use the jQuery Validation plugin with Easy Forms; of course, you can create your own validation rules and use them with your forms.

Ref. | jQuery Validation Plugin