jquery validation plugin for form

Question

I am trying to validate a form having two fields string email and file type file (one of the two is mandatory). I am validating the form with following code,

$("#addOrganizationMembersForm").validate({
        rules : {
            csv : {
                required : "#emails:empty",
                extension: "xls|csv"
            },
            emails : {
                required : "#csv:empty"
            }
        },
        messages : {
            csv : {
                required : 'Upload a csv or xls file',
                extension : 'Only csv files are allowed',
            },
            emails : {
                required : 'Enter one or more comma seperated emails',
            }
        }
    });

This code is validating both fields (But for me if one of the two fields has value i.e email or csv file, then form is valid)

Kindly help me, what is wrong with this code

possible duplicate of [jQuery Validate: Validate that one field, or both fields of a pair are required](http://stackoverflow.com/questions/18993067/jquery-validate-validate-that-one-field-or-both-fields-of-a-pair-are-required) — Sparky, Oct 09 '13 at 17:21

score 1 · Answer 1 · answered Oct 09 '13 at 11:43

1

Try this,

$("#addOrganizationMembersForm").validate({
     rules : {
            csv : {
                required : function(){
                              return $("#emails").is(':empty')
                           },
                extension: "xls|csv"
            },
            emails : {
                required : function(){
                              return $("#csv").is(':empty')
                           },
            }
        },

answered Oct 09 '13 at 11:43

Rohan Kumar

40,431
11
76
106

Thanks rohan for replying. i have already tried this, and the thing is if i add console.debug($("#emails").is(':empty')) statement before the return statement, every time it returns true. same occurs for csv. – Shahzeb Khan Oct 09 '13 at 12:04
@Shahzeb: That's really weird, there may be some conflicting id in your DOM. I tried only "$("#emails").is(':empty');" in place of function(){return $("#emails").is(':empty')}, and worked for me. – Amit Singh Oct 09 '13 at 12:19
@sanki said `right` check your `DOM` once and `confirm` that you have `unique id's` – Rohan Kumar Oct 09 '13 at 12:22
1

@sanki and Rohan thanks for your help, i replaced the .is(":empty") by return ($("#emails").val() == null || $("#emails").val() == "") and it works. – Shahzeb Khan Oct 09 '13 at 12:29
@Shahzeb: Nice tweak :) – Amit Singh Oct 09 '13 at 13:43
Just use the `required_from_group` rule from [the `additional-methods.js` file](http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js). – Sparky Oct 09 '13 at 17:27

Sparky · Answer 2 · 2013-10-09T17:22:44.680

Quote OP's Comment:

"Thanks rohan for replying. i have already tried this, and the thing is if i add console.debug($("#emails").is(':empty')) statement before the return statement, every time it returns true. same occurs for csv."

When you have two fields where the required rule on each is dependent upon the other being empty, there are timing issues... you satisfy one field but then you might have to re-trigger validation on the other to clear the error.

However, if you include the additional-methods.js file, you can just use the require_from_group rule which already does exactly what you want. (Must use plugin version 1.11.1 or later)

$("#addOrganizationMembersForm").validate({
    rules: {
        csv: {
            require_from_group: [1, '.mygroup'],
            extension: "xls|csv"
        },
        emails: {
            require_from_group: [1, '.mygroup']
        }
    },
    messages: {
        csv: {
            require_from_group: 'Upload a csv or xls file',
            extension: 'Only csv files are allowed',
        },
        emails: {
            require_from_group: 'Enter one or more comma seperated emails',
        }
    }
});

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

jquery validation plugin for form

2 Answers2