CODEWITHSUNDEEP
javascriptjqueryjquery-form-validator
Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

formvalidator.net compare password not working

I am using formValidator from FormValidator.net and I have a situation where I need to validate password and compare password fields and according to plugin this is how we it can be done.

<p>
  Password (at least 8 characters)
  <input name="pass_confirmation" data-validation="length" data-validation-length="min8"/>

  Confirm password
  <input name="pass" data-validation="confirmation"/>
</p>

and since I am using their latest version of plugin I also tried what they have suggested how to do it latest version > 2.2.1 as below:

<p>
      Password (at least 8 characters)
      <input name="pass_confirmation" data-validation="length" data-validation-length="min8"/>

      Confirm password
      <input name="pass" data-validation="confirmation" data-validation-confirm="pass_confirmation"/>
</p>

But still it is not comparing the password at all. Although I can say that minimum value comparision for password is happening properly. Have anyone worked on this plugin.? Is there any other way to do this?

$.validate({
  form: "#frmSample",
  validateOnBlur: true, // enable validation when input looses focus
  scrollToTopOnError: true, // Set this property to true if you have a long form
  borderColorOnError: "rgb(167, 3, 0)",
  borderColorOnSuccess: "#a94442",
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>
<form id="frmSample">
 <p>
  Password (at least 8 characters)
  <input name="pass_confirmation" data-validation="length" data-validation-length="min8">
  <br/>
  Confirm password
  <input name="pass" data-validation="confirmation">
</p>
</form>

Upvotes: 1

Views: 1229

Answers (1)

GuyT
GuyT

Reputation: 4416

You have to load the security module.

Change $.validate({options}) to $.validate({modules:'security', options})

In your example your code will look like:

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>
<form id="frmSample">
 <p>
  Password (at least 8 characters)
  <input name="pass_confirmation" data-validation="length" data-validation-length="min8">
  <br/>
  Confirm password
  <input name="pass" data-validation="confirmation">
</p>
</form>

JavaScript

$.validate({
  modules : 'security',
  form: "#frmSample",
  validateOnBlur: true, // enable validation when input looses focus
  scrollToTopOnError: true, // Set this property to true if you have a long form
  borderColorOnError: "rgb(167, 3, 0)",
  borderColorOnSuccess: "#a94442",
});

See the working fiddle

Update

You have to use the module 'security' because the form validator plugin is created with separate modules eg. 'location, file, swedish, uk' and you have to load the required module. If you want to use the 'uk' module you have to use modules:'uk' and so on.

Upvotes: 2

Related Questions