CODEWITHSUNDEEP
javascriptjqueryjquery-validate
J. Polfer
J. Polfer

Reputation: 12481

jQuery Validate: Validate that one field, or both fields of a pair are required

I have a form that I am trying to validate that has two fields:

<div class="entryForm">
    <div class="formField">
        <label for="fieldEmailAddress">Email address:</label>
        <input type="email" name="fieldEmailAddress" id="fieldEmailAddress"/>
    </div>
    <div class="formField">
        <label for="fieldMobileNumber">Mobile number:</label>
        <input type="text" name="fieldMobileNumber" id="fieldMobileNumber"/>
    </div>
</div>

Here's my jQuery Validation wireup:

<script type="text/javascript">
    $(document).ready(function () {
        $('#form1').validate({ rules: { fieldMobileNumber: { phoneUS: true } } });
    });
</script>

What I'd like to do is add an additional validation rule that says: the form is not valid if both fieldEmailAddress and fieldMobileNumber are blank. In other words, I'd like to make it such that at least one of either fieldEmailAddress or fieldMobileNumber is required. It seems like most of the jQuery Validation custom methods are designed to only work for one field at a time - I need to validate both.

Any ideas?

Upvotes: 1

Views: 5414

Answers (2)

Sparky
Sparky

Reputation: 98728

You simply need to include the additional-methods.js file and use the require_from_group method.

require_from_group: [x, '.class']

// x = number of items required from a group of items.

// .class = class assigned to every form element included in the group.

jQuery:

$(document).ready(function () {

    $('#form1').validate({
        rules: {
            fieldMobileNumber: {
                phoneUS: true,
                require_from_group: [1, '.mygroup']
            },
            fieldEmailAddress: {
                require_from_group: [1, '.mygroup']
            }
        },
        groups: {
            theGroup: 'fieldMobileNumber fieldEmailAddress'
        }
    });

});

Add class="mygroup" to each input you need to group together...

<input type="email" name="fieldEmailAddress" id="fieldEmailAddress" class="mygroup" />

And finally, optionally use the groups option to lump the messages into one...

groups: {
    theGroup: 'fieldMobileNumber fieldEmailAddress'
}

Working DEMO: http://jsfiddle.net/CYZZy/

If you don't like where the validation message is placed, that's where you'd tweak it using the errorPlacement callback function.

Upvotes: 1

doitlikejustin
doitlikejustin

Reputation: 6353

You can bypass the Validate plugin and do a check like the following:

$("#form1").submit(function() {
    var email = $('#fieldEmailAddress');
    var phone = $('#fieldMobileNumber');

    if(email.val() == '' && phone.val() == '') {
        alert('Fill out both fields');
    }
    else if(email.val() == '') {
        alert('Email, please...');
    }
    else if(phone.val() == '') {
        alert('Phone, please...');      
    }
    else {
        alert('Yay!');
    }   
});

Upvotes: 2

Related Questions