JSFiddle - React, Tailwind, and code Playground

by Fu-Ching Hsiao

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script>
<form id="myform">
        <input name="start" type="text" id="start" /><p>
    <input name="end" type="text" id="end"/>
<p>
    <input type="submit" />
</form>

JavaScript

$(document).ready(function () {    
    var start = {
        depends: function() {
            return $("#start").val().length
        }
    };
    var end = {       
        depends : function() {
            return $("#end").val().length
        }                    
    };
    
var form = $('#myform').validate({
        rules: {
            end: {
                required : start
            },
            start: {
                required: end       
            }
        },
        messages: {
            end: {
              required: 'end必填',
            },
              start :{
                   required: 'start必填',
              }

          }
    });
    $("#start,#end").keyup(function() {
        if( $('#end').val() === "" &&   $("#start").val() === ""){
            form.showErrors({ "end": null ,"start" : null });
        }
      });
});