Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 552
bigZero Avatar asked Feb 28 '13 13:02

bigZero


People also ask

What is empty field validation with jQuery?

Here we are going to discuss empty field validation with jQuery. Empty field validation is the most basic type of validation. jQuery makes it easy to detect empty fields and also returns automatic error messages on the user screen.

How many fields are required for jQuery validate plugin?

jQuery Validate plugin, one out of two fields is required - Stack Overflow I have a form with 2 fields; mobile no. and telephone no. at least 1 of the fields has to be filled in, but both can also be filled. I need jquery validate to throw an error if none of them are f... Stack Overflow About Products For Teams

What are the errors with jQuery validate plugin groups?

3 jQuery Validate Plugin groups: Error message shows for last invalid field instead of first invalid field in the group 2 jquery validate css not applying to one form field 0 Interaction between jQuery validate plugin and form field events 2 Validate jQuery plugin, field not required 1 JQuery Validate - ignoring the required rule

How to validate a form with jQuery?

jQuery provides the plugin for validation for a library of rules for validations to help you validate your form elements, by selecting your complete form. All the creator has to do to achieve nearly perfect validations and to use this jQuery validation plugin, is to import the file into your HTML code and the script and use it, simple.


1 Answers

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"]
            }
        }
    });



});
like image 167
Sparky Avatar answered Sep 22 '22 18:09

Sparky