jQuery Validate, out of two blank fields, at least one field must be filled or both

Question

I want to validate my form so that is out of two blank fields, at least one field must be filled and two fields also can be filled; but can't leave any field blank.

I'm using jquery-1.9.1-min.js and here is my html page.

<form action="#" class="send_form" id="forgot_pass_form" method="POST">
            <fieldset>
                <div class="send_row">
                    <label class="padding-top10">Email</label>
                    <input type="text" class="send_email" id="email" name="email" />
                    <em>You need to type an email address</em>
                </div>

                <div class="send_row option">OR</div>

                <div class="send_row">
                    <label class="padding-top10">Username</label>
                    <input type="text" class="send_username" id="uname" name="uname" />
                </div>


                <div class="send_row send_submitforgotuser">
                    <input type="submit" value="Submit" />
                </div>
            </fieldset>
            </form>

Any suggestion how to do it.... ?

sofar I have tried

 jQuery.validator.addMethod("require_from_group", function(value, element, options) {
    alert("xxx");
    var valid = $(options[1], element.form).filter(function() {
        return $(this).val();
    }).length >= options[0];

    if(!$(element).data('reval')) {
        var fields = $(options[1], element.form);
        fields.data('reval', true).valid();
        fields.data('reval', false);
    }
    return valid;
}, jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields."));

Still not getting friutful output.

Answer 1

@Sparky I am trying to use your answer to validate the update of an Account name and/or Password. I enter in the original Account Name and Password and then click on the update button and the validation of the original Account name and Password is performed (i.e., no message to say that a new Account or Password must be entered). My code is:

$(document).ready(function(){
$.validator.addMethod(
        "regex",
        function(value, element, regexp) 
        {
            if (regexp.constructor != RegExp)
                regexp = new RegExp(regexp);
            else if (regexp.global)
                regexp.lastIndex = 0;
            return this.optional(element) || regexp.test(value);
        },
        "Please enter correct Characters."
);
jQuery.validator.addMethod("require_from_group", function (value, element, options) {
    var numberRequired = options[0];
    var selector = options[1];
    var fields = $(selector, element.form);
    var filled_fields = fields.filter(function () {
        // it's more clear to compare with empty string
        return $(this).val() != "";
    });
    var empty_fields = fields.not(filled_fields);
    // we will mark only first empty field as invalid
    if (filled_fields.length < numberRequired && empty_fields[0] == element) {
        return false;
    }
    return true;
    // {0} below is the 0th item in the options field
}, jQuery.format("'Please enter either a new Account name and/or a new password'/Please fill out at least {0} of these fields."));
$('[data-toggle="tooltip"]').tooltip();
$("#contactForm").validate({
    groups: {  // consolidate messages into one
        names: "accountName1 enterPassword1"
    },
    rules: {
        accountName: {
            required: true,
            minlength: 2
        },

        enterPassword: {
            required: true,
            minlength: 8
        },

        accountName1: {
            require_from_group: [1, ".send"],
            minlength: 2
        },

        accountName2: {
            minlength: 2,
            equalTo: "#accountName1"
        },

        enterPassword1: {
            require_from_group: [1, ".send"],
            regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/,
            minlength: 8
        },

        enterPassword2: {
            regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/,
            minlength: 8,
            equalTo: "#enterPassword1"
        }
    },

    messages: {
        accountName: {
            required: "Please enter your current account name.",
            minlength: "Your account name must consist of at least 2 characters."
        },

        enterPassword: {
            required: "Please enter your current password.",
            minlength: "Your password must consist of at least 8 characters."
        },

        accountName1: {
            minlength: "Your account name must consist of at least 2 characters."
        },

        accountName2: {
            minlength: "Your account name must consist of at least 2 characters.",
            equalTo: "Your confirmation account name does not match the original."
        },

        enterPassword1: {
            regex: "Please nter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric..",
            minlength: "Your password must consist of at least 8 characters."
        },

        enterPassword2: {
            regex: "Please enter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric..",
            minlength: "Your password must consist of at least 8 characters.",
            equalTo: "Your confirmation password does not match the original."
        }
    },

    submitHandler : function(contactForm) {
        //do something here
        var frm = $('#contactForm');
        //alert($("#accountName1").val());

        $.ajax({
            type: "POST",
            url: "UpdateAccountView",
            cache: false,
            data: frm.serialize(),
            success: function(data){
                console.log('Submission was successful.');
                console.log(data);

                $("#accountName").focus();
                $('#ajaxGetUserServletResponse').text(data);
            }
        });
    }
});      
}); // end document.ready

Answer 2

You are attempting to use validator.addMethod which is part of the jQuery Validate plugin. You'll need to include this plugin in your code if you haven't already.

Then use the require_from_group rule that's already part of the Validate plugin's additional-methods.js file. (Don't forget to include the additional-methods.js file too.)

rules: {
    myfieldname: {
        require_from_group: [1, ".class"]
    }
}

• First parameter is the number of items to be required.

• Second parameter is the class assigned to all elements in your grouping. I added a send class to your two input elements.

• Also use the groups option to consolidate the two messages into one.

jQuery:

$(document).ready(function () {

    $('#forgot_pass_form').validate({ // initialize the plugin
        groups: {  // consolidate messages into one
            names: "uname email"
        },
        rules: {
            uname: {
                require_from_group: [1, ".send"]
            },
            email: {
                require_from_group: [1, ".send"]
            }
        }
    });

    //  for your custom message
    jQuery.extend(jQuery.validator.messages, {
        require_from_group: jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields.")
    });

});

Working Demo: http://jsfiddle.net/sgmvY/1/

---

EDIT: As per Github, there is an open issue with the require_from_group method. Until it's fixed, the developer is recommending this solution below. Since you would manually add the revised method into your code, there is no need to include the additional-methods.js file.

New Working Demo: http://jsfiddle.net/kE7DR/2/

$(document).ready(function () {

    jQuery.validator.addMethod("require_from_group", function (value, element, options) {
        var numberRequired = options[0];
        var selector = options[1];
        var fields = $(selector, element.form);
        var filled_fields = fields.filter(function () {
            // it's more clear to compare with empty string
            return $(this).val() != "";
        });
        var empty_fields = fields.not(filled_fields);
        // we will mark only first empty field as invalid
        if (filled_fields.length < numberRequired && empty_fields[0] == element) {
            return false;
        }
        return true;
        // {0} below is the 0th item in the options field
    }, jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields."));

    $('#forgot_pass_form').validate({ // initialize the plugin
        groups: {
            names: "uname email"
        },
        rules: {
            uname: {
                require_from_group: [1, ".send"]
            },
            email: {
                require_from_group: [1, ".send"]
            }
        }
    });



});