isChecked ()
Determines whether all checkboxes or radio buttons are checked within the set of matched elements.
<div class="area"> <div class="flex-row gap-horizontal-sm"> <div class="checkbox"> <input type="checkbox" value="" name="checkGroup1" id="checkbox1" checked /> <label for="checkbox1"></label> </div> <div class="checkbox"> <input type="checkbox" value="" name="checkGroup1" id="checkbox2" /> <label for="checkbox2"></label> </div> </div> </div>
webui.ready(function() { var isChecked = ui("#checkbox1").isChecked(); var areAllChecked = ui("[name=checkGroup1]").isChecked(); });
isChecked (dependsOnSelector, dependsOnRegExp)
Determines whether all checkboxes or radio buttons are checked within the set of matched elements, depending on whether the specified depentant control has a value or property matching the specified dependant regular expression.
<div class="area"> <div class="flex-row gap-horizontal-sm"> <div class="checkbox"> <input type="checkbox" value="" id="dependantElement" /> <label for="dependantElement"></label> </div> <div class="checkbox"> <input type="checkbox" value="" name="checkGroup1" id="checkbox1" checked /> <label for="checkbox1"></label> </div> <div class="checkbox"> <input type="checkbox" value="" name="checkGroup1" id="checkbox2" /> <label for="checkbox2"></label> </div> </div> </div>
webui.ready(function() { var isChecked = ui("#checkbox1").isChecked("#dependantElement", ui.TRUE_VALUE); var areAllChecked = ui("[name=checkGroup1]").isChecked("#dependantElement", ui.TRUE_VALUE); });
hasConformingString (regExp, allowEmpty)
Determines whether the value of all controls within the set of matched elements matches the regular expression, and optionally allows an empty value.
<div class="area"> <div class="flex-row flex-nowrap flex-items-center gap-horizontal-sm" id="inputGroup1"> <label class="form-label-sm">String</label> <input type="text" class="input input-sm width-xl rounded-sm" id="input1" /> <label class="form-label-sm" id="message1"></label> </div> </div>
webui.ready(function() { ui("#input1").blur( function() { if (!ui("#input1").hasConformingString(ui.BASIC_STRING, false)) { ui("#inputGroup1").setState("", "control-group-danger", true); ui("#message1").text("Validation message"); } else { ui("#inputGroup1").setState("", "control-group-success", true); ui("#message1").text(""); } }); });
hasConformingString (regExp, allowEmpty, dependsOnSelector, dependsOnRegExp)
Determines whether the value of all controls within the set of matched elements matches the regular expression, and optionally allows an empty value, depending on whether the specified depentant control has a value or property matching the specified dependant regular expression.
<div class="area"> <div class="flex-row flex-nowrap flex-items-center gap-horizontal-sm" id="inputGroup1"> <label class="form-label-sm">String</label> <input type="text" class="input input-sm width-xl rounded-sm" id="input1" /> <div class="checkbox"> <input type="checkbox" value="" id="dependantElement" /> <label for="dependantElement"></label> </div> <label class="form-label-sm" id="message1"></label> </div> </div>
webui.ready(function() { ui("#input1").blur( function() { if (!ui("#input1").hasConformingString(ui.BASIC_STRING, false, "#dependantElement", ui.TRUE_VALUE)) { ui("#inputGroup1").setState("", "control-group-danger", true); ui("#message1").text("Validation message"); } else { ui("#inputGroup1").setState("", "control-group-success", true); ui("#message1").text(""); } }); });
hasNumericInRange (lowerLimit, upperLimit, allowEmpty)
Determines whether the value of all controls within the set of matched elements is a valid numeric value within the specified lower and upper limit, and optionally allows an empty value.
<div class="area"> <div class="flex-row flex-nowrap flex-items-center gap-horizontal-sm" id="inputGroup1"> <label class="form-label-sm">Numeric</label> <input type="text" class="input input-sm width-xl rounded-sm" id="input1" /> <label class="form-label-sm" id="message1"></label> </div> </div>
webui.ready(function() { ui("#input1").blur( function() { if (!ui("#input1").hasNumericInRange(10, 19.65, false)) { ui("#inputGroup1").setState("", "control-group-danger", true); ui("#message1").text("Validation message"); } else { ui("#inputGroup1").setState("", "control-group-success", true); ui("#message1").text(""); } }); });
hasNumericInRange (lowerLimit, upperLimit, allowEmpty, dependsOnSelector, dependsOnRegExp)
Determines whether the value of all controls within the set of matched elements is a valid numeric value within the specified lower and upper limit, and optionally allows an empty value, depending on whether the specified depentant control has a value or property matching the specified dependant regular expression.
<div class="area"> <div class="flex-row flex-nowrap flex-items-center gap-horizontal-sm" id="inputGroup1"> <label class="form-label-sm">Numeric</label> <input type="text" class="input input-sm width-xl rounded-sm" id="input1" /> <div class="checkbox"> <input type="checkbox" value="" id="dependantElement" /> <label for="dependantElement"></label> </div> <label class="form-label-sm" id="message1"></label> </div> </div>
webui.ready(function() { ui("#input1").blur( function() { if (!ui("#input1").hasNumericInRange(10, 19.65, false, "#dependantElement", ui.TRUE_VALUE)) { ui("#inputGroup1").setState("", "control-group-danger", true); ui("#message1").text("Validation message"); } else { ui("#inputGroup1").setState("", "control-group-success", true); ui("#message1").text(""); } }); });
hasIntegerInRange (lowerLimit, upperLimit, allowEmpty)
Determines whether the value of all controls within the set of matched elements is a valid integer value within the specified lower and upper limit, and optionally allows an empty value.
<div class="area"> <div class="flex-row flex-nowrap flex-items-center gap-horizontal-sm" id="inputGroup1"> <label class="form-label-sm">Integer</label> <input type="text" class="input input-sm width-xl rounded-sm" id="input1" /> <label class="form-label-sm" id="message1"></label> </div> </div>
webui.ready(function() { ui("#input1").blur( function() { if (!ui("#input1").hasIntegerInRange(10, 20, false)) { ui("#inputGroup1").setState("", "control-group-danger", true); ui("#message1").text("Validation message"); } else { ui("#inputGroup1").setState("", "control-group-success", true); ui("#message1").text(""); } }); });
hasIntegerInRange (lowerLimit, upperLimit, allowEmpty, dependsOnSelector, dependsOnRegExp)
Determines whether the value of all controls within the set of matched elements is a valid integer value within the specified lower and upper limit, and optionally allows an empty value, depending on whether the specified depentant control has a value or property matching the specified dependant regular expression.
<div class="area"> <div class="flex-row flex-nowrap flex-items-center gap-horizontal-sm" id="inputGroup1"> <label class="form-label-sm">Integer</label> <input type="text" class="input input-sm width-xl rounded-sm" id="input1" /> <div class="checkbox"> <input type="checkbox" value="" id="dependantElement" /> <label for="dependantElement"></label> </div> <label class="form-label-sm" id="message1"></label> </div> </div>
webui.ready(function() { ui("#input1").blur( function() { if (!ui("#input1").hasIntegerInRange(10, 20, false, "#dependantElement", ui.TRUE_VALUE)) { ui("#inputGroup1").setState("", "control-group-danger", true); ui("#message1").text("Validation message"); } else { ui("#inputGroup1").setState("", "control-group-success", true); ui("#message1").text(""); } }); });
hasValidDateTime (format, allowEmpty)
Determines whether the value of all controls within the set of matched elements is a valid datetime value for the specified format, and optionally allows an empty value.
<div class="area"> <div class="flex-row flex-nowrap flex-items-center gap-horizontal-sm" id="inputGroup1"> <label class="form-label-sm">Datetime</label> <input type="text" class="input input-sm width-xl rounded-sm" id="input1" /> <label class="form-label-sm" id="message1"></label> </div> </div>
webui.ready(function() { ui("#input1").blur( function() { if (!ui("#input1").hasValidDateTime("DD/MM/YYYY hh:mm", false)) { ui("#inputGroup1").setState("", "control-group-danger", true); ui("#message1").text("Validation message"); } else { ui("#inputGroup1").setState("", "control-group-success", true); ui("#message1").text(""); } }); });
hasPastDateTime (format, allowEmpty)
Determines whether the value of all controls within the set of matched elements is a valid past datetime value for the specified format, and optionally allows an empty value.
<div class="area"> <div class="flex-row flex-nowrap flex-items-center gap-horizontal-sm" id="inputGroup1"> <label class="form-label-sm">Datetime</label> <input type="text" class="input input-sm width-xl rounded-sm" id="input1" /> <label class="form-label-sm" id="message1"></label> </div> </div>
webui.ready(function() { ui("#input1").blur( function() { if (!ui("#input1").hasPastDateTime("DD/MM/YYYY hh:mm", false)) { ui("#inputGroup1").setState("", "control-group-danger", true); ui("#message1").text("Validation message"); } else { ui("#inputGroup1").setState("", "control-group-success", true); ui("#message1").text(""); } }); });
hasPresentDateTime (format, allowEmpty)
Determines whether the value of all controls within the set of matched elements is a valid present datetime value for the specified format, and optionally allows an empty value.
<div class="area"> <div class="flex-row flex-nowrap flex-items-center gap-horizontal-sm" id="inputGroup1"> <label class="form-label-sm">Datetime</label> <input type="text" class="input input-sm width-xl rounded-sm" id="input1" /> <label class="form-label-sm" id="message1"></label> </div> </div>
webui.ready(function() { ui("#input1").blur( function() { if (!ui("#input1").hasPresentDateTime("DD/MM/YYYY hh:mm", false)) { ui("#inputGroup1").setState("", "control-group-danger", true); ui("#message1").text("Validation message"); } else { ui("#inputGroup1").setState("", "control-group-success", true); ui("#message1").text(""); } }); });
hasFutureDateTime (format, allowEmpty)
Determines whether the value of all controls within the set of matched elements is a valid future datetime value for the specified format, and optionally allows an empty value.
<div class="area"> <div class="flex-row flex-nowrap flex-items-center gap-horizontal-sm" id="inputGroup1"> <label class="form-label-sm">Datetime</label> <input type="text" class="input input-sm width-xl rounded-sm" id="input1" /> <label class="form-label-sm" id="message1"></label> </div> </div>
webui.ready(function() { ui("#input1").blur( function() { if (!ui("#input1").hasFutureDateTime("DD/MM/YYYY hh:mm", false)) { ui("#inputGroup1").setState("", "control-group-danger", true); ui("#message1").text("Validation message"); } else { ui("#inputGroup1").setState("", "control-group-success", true); ui("#message1").text(""); } }); });
hasDateTimeInRange (minDateTimeString, maxDateTimeString, format, allowEmpty)
Determines whether the value of all controls within the set of matched elements is a valid datetime value within a min and max value for the specified format, and optionally allows an empty value.
<div class="area"> <div class="flex-row flex-nowrap flex-items-center gap-horizontal-sm" id="inputGroup1"> <label class="form-label-sm">Datetime</label> <input type="text" class="input input-sm width-xl rounded-sm" id="input1" /> <label class="form-label-sm" id="message1"></label> </div> </div>
webui.ready(function() { ui("#input1").blur( function() { if (!ui("#input1").hasDateTimeInRange("17/09/2018 12:00", "17/09/2018 13:30", "DD/MM/YYYY hh:mm", false)) { ui("#inputGroup1").setState("", "control-group-danger", true); ui("#message1").text("Validation message"); } else { ui("#inputGroup1").setState("", "control-group-success", true); ui("#message1").text(""); } }); });