Media WebUI

isChecked ()

Determines whether all checkboxes or radio buttons are checked within the set of matched elements.

Returns - Boolean.
Markup
<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>
Script
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.

Returns - Boolean.
Argument
Type
Description
dependsOnSelector
String
A valid CSS selector expression.
dependsOnRegExp
Regular Expression
A valid regular expression.
Markup
<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>
Script
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.

Returns - Boolean.
Argument
Type
Description
regExp
Regular Expression
A valid regular expression.
allowEmpty
Boolean
Whether to allow an empty value.
Markup
<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>
Script
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.

Returns - Boolean.
Argument
Type
Description
regExp
Regular Expression
A valid regular expression.
allowEmpty
Boolean
Whether to allow an empty value.
dependsOnSelector
String
A valid CSS selector expression.
dependsOnRegExp
Regular Expression
A valid regular expression.
Markup
<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>
Script
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.

Returns - Boolean.
Argument
Type
Description
lowerLimit
Numeric
A valid numeric value.
upperLimit
Numeric
A valid numeric value.
allowEmpty
Boolean
Whether to allow an empty value.
Markup
<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>
Script
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.

Returns - Boolean.
Argument
Type
Description
lowerLimit
Numeric
A valid numeric value.
upperLimit
Numeric
A valid numeric value.
allowEmpty
Boolean
Whether to allow an empty value.
dependsOnSelector
String
A valid CSS selector expression.
dependsOnRegExp
Regular Expression
A valid regular expression.
Markup
<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>
Script
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.

Returns - Boolean.
Argument
Type
Description
lowerLimit
Integer
A valid integer value.
upperLimit
Integer
A valid integer value.
allowEmpty
Boolean
Whether to allow an empty value.
Markup
<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>
Script
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.

Returns - Boolean.
Argument
Type
Description
lowerLimit
Integer
A valid integer value.
upperLimit
Integer
A valid integer value.
allowEmpty
Boolean
Whether to allow an empty value.
dependsOnSelector
String
A valid CSS selector expression.
dependsOnRegExp
Regular Expression
A valid regular expression.
Markup
<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>
Script
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.

Returns - Boolean.
Argument
Type
Description
format
String
A valid datetime format.
allowEmpty
Boolean
Whether to allow an empty value.
Markup
<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>
Script
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.

Returns - Boolean.
Argument
Type
Description
format
String
A valid datetime format.
allowEmpty
Boolean
Whether to allow an empty value.
Markup
<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>
Script
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.

Returns - Boolean.
Argument
Type
Description
format
String
A valid datetime format.
allowEmpty
Boolean
Whether to allow an empty value.
Markup
<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>
Script
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.

Returns - Boolean.
Argument
Type
Description
format
String
A valid datetime format.
allowEmpty
Boolean
Whether to allow an empty value.
Markup
<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>
Script
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.

Returns - Boolean.
Argument
Type
Description
minDateTimeString
String
A valid datetime string.
maxDateTimeString
String
A valid datetime string.
format
String
A valid datetime format.
allowEmpty
Boolean
Whether to allow an empty value.
Markup
<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>
Script
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("");
    }
  });

});