javascript - Custom Regex Validator in Parsley.js - Stack Overflow

admin管理员组

文章数量:1356878

Issue

I am having a problem creating a custom validator for the Parsley.js plugin. What I'm trying to do is test a value vs a regex. Specifically, I'm trying to validate that a password value includes at least one uppercase and one lowercase letter. The validation code throws an error, but does not return true when the condition has been satisfied.

HTML

<form name="Form" id="signupform" method="post" action="#" data-parsley-validate data-parsley-excluded="input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden">
      <label for="password1">New Password <span class="req">*</span></label>
      <input name="password" id="password1" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspannewpassinput" data-parsley-required-message="Please enter your new password." data-parsley-mixedcase="^(?=.*[a-z])(?=.*[A-Z]).*$" data-parsley-required/>
      <span class="errorspannewpassinput"></span>
      <label for="confirm_password1">Confirm Password <span class="req">*   </span></label>
      <input name="Password_2" id="password2" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspanconfirmnewpassinput" data-parsley-required-message="Please re-enter your new password." data-parsley-equalto="#password1" data-parsley-mixedcase="^(?=.*[a-z])(?=.*[A-Z]).*$" data-parsley-required />
      <span class="errorspanconfirmnewpassinput"></span>
      <input type="submit" name="submitinfo" id="submitsignup" data-theme="b" style="width:100%;" alt="Sign Up Now" value="Submit Account Request" />
</form> 

jQuery

  $(function() {
    // Set variables
    var pmixedCase = 'Y';
    var mixedCase = $('.mixedcase');
    var passwordField = $('#password1, #password2');
    var passwordFieldErrors = $('.errorspannewpassinput, .errorspanconfirmnewpassinput');
    // Assemble list of visible password requirements
    // Mixed Case
    if (pmixedCase === 'Y') {
        mixedCase.show();
    } else {
        mixedCase.hide();
    }
    // Custom Validators
    window.Parsley.addValidator('mixedcase', {
        requirementType: 'regexp',
        validateString: function(value, requirement) {
            return requirement.test(value);
        },
        messages: {
            en: 'Your password must contain at least (1) lowercase and (1) uppercase letter.'
        }
    });
}); 

I've included a JSFiddle below.

Fiddle

Issue

I am having a problem creating a custom validator for the Parsley.js plugin. What I'm trying to do is test a value vs a regex. Specifically, I'm trying to validate that a password value includes at least one uppercase and one lowercase letter. The validation code throws an error, but does not return true when the condition has been satisfied.

HTML

<form name="Form" id="signupform" method="post" action="#" data-parsley-validate data-parsley-excluded="input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden">
      <label for="password1">New Password <span class="req">*</span></label>
      <input name="password" id="password1" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspannewpassinput" data-parsley-required-message="Please enter your new password." data-parsley-mixedcase="^(?=.*[a-z])(?=.*[A-Z]).*$" data-parsley-required/>
      <span class="errorspannewpassinput"></span>
      <label for="confirm_password1">Confirm Password <span class="req">*   </span></label>
      <input name="Password_2" id="password2" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspanconfirmnewpassinput" data-parsley-required-message="Please re-enter your new password." data-parsley-equalto="#password1" data-parsley-mixedcase="^(?=.*[a-z])(?=.*[A-Z]).*$" data-parsley-required />
      <span class="errorspanconfirmnewpassinput"></span>
      <input type="submit" name="submitinfo" id="submitsignup" data-theme="b" style="width:100%;" alt="Sign Up Now" value="Submit Account Request" />
</form> 

jQuery

  $(function() {
    // Set variables
    var pmixedCase = 'Y';
    var mixedCase = $('.mixedcase');
    var passwordField = $('#password1, #password2');
    var passwordFieldErrors = $('.errorspannewpassinput, .errorspanconfirmnewpassinput');
    // Assemble list of visible password requirements
    // Mixed Case
    if (pmixedCase === 'Y') {
        mixedCase.show();
    } else {
        mixedCase.hide();
    }
    // Custom Validators
    window.Parsley.addValidator('mixedcase', {
        requirementType: 'regexp',
        validateString: function(value, requirement) {
            return requirement.test(value);
        },
        messages: {
            en: 'Your password must contain at least (1) lowercase and (1) uppercase letter.'
        }
    });
}); 

I've included a JSFiddle below.

Fiddle

• javascript
• jquery
• regex
• validation
• parsley.js

Share Improve this question Follow edited Oct 22, 2015 at 21:40 dentalhero asked Oct 22, 2015 at 19:51 dentalherodentalhero 69933 gold badges1111 silver badges3232 bronze badges 2

• Well, the pattern is ^(?=.*[a-z])(?=.*[A-Z]).*$ but it does not fix the whole problem :(. – Wiktor Stribiżew Commented Oct 22, 2015 at 19:57
• I've updated this in the code sample and Fiddle above. Thanks. I'm quite sure that the issue is present in the addvalidator method. – dentalhero Commented Oct 22, 2015 at 20:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The issue you're facing is that your JsFiddle is using Parsley 2.1.2 whereas the documentation is already updated to Parsley 2.2.0.

If you look at the Javascript console you'll see an error:

Uncaught TypeError: window.Parsley.addValidator is not a function

Which means that the version you're using is not yet updated (the previous versions used window.ParsleyValidator.addValidator). So, if you simply update Parsley.js to the correct version your code will work. See this fiddle.

---

However, there's a simpler way to acplish what you need (that is, without a custom validator). You can use the built-in Pattern (data-parsley-pattern). For example:

<form name="Form" id="signupform" method="post" data-parsley-validate data-parsley-excluded="input[type=button], input[type=submit], input[type=reset], input[type=hidden], [disabled], :hidden">
    <label for="password1">New Password <span class="req">*</span></label>
    <input name="password" id="password1" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspannewpassinput" data-parsley-required-message="Please enter your new password." data-parsley-pattern="(?=.*[a-z])(?=.*[A-Z]).*" data-parsley-pattern-message="Your password must contain at least (1) lowercase and (1) uppercase letter." data-parsley-required />
    <span class="errorspannewpassinput"></span>
    <label for="confirm_password1">Confirm Password <span class="req">*</span></label>
    <input name="Password_2" id="password2" type="password" class="password" data-parsley-minlength="1" data-parsley-errors-container=".errorspanconfirmnewpassinput" data-parsley-required-message="Please re-enter your new password." data-parsley-equalto="#password1" data-parsley-pattern="(?=.*[a-z])(?=.*[A-Z]).*" data-parsley-required data-parsley-pattern-message="Your password must contain at least (1) lowercase and (1) uppercase letter."/>
    <span class="errorspanconfirmnewpassinput"></span>
    <input type="submit" name="submitinfo" id="submitsignup" data-theme="b" style="width:100%;" alt="Sign Up Now" value="Submit Account Request" />
</form>

What I've changed:

1. Replaced data-parsley-mixedcase="^(?=.*[a-z])(?=.*[A-Z]).*$" for data-parsley-pattern="(?=.*[a-z])(?=.*[A-Z]).*" on both inputs.

   As per Marc-André Lafortune's ment I removed the ^ at the start and the $ at the end, because the patterns are now anchored.

2. Added data-parsley-pattern-message="Your password must contain at least (1) lowercase and (1) uppercase letter." on both inputs.

JsFiddle available here.

本文标签： javascriptCustom Regex Validator in ParsleyjsStack Overflow