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.
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.
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
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
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.
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"]
}
}
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"]
}
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With