JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<form class="myform">
    <select name="Input1" id="input1" class="selectgroup">
        <option value="">please select...</option>
        <option value="DO0" opt_numAdults="2" opt_numChilds="0">0</option>
        <option value="DO1" opt_numAdults="2" opt_numChilds="0">1</option>
        <option value="DO2" opt_numAdults="2" opt_numChilds="0">2</option>
        <option value="DO3" opt_numAdults="2" opt_numChilds="0">3</option>
        <option value="DO4" opt_numAdults="2" opt_numChilds="0">4</option>
        <option value="DO5" opt_numAdults="2" opt_numChilds="0">5</option>
    </select>
    <br/>
    <select name="Input2" id="input2"  class="selectgroup">
        <option value="">please select...</option>
        <option value="FP0" opt_numAdults="2" opt_numChilds="1">0</option>
        <option value="FP1" opt_numAdults="2" opt_numChilds="1">1</option>
        <option value="FP2" opt_numAdults="2" opt_numChilds="1">2</option>
        <option value="FP3" opt_numAdults="2" opt_numChilds="1">3</option>
        <option value="FP4" opt_numAdults="2" opt_numChilds="1">4</option>
        <option value="FP5" opt_numAdults="2" opt_numChilds="1">5</option>
    </select>
    <br/>
    <button type="submit" id="mybutton">Go</button>
</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

var formSubmitting = false;
$(document).ready(function () {
		$('.myform').submit(function(e){
			e.preventDefault();
      formSubmitting = true;
    });
    $('.myform').validate({ // initialize the plugin
        rules: {
            Input1: {
                require_from_group: [1, ".selectgroup"]
            },
            Input2: {
                require_from_group: [1, ".selectgroup"]
            }
        },
        groups: {
            group: "Input1 Input2"
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});

console.log($('#input1').val(), $('#input2').val());

$( window ).unload(function() {
  if (formSubmitting) {
    return undefined;
  }
  if($('#input1').val() === '' && $('#input2').val() === '' ){
    return "Handler for .unload() called.";
  }       
});