JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<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 send" 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 send" id="uname"
name="uname" />
</div>
<div class="send_row send_submitforgotuser">
<input type="submit" value="Submit" />
</div>
</fieldset>
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
CSS
#docs {
display: block;
position: fixed;
bottom: 0;
right: 0;
}
JavaScript
$(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"]
}
}
});
});