jQuery Custom Validation Rule – fieldPresent

Share this article

This post shows you how to add a custom validation rule to your forms using the jQuery.validate.js
plugin. This post supports the Setup form validation using jQuery in just 2 minutes post. I used the $.validator.addMethod() function to setup the custom validation rules. I’ve added a Live Demo below. Update: 30/06/2013: Added custom validation rule for date of birth.

Examples

The example below
shows a custom validation rule which checks that both a name and email are present. If the name is present the email must be present and vice versa. Example on left field validation. b5f8ddf05cc9e0d77165aab60fe3adec[1] Example on right field validation. 4f5d3b79c2a2c8284b4b23b785e4f893 Example on both in action on multiple pairs. fb3c37c4856ac43787f233f40d40a973

Live Demo

Edit in jsfiddle

JQUERY

There is a patched version of this snippet at the end of the post, which fixes some cross browser and validation recursion issues.
$.validator.addMethod("fieldPresent", function (value, element, options)
{
    //we need the validation error to appear on the correct element
    var targetEl = $('input[name="'+options.data+'"]'),
        bothEmpty = (value == targetEl.val() == '');

    //trigger error class on target input
    (bothEmpty) ? targetEl.addClass('error') : targetEl.removeClass('error');
    return !bothEmpty;
},
    "Friend's name and email required."
);

$('#myForm').validate({
    onkeyup: true,
    rules: {
        "friend1-name": { "fieldPresent": { data: "friend1-email" } },
        "friend1-email": { "fieldPresent": { data: "friend1-name" } }             
    },
    submitHandler: function(form) {

        console.log('passed validation.');
        //submit form handler
    }
});

HTML


    
        Friend's name
        
            
        
    
    
        Email Address
        
            
        
    

CSS

.control-group {
    width: 100%;
}

.control-group-inner {
    width: 50%;
    float: left;
    display: inline-block;
}
If the jQuery code snippet above doesn’t work here is a newer version to remove some bugs. Kind of want to avoid setTimeouts as they are bad coding practice…
//custom validation: each friend entered must have an email and a name
$.validator.addMethod("fieldPresent", function (value, element, options)
{
    //we need the validation error to appear on the correct element
    var targetEl = $('input[name="'+options.data+'"]'),
        targetEmpty = (targetEl.val() == ''),
        elEmpty = (value == ''),
        bothEmpty = elEmpty && targetEmpty;

    //trigger error class on target input
    if (!bothEmpty && targetEmpty)
    {
        //error msg doesn't exist yet so wait...
        setTimeout(function()
        {
            if (targetEl.closest('.control-group-inner').find('label.fieldPresentError').length == 0)
            {
                targetEl.addClass('error');
                if (!elEmpty) $(element).closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.after("Friend's name and email required.");
            }
        }, 500);
    }

    return (bothEmpty || !elEmpty);
},
    "Friend's name and email required."
);

Validate Date of Birth (3 inputs)

How to validate dob which contains 3 inputs for day, month & year. You’ll need to add a custom validation rule.
//custom validation for dob
$.validator.addMethod("dobValid", function (value, element, options)
{
    //we need the validation error to appear on the correct element
    var day = $('input[name="dob-day"]'),
        month = $('input[name="dob-month"]'),
        year = $('input[name="dob-year"]'),
        anyEmpty = ( day.val() == '' || month.val() == '' || year.val() == '' );

    if (anyEmpty) {
        day.add(month).add(year).addClass('error');
    }
    else {
        day.add(month).add(year).removeClass('error');
    }

    return !anyEmpty;
},
    "Please enter your date of birth."
);


...


$form.validate({
    rules: {

        ...

        "dob-year": { required: "required", dobValid: true }

        ...

    },
    messages: {

        ...

    },
    submitHandler: function(form) {

        ...
        
    }
});

Frequently Asked Questions (FAQs) about jQuery Custom Validation Rule

How can I create a custom validation rule in jQuery?

Creating a custom validation rule in jQuery involves using the jQuery.validator.addMethod() function. This function allows you to define your own validation methods. It takes three parameters: name (the name of the method), method (the validation function), and message (the error message to display if the validation fails). Here’s an example of how to use it:

$.validator.addMethod("customRule", function(value, element) {
// Validation logic here
return /* condition */;
}, "This is a custom error message.");

In this example, “customRule” is the name of the method, the function is the validation logic, and “This is a custom error message.” is the error message that will be displayed if the validation fails.

What are some common use cases for custom validation rules in jQuery?

Custom validation rules in jQuery can be used in a variety of scenarios where the built-in validation methods are not sufficient. For example, you might need to validate that a field contains a certain pattern of characters, that a date is within a certain range, or that a selection from one field corresponds to a selection in another field. Custom validation rules give you the flexibility to define exactly what constitutes valid input for your specific use case.

How can I apply a custom validation rule to a specific field?

To apply a custom validation rule to a specific field, you can use the rules() method. This method allows you to add or remove rules for an element. Here’s an example of how to use it:

$("#myField").rules("add", {
customRule: true
});

In this example, “myField” is the ID of the element, and “customRule” is the name of the custom validation rule. The value true indicates that the rule should be applied.

How can I remove a custom validation rule from a specific field?

To remove a custom validation rule from a specific field, you can use the rules() method with the “remove” command. Here’s an example of how to use it:

$("#myField").rules("remove", "customRule");

In this example, “myField” is the ID of the element, and “customRule” is the name of the custom validation rule.

How can I display custom error messages with my custom validation rule?

When you define a custom validation rule with the jQuery.validator.addMethod() function, the third parameter is the error message to display if the validation fails. This message will be displayed in the same way as the messages for the built-in validation methods. Here’s an example:

$.validator.addMethod("customRule", function(value, element) {
// Validation logic here
return /* condition */;
}, "This is a custom error message.");

In this example, “This is a custom error message.” is the error message that will be displayed if the validation fails.

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

jQueryvalidation
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week