jQuery Validator and Optional Fields using Regex

Question

I have an optional field (say "text1") which may either be blank or only alpha-numeric:

jQuery.validator.addMethod("onlyAlphaNumeric", 
        function(value, element) {  
            var regExp = new RegExp(/^[a-zA-Z0-9]+$/);              
            return ((this.optional(element)) || regExp.test(value));
        }
    , "Only aplaha-numeric characters allowed");


$("#student-search-form").validate({
    rules : {
        text1 : {
            optional : true,
            onlyAlphaNumeric: "Only a-n allowed"
        }
    },
    messages: {
        text : {                    
            acceptOnly: "&nbsp;Only alpha-numeric characters allowed"
        }               
    }
});

The problem is no validation happens, so if user enters "!&^%(*" in 'text1', the form gets submitted, no error checks.

Can somebody please tell me what am I doing wrong? Thank you.

I don't know of optional being a known validator (though I may be wrong). — Brad Christie
– Brad Christie, Commented Oct 6, 2011 at 17:22

Community · Accepted Answer · 2017-05-23 10:34:30Z

2

This is wrong...

rules : {
    text1 : {
        optional : true,
        onlyAlphaNumeric: "Only a-n allowed"
    }
},

For onlyAlphaNumeric:, you can only put true or false.

I am not too sure about optional: but I know required: is valid... so set required: to false. Alternatively, you could probably leave it out entirely since the validator defaults to fields as being "optional" (required:false) unless you specify otherwise.

rules : {
    text1 : {
        required : false,
        onlyAlphaNumeric: true
    }
},

See this similar answer...

using the jquery validation plugin, how can I add a regex validation on a textbox?

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Oct 6, 2011 at 17:25

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

3 Comments

Brad Christie Over a year ago

required is false by default, so no need to state it (unless it's for clarity's sake). And, after it's all said and done... you have this.

Sparky Over a year ago

@BradChristie, I thought so, and I already stated something like that above. "Alternatively, you could probably leave it out entirely since the validator defaults to fields as "optional" unless you specify otherwise."

kmansoor Over a year ago

Thank you, a couple of things were wrong (as pointed), required : false instead of optional : true (or no need for required : false at all, as it's the default) and as @Sparky672 mentioned, "onlyAlphaNumeric:, you can only put true or false."

Jayendra · Accepted Answer · 2011-10-06 17:35:34Z

0

you can add optional to the validation method -

http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js

jQuery.validator.addMethod("alphanumeric", function(value, element) {
    return this.optional(element) || /^\w+$/i.test(value);
}, "Letters, numbers, spaces or underscores only please");

Validate -

rules : {
     text1 : {
         alphanumeric: true
     }
 },

edited Oct 6, 2011 at 17:35

answered Oct 6, 2011 at 17:26

Jayendra

52.8k4 gold badges83 silver badges90 bronze badges

3 Comments

Jayendra Over a year ago

yup \w would include some others as well. This is an example of using jquery with optional validation. need to be customized as per needs.

Brad Christie Over a year ago

Also interesting the author uses the i flag for a pattern synonymous with [0-9a-zA-Z_]

Jayendra Over a year ago

yup .. was checking on the same thing. \w should cover all cased characters. Need to check for any specific reason i was included.

Nabil SADKI · Accepted Answer · 2011-10-06 17:55:31Z

I think that your code must be something like this :

// Suppose that your method is well defined
jQuery.validator.addMethod("onlyAlphaNumeric", 
    function(value, element) {  
        var regExp = new RegExp(/^[a-zA-Z0-9]+$/);              
        return ((this.optional(element)) || regExp.test(value));
    }
, "Only alpha-numeric characters allowed");

$("#student-search-form").validate({
    rules : {
        text1 : {
        required : false, // optional must be replaced by required
        onlyAlphaNumeric: true // rules are boolean
        }
    },
    messages: {
        text1 : {
            onlyAlphaNumeric: "I can change my message : Only alpha-numeric characters allowed"
        }
    }
});

Collectives™ on Stack Overflow

jQuery Validator and Optional Fields using Regex

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related