jquery validation - optional field

Question

Hi,

In a registration form middleName field is optional. When the users enters his/her middleName, then it should validate that field.

I have used the following code to achieve the above scenario, but it is not working.

$("#middleName").rules("add", {checkName: true, required: false, messages: {checkName: "Please enter a valid middle name"} });

jQuery.validator.addMethod("checkName",
        function(value, element) {
            var regExp = new RegExp(/^[a-zA-Z0-9\s|\,|\.|\-|\']+$/);
            return regExp.test(value);
        },
        "Please enter a valid name."
);

Can anyone suggest me to achieve the above scenario.

Answer 1

I would do something like this:

jQuery("#middlename").bind("KeyUp").function(validateMiddleName());

and then

function validateMiddleName()
{
    if (jQuery("#middlename"))
    {
        //Do the validation
    }
}

Answer 2

In your custom methods you need to add the optional clause, like this:

jQuery.validator.addMethod("checkName", function(value, element) {
  var regExp = new RegExp(/^[a-zA-Z0-9\s|\,|\.|\-|\']+$/);
  return this.optional(element) || regExp.test(value);
}, "Please enter a valid name.");

You can see examples like this in the validation library's additional methods file as a reference, basically this just adds a sanity/"am I even required?" check to the result.

Answer 3

Here is the answer.

You can use this in two ways. When you want it as optional field then say "checkName: optional".

$("#middleName").rules("add", {checkName: 'opt', messages: {checkName: "Please enter a valid middle name"} });

When you want it as required field then say checkName: 'true'

$("#middleName").rules("add", {checkName: true, messages: {checkName: "Please enter a valid middle name"} });

and your rules would be

jQuery.validator.addMethod("checkName", function(value, element, param) { var regExp = new RegExp(/^[a-zA-Z0-9\s|\,|.|-|\']+$/); if(param == 'opt'){ return this.optional(element) || regExp.test(value); }else{ return regExp.test(value); } }, "Please enter a valid name.");

best of luck