使用jQuery validate插件对输入进行条件url验证

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

Answer 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 .

Answer 2

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/