Password confirmation not working

[crossRT]

Maybe this is the same problem to #478.

This is the error I get in Chrome console. jquery.form-validator.min.js:9 Uncaught Error: Using undefined validator "validate_confirmation". Maybe you have forgotten to load the module that "validate_confirmation" belongs to?

Version detail jquery: 1.11.3 jquery-form-validator: 2.3.36

My html:

<div class="form-group">
    <label for="password" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
        <input type="password" class="form-control" name="password" id="password" placeholder="Password" data-validation="confirmation">
    </div>
</div>

<div class="form-group">
    <label for="password_confirmation" class="col-sm-2 control-label">Confirm Password</label>
    <div class="col-sm-10">
        <input type="password" class="form-control" name="password_confirmation" id="password_confirmation" placeholder="Confirm Password">
    </div>
</div>

I tried import the modules, but it's not working as well.

$.validate({
    form : '#form',
    modules : 'security'
});

[victorjonsson]

I'm not able to reproduce this error. http://jsbin.com/yuquzafoyi/edit?html,console,output

How do you include the javascript files?

[Tklaversma]

@crossRT I'm not sure if it matters, but shouldn't your inputs be the other way around..? Like so:

<div class="form-group">
    <label for="password" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
        <input type="password" name="password_confirmation" placeholder="Password">
    </div>
</div>
<div class="form-group">
    <label for="password_confirmation" class="col-sm-2 control-label">Confirm Password</label>
    <div class="col-sm-10">
        <input type="password" name="password" placeholder="Confirm password" data-validation="confirmation">
    </div>
</div>

The second input should be the referring input with data-validation="confirmation". And the first input should have the _confirmation in its name-attribute.

See here or 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">
</p>

[victorjonsson]

Both ways works. The error message probably means that the plugin can't resolve correct URL's of the validation modules. Therefor it's interesting to see how the javascript files are included.

[SolveSoul]

I'm having the same problem. I'm not including the library directly in my HTML file but I'm concatenating all my JS source files and then I minify them using a Gulp script.

If I include the JS file directly in my HTML it works correctly.

[victorjonsson]

When you concatenate the module files you should omit the module declaration in the setup config. If not, the module loader will try to load the module over http.

This comes from the time when gulp and browserify (and such tools..) wasn't an industry standard. This kind of "unexpected behaviour" gets reported now and then. I will make a modification to the module-loading-process so that it won't try to load a module that already have been inlined in the code (via concatenation).

[kdepp]

Thanks for the great work. But I've encountered the same problem. What's the progress here?

[victorjonsson]

Please try out version 2.3.61

[arturtakoev]

Don't know if it's only me, but I'm having a problem with loading the 'security' module. On the uploaded image is the error that I get in the console. The solution for me was simple: just added the line (modules: 'security' is not needed anymore): <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.77/security.js"></script>

[3ncor3]

Solution from @arturtakoev work for me...

my setup jquery 3.2.1 and bootstrap 4.0...

[shane-scalable]

I am having the same issue. package.json : "jquery": "^3.2.1","jquery-form-validator": "^2.3.77", (initially tried with the 2.3.19 version but was having the same issue.)

<input data-validation-error-msg="Password must be 8 characters long, and contain at least one number or upper-case letter." data-validation-optional="true" data-validation="custom length" data-validation-regexp="^.*(?=.{8,})(?=.*[\d|A-Z]).*$" data-validation-length="min8" id="password" name="password" type="password" class="form-control" required="required" value="{{ old('password') }}">
...
<input data-validation-error-msg="Passwords must match." data-validation-optional="true" data-validation="confirmation" data-validation-confirm="password" data-validation-length="min8" id="password_confirmation" type="password" name="password_confirmation" class="form-control" required="required" value="{{ old('password_confirmation') }}">

With the security module in a script tag at the bottom of the page (tried inside and outside of document.ready(), and not including it):

...
$.validate({ modules: 'security'});

Error: Uncaught Error: Using undefined validator "validate_confirmation". Maybe you have forgotten to load the module that "validate_confirmation" belongs to?