Improved ‘equalto’ validation for Parsley.js

I’ve been playing with Parsely.js for form validation on a client project. It’s pretty nice, but I was unhappy with the ‘equalto’ implementation. ‘equalto’ allows you to link two fields whose entries should always match, such as when you have password or email confirmation fields during account registration. parsley-equalto is not symmetrical. If you enter some text into A, and enter non-matching text into B, B will not validate. If you correct B so that it matches A, then B will validate. So far, so good. But if you correct A so that it matches B, it won’t change the validation.

So I wrote a custom implementation that triggers validation on the paired field, making the link between the fields symmetrical. It’s pretty ugly (to avoid recursion) and doesn’t have any error handling, but it should point you in the right direction. (I’ve called it iff, which you can look up.)

The markup:

<input
  name="password"
  id="password"
  data-parsley-trigger="blur"
  data-parsley-iff="#password-confirm"
  data-parsley-iff-message=""
/>

<input
  name="password-confirm"
  id="password-confirm"
  data-parsley-trigger="blur"
  data-parsley-iff="#password"
  data-parsley-iff-message="Passwords must match."
/>

The validator:

var iffRecursion = false;
window.Parsley.addValidator( 'iff', {
    validateString: function( value, requirement, instance ) {
        var $partner = $( requirement );
        var isValid = $partner.val() == value;
        if ( iffRecursion ) {
            iffRecursion = false;
        } else {
            iffRecursion = true;
            $partner.parsley().validate();
        }
	return isValid;
    }
} );

Leave a Reply

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