CODEWITHSUNDEEP
jqueryjquery-validate
Siraris
Siraris

Reputation: 1198

jQuery Validate custom message not appearing for special method

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>

Upvotes: 1

Views: 1592

Answers (2)

Sparky
Sparky

Reputation: 98718

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/

Upvotes: 4

Sorprop
Sorprop

Reputation: 153

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.

Upvotes: 0

Related Questions