Conditional url validation of input with jQuery validate plugin

Question

I need to be able to validate an input field has a correctly formatted URL only if the input is not blank. I am checking whether the value of the input is not blank, and if so, validate that it is a URL. However, this seems to oddly be breaking my code and not validating.

rules: { 
    domain: {
        required: true
    },
    playerClass: {
        required: true,
    },
    if (adTag.value !== '') {  
        url: true
    }
},

Full example: JSFIDDLE

Please also post the relevant code within the OP. Do not rely on the jsFiddle. Thanks. — Sparky
– Sparky, Commented Jun 1, 2015 at 16:50
You're trying to construct a conditional for something you don't need. Without the required rule, the other rules are automatically ignored when the field is left blank. — Sparky
– Sparky, Commented Jun 1, 2015 at 17:00

Sparky · Accepted Answer · 2015-06-01 17:47:29Z

You're breaking the plugin, because you cannot put a conditional statement within an object literal...

rules: {  // <- this is part of an object literal, NOT a function
    domain: {
        required: true
    },
    playerClass: {
        required: true,
    },
    if (adTag.value !== '') {  // <- no good! conditional is outside of a function
        url: true
    }
},

A conditional statement can only go inside of a function.

The rules option only takes a comma separated list of key:value pairs that represent the field name where the value is its rules. Then you can use a function to construct the parameter for the rule.

You could do something like this...

rules: {
    domain: {
        required: true
    },
    playerClass: {
        required: true,
    },
    adTag: {
        url: function() {
            // conditional statement to return true or false
        }
    }
},

I need to be able to validate an input field ... only if the input is not blank.

Without using the required rule, that is already the default behavior!

rules: {
    domain: {
        required: true
    },
    playerClass: {
        required: true,
    },
    adTag: {
        url: true  // only gets evaluated when the field is not empty
    }
},

DEMO: http://jsfiddle.net/bk7x129p/1/

Rapti · Accepted Answer · 2015-06-01 17:10:04Z

1

That's because you are using an expression inside the definition of a JS object. This is not possible. You can do this instead:

    rules: {
        domain: {
            required: true
        },
        playerClass: {
            required: true,
        },
        adTag: {
            url: adTag.value !== ''
        }
    }

This has a slightly different effect than what you think your code should have as it always creates the url field, but it will be true or false depending whether adTag.value !== '' is true.

edited Jun 1, 2015 at 17:10

answered Jun 1, 2015 at 16:52

Rapti

2,6923 gold badges22 silver badges24 bronze badges

5 Comments

Rapti Over a year ago

Oh, I wasn't aware that he uses a jQuery plugin that requires a special formatting. I just corrected the syntax error.

Sparky Over a year ago

The question is tagged jQuery Validate and the plugin is used in the jsFiddle, however, the question could have been written better.

Sparky Over a year ago

You're making a similar mistake as the OP, where the expression is outside of a function. Does not work like that: jsfiddle.net/bk7x129p/2

Rapti Over a year ago

Then I wonder why this has always worked for me. You are free to use any expression that evaluates to a single value behind the colon, and wherever I can use such an expression, the compiler doesn't care whether I put foo() or foo != bar or foo + 3. The point is that you can't use more complex expressions using things like if conditionals unless you wrap it in an anonymous function and that you can't use an expression where the name for the key is expected.

Sparky Over a year ago

Look at my jsFiddle. It's only evaluated once on page load. It needs to be dynamic, but it's not dynamic unless you use a function.

Collectives™ on Stack Overflow

Conditional url validation of input with jQuery validate plugin

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related