We are using FormValidation.io for form validations, now we are trying to use the identical validator using the html attributes which is applied via the Declarative plugin.

What we want? We want the validation to check that confirm field is same as password field if not it should fail validation

<input class="form-control" data-fv-not-empty="true" data-fv-not-empty___message="The password is required" type="password" placeholder="Password" name="password" id="input-password" autocomplete="off">
     
<input class="form-control" data-fv-identical="true" data-fv-identical___compare="getPassword()" data-fv-identical___message="The password and its confirm are not the same" type="password" placeholder="Confirm Password" name="confirm" id="input-confirm" autocomplete="off">
     
<script>
function getPassword(){
return $('#input-password').val();
}
</scrpt>

Now the document states we can declare the compare value as both a string or a function that returns string. Now even if we call a function there it still converts the value as string so as per our current code will show the confirm to be invalid until the value of confirm is not equal to "getPassword()" not the output of this function but this exact string.

We would like to know how can we set compare using html attributes. We can achieve the same using the programatic way but we want to make it work using Declarative mode

Documentation links

So we wont be able to achieve this without modifying the core plugin itself.

Hope this helps anyone who was looking for the same answer.

CodePudding user response：

I just run into this problem. As a workaround I use this trick:

var fv = form.fv;

fv.updateValidatorOption(input.name, 'identical', 'compare', function(){
  return inputConfirm.value;
});

Of course in a entry point where I init validation for all forms in a loop I save instance in form prop: form.fv = fv;