jqueryvalidation and pwstrength seem to conflict

[thoraxe]

Given the following code involving validation and pwstrength:

$(document).ready(function() {
  var form, options;
  form = $("#file_form");
  $("#file_form").validate({
    rules: {
      name: {
        required: true
      },
      file: {
        required: true
      },
      mobile: {
        required: true
      },
      email: {
        required: true,
        email: true
      },
      password: {
        required: true
      }
    },
    highlight: function(element) {
      $(element).closest(".form-group").removeClass("has-success").addClass("has-error");
    },
    unhighlight: function(element) {
      $(element).closest(".form-group").removeClass("has-error");
    }
  });
  options = {};
  options.ui = {
    container: "#strength-area",
    showVerdictsInsideProgressBar: true,
    showErrors: true,
    viewports: {
      progress: "#password-strength",
      verdict: "#password-strength"
    }
  };
  options.common = {
    minChar: 8
  };
  $("#password").pwstrength(options);

    $("#encrypt-button").click(function() {
      var valid;
      valid = form.valid();
      if (valid) {
        alert("Valid!");
        readSingleFile();
      }
});

jQueryValidation will validate all fields in the form when clicking #encrypt-button except the password field. Basically, nothing happens.

If the two are truly incompatible, is it possible to call some kind of function to force pwstrength to update progress, errors and verdict? Is there a function to evaluate the current score?

If I could determine that the current score was negative via a function call, I could use that along with .valid() to decide whether or not to proceed. And, if I could call a function to force pwstrength to update the progress, errors and verdict, it would end up setting the field to the correct error state (assuming the field was invalid).

Thanks!

[ablanco]

I've never tried to use jquery validation and pwstrength at the same time, I don't know if they are incompatible. If you set up a codepen, jsfiddle or similar example with both libraries working at the same time I can look at it.

There is a forceUpdate method that will force the strength meters to update. There isn't a function to read the strength (the current value is not stored), but you can get them using a callback in the onKeyUp option. You can use that to store the current score in some variable, and read it when validating.

Regards.

[thoraxe]

I've created a fiddle that demonstrates the issue described:
http://jsfiddle.net/z8JJ7/7/

If you put in a valid email address (foo@gmail.com) but violate the pwstrength rules (eg: don't enter anything -> too short), this also should be invalid because the empty field would violate the require on password from jquery validation.

Clicking the button reports "valid" which seems like it means somehow pwstrength and validation are colliding.

Since 0 chars = too short = invalid, I don't really need to use jQuery validation on the password field. However, I would need some kind of "if blahblah" that I can leverage with pwstrength to tell me if the current password is "valid". I'll give your onKeyUp method a try.

[thoraxe]

For reference:
http://jsfiddle.net/z8JJ7/10/

This will assign a score to a variable on keyup and, only if the rest of the form is valid and the score is positive, will it alert "valid".

[thoraxe]

Sorry for being dumb - how would I call forceUpdate? Or I guess, who/what is it a method on?

[thoraxe]

This issue is actually irrelevant.

jQuery Validation uses the name of the field, not the id.

http://jsfiddle.net/z8JJ7/12/

This demonstrates that this is not actually a problem.