jQuery Validate custom message not appearing for special method

Question

I'm using the jQuery Validator plugin, which has been working great. I just added another custom method to verify that the password contains one number or one special character, which also works great. The problem is, when that condition fails (they just enter 6 characters of text) it never throws the error message "Your password must contain at least one number or special character". Anyone know why this would be? Code is below:

jQuery.validator.addMethod("onespecial", function(value, element){
        var pattern = /^(?=.{6,})(?=.*[a-z])(?=.*[0-9])|(?=.*[!@#$%^&*()-+=]).*$/;

        return (pattern.test(value));

    }, "Your password must contain one number or special character");

    $("#activateForm").validate({
        rules: {
            first_name: "required",
            last_name: "required",
            password: {
                required: true,
                minlength: 6,
                onespecial: true
            },
            pass_confirm: {
                required: true,
                minlength: 6,
                equalTo: "#Password",
                onespecial: true
            },
            position: "required",
            category: "required"

        },
        messages: {
            first_name: "Please enter your first name",
            last_name: "Please enter your last name",
            password: "Please enter a valid password",
            pass_confirm: "Your passwords much match",
            position: "Please select your position",
            category: "Please select your category"
        }
    });

Update: With Markup

 <div id="activate-form">
<h1>Welcome. We just need a little bit more information.</h1>
  <form action="/" id="activateForm" method="post" novalidate="novalidate">     <div><input type="text" name="first_name" class="form-input" placeholder="First name" onfocus="this.placeholder=''" onblur="this.placeholder='First name'" id="FirstName"></div>        <div><input type="text" name="last_name" class="form-input" placeholder="Last name" onfocus="this.placeholder=''" onblur="this.placeholder='Last name'" id="LastName"></div>        <div><select name="category" class="form-input" id="Category"><option value="">Select category</option><option value="test">test</option><option value="test">test</option></select></div>
    <div><select name="position" class="form-input" id="Position"><option value="">Select Position</option><option value="RA">RA</option></select></div>
    <div><input type="password" name="password" class="form-input" placeholder="Password" onfocus="this.placeholder=''" onblur="this.placeholder='Password'" id="Password"></div>       <div><input type="password" name="pass_confirm" class="form-input" placeholder="Confirm password" onfocus="this.placeholder=''" onblur="this.placeholder='Confirm password'" id="PassConfirm"></div>        <div><input type="hidden" name="key" value="fff" id="Key"></div>          <input type="submit" value="Finish" class="button">     </form></div>

Can you reproduce the problem in a JsFiddle ? Sometimes writing the fiddle lets you find the source of the problem yourself... As a side note, please also take into account that a Javascript validation can't be considered a real validation. Client validation is for User-friendlyness (no roundtrip to server), but server validation is the only valid one. — Laurent S.
– Laurent S., Commented Oct 15, 2013 at 16:18
When you edit your SO question, please also proof-read it. Re: "Update: With Markup Welcome. We just need a little bit more information. Select categorytesttest Select PositionRA" — Sparky
– Sparky, Commented Oct 15, 2013 at 16:33
Edited your question so that your HTML markup is shown as code rather than rendered. — Sparky
– Sparky, Commented Oct 15, 2013 at 20:08

Sparky · Accepted Answer · 2013-10-16 16:21:42Z

4

You're not getting the message from your custom method because you're over-riding all error messages for password and pass_confirm with the messages option...

messages: {
    first_name: "Please enter your first name",
    last_name: "Please enter your last name",
    password: "Please enter a valid password",  // <-- overrides all messages
    pass_confirm: "Your passwords much match",  // <-- overrides all messages
    position: "Please select your position",
    category: "Please select your category"
}

You can specify a message for each rule, then when you don't specify one for your custom method, the message you've defined within addMethod will be used.

messages: {
    first_name: "Please enter your first name",
    last_name: "Please enter your last name",
    password: {
        required: "Please enter a valid password",
        minlength: "Please enter a valid password"
        // onespecial: "" // <-- message already defined within addMethod()
    },
    pass_confirm: "Your passwords much match", 
    position: "Please select your position",
    category: "Please select your category"
}

Also note: There is no need to duplicate all of your rules for the pass_confirm field. Since, no matter what, it must always match the password field, so those conditions are already satisfied.

password: {
    required: true,
    minlength: 6,
    onespecial: true
},
pass_confirm: {
    equalTo: "#Password",  
},

DEMO: http://jsfiddle.net/WZPcW/

edited Oct 16, 2013 at 16:21

answered Oct 15, 2013 at 20:06

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nevitones Over a year ago

Your answer gave a clue to find out that there was a data-msg-<method> over-riding the message. Thanks!

Sorprop · Accepted Answer · 2013-10-15 20:15:38Z

0

Please attach JsFiddle version to reproduce it, so we can run your code and test it.

For me you are overwiting messages and when you do something like this:

messages: {
    password: 
    {
        required: "Please enter a valid password",
        minlength: "Please enter a valid password"
    }
}

it should work, because it assigns messages to their validation names and your custom method shouldn't be overwriten. But I just guessing.

EDIT: wow, and again I didn't see answers :/ Sparky wrote all about your mestake.

answered Oct 15, 2013 at 20:15

Sorprop

1531 silver badge8 bronze badges

Collectives™ on Stack Overflow

jQuery Validate custom message not appearing for special method

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related