JSFiddle - React, Tailwind, and code Playground

by ericjohannsen

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form id="idv_Form" action="javascript:alert('Submitted');">
    <input type="text" id="vmSearch" name="search" />
    <input type="checkbox" class="alpha" id="a1" name="a1" /><label for="a1">A1</label>
    <input type="checkbox" class="alpha" id="a2" name="a2" /><label for="a2">A2</label>
    <input type="checkbox" class="beta" id="b1" name="b1" /><label for="b1">B1</label>
    <input type="checkbox" class="beta" id="b2" name="b2" /><label for="b2">B2</label>
    <input type="submit" />
</form>
<div id="vErr"></div>

JavaScript

$.validator.addMethod('rule_alpha', function (value) {
    return $('.alpha:checked').size() > 0 || $.trim($('#vmSearch').val()).length > 0;
}, 'Please select at least one alpha or search term.');

$.validator.addMethod('rule_beta', function (value) {
    return $('.beta:checked').size() > 0;
}, 'Please select at least one beta.');

$('#idv_Form').validate({
    rules: {
        vmSearch: { rule_alpha: true },        
        a1: { rule_alpha: true },        
        a2: { rule_alpha: true },
        b1: { rule_beta: true },        
        b2: { rule_beta: true }  
    },
    submitHandler: function(f) {
        vErr.hide();
        alert('Submitted via submit handler');
        f.submit();
    },
    invalidHandler: function(f) {
        alert('Invalid handler called.');
        vErr.html(''); // Clear any old message
        vErr.show();
    },
    errorLabelContainer: "#vErr"
});