HTML5 Constraint Validation #3

by 2Yootz

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div>
In this example we have some optional fields that have requirements between them.
</div>
<br />
<br />


<h2 class="pageh2">Settings</h2>
<br /><br />


<div class="div-outline-rounded" style="height:300px;margin-left:auto;margin-right:auto;">
    <fieldset>
        <legend>Global</legend>
        <div style="padding-bottom:10px;">Conditions will apply to all workstations utilizing this queue system:</div>

      
        <form class="form-inline" id="frmSettings">
            <section>
                <h5><b>Daily Cutoff:</b></h5>
                <div class="form-group">
                    <label class="sr-only" for="txtCutoffTime_f163ce4741cf40fca9310f704918fcda">Cutoff Time:</label>
                    <div class="input-group">
                        <input class="form-control" id="txtCutoffTime_f163ce4741cf40fca9310f704918fcda" name="CutoffTime" type="text" value="03:00 PM" />
                        <div class="input-group-addon timeaddon">
                            <span class="glyphicon glyphicon-time"></span>
                        </div>
                    </div>
                </div>
                <br />
                <div class="form-group" style="margin-top:10px;">
                    <label class="sr-only" for="txtCutoffDate_f163ce4741cf40fca9310f704918fcda">Cutoff Date:</label>
                    <div class="input-group">
                        <input class="form-control" id="txtCutoffDate_f163ce4741cf40fca9310f704918fcda" name="CutoffDate" type="text" value="" />
                        <div class="input-group-addon dateaddon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </div>
                    </div>
                </div>
            </section>
            <br />
           ...

JavaScript

$("#btnSettingsUpdate").click(function (e) {
            var frm = $("#frmSettings");
            
            var date=$("input[name='CutoffDate']");
            var time=$("input[name='CutoffTime']"); 
            
            time[0].setCustomValidity("");
            if((date.val() != "") && (time.val() == "")) {
               time[0].setCustomValidity("This field is required when a date is selected");
            }

            var formValid = frm.get(0).checkValidity();
            if (formValid) {
                e.preventDefault();

                //ajax
            }
        });