Media WebUI

isChecked ()

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

Returns - Boolean.
<div class="row gap-md pad-sm align-items-center">
  <div class="col-fixed">
    <div class="checkbox">
      <input type="checkbox" value="" name="checkGroup1" id="checkbox1" checked />
      <label for="checkbox1"></label>
    </div> 
  </div>
  <div class="col">	
    <div class="checkbox">
      <input type="checkbox" value="" name="checkGroup1" id="checkbox2" />
      <label for="checkbox2"></label>
    </div>
  </div>
</div>
HTML
webui.ready( () => {

  let chk1Checked = ui("#checkbox1").isChecked();
  let groupChecked = ui("[name=checkGroup1]").isChecked();

});
JS

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.
<div class="row gap-md pad-sm align-items-center">
  <div class="col-fixed">
    <div class="checkbox">
      <input type="checkbox" value="" id="checkboxDependsOn" />
      <label for="checkboxDependsOn"></label>
    </div> 
  </div>
  <div class="col-fixed">	
    <div class="checkbox">
      <input type="checkbox" value="" name="checkGroup1" id="checkbox1" checked />
      <label for="checkbox1"></label>
    </div>
  </div>
  <div class="col">	
    <div class="checkbox">
      <input type="checkbox" value="" name="checkGroup1" id="checkbox2" />
      <label for="checkbox2"></label>
    </div>
  </div>
</div>
HTML
webui.ready( () => {

  let chk1Checked = ui("#checkbox1").isChecked("#checkboxDependsOn", ui.TRUE_VALUE);
  let groupChecked = ui("[name=checkGroup1]").isChecked("#checkboxDependsOn", ui.TRUE_VALUE);

});
JS

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.
<div class="row gap-md align-items-center">
  <div class="col-fixed">
    <label>String</label>
  </div>
  <div class="col">
    <input type="text" class="input input-sm rounded-sm" id="textbox1" data-validation-text="message1" />	
    <label id="message1" class="control-message text-sm text-italic"> </label>
  </div>
</div>
HTML
webui.ready( () => {

  let txt1Valid = ui("#textbox1").hasConformingString(ui.BASIC_STRING, false);

  if (!txt1Valid) {
    ui("#textbox1").setControlState("", "control-danger", "Please enter a basic string", false, false);
  }
  else {
    ui("#textbox1").setControlState("control-danger", "control-success");
  }

});
JS

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.
<div class="row gap-md align-items-center">
  <div class="col-fixed">
    <div class="checkbox">
      <input type="checkbox" value="" id="checkboxDependsOn" />
      <label for="checkboxDependsOn"></label>
    </div>	
  </div>
  <div class="col-fixed">
    <label>String</label>
  </div>
  <div class="col">
    <input type="text" class="input input-sm rounded-sm" id="textbox1" data-validation-text="message1" />	
    <label id="message1" class="control-message text-sm text-italic"> </label>
  </div>
</div>
HTML
webui.ready( () => {

  let txt1Valid = ui("#textbox1").hasConformingString(ui.BASIC_STRING, false, "#checkboxDependsOn", ui.TRUE_VALUE);

  if (!txt1Valid) {
    ui("#textbox1").setControlState("", "control-danger", "Please enter a basic string", false, false);
  }
  else {
    ui("#textbox1").setControlState("control-danger", "control-success");
  }

});
JS

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.
<div class="row gap-md align-items-center">
  <div class="col-fixed">
    <label>String</label>
  </div>
  <div class="col">
    <input type="text" class="input input-sm rounded-sm" id="textbox1" data-validation-text="message1" />	
    <label id="message1" class="control-message text-sm text-italic"> </label>
  </div>
</div>
HTML
webui.ready( () => {

  let txt1Valid = ui("#textbox1").hasNumericInRange(10.5, 20.5, false);

  if (!txt1Valid) {
    ui("#textbox1").setControlState("", "control-danger", "Please enter a valid number between 10.5 and 20.5", false, false);
  }
  else {
    ui("#textbox1").setControlState("control-danger", "control-success");
  }

});
JS

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.
<div class="row gap-md align-items-center">
  <div class="col-fixed">
    <div class="checkbox">
      <input type="checkbox" value="" id="checkboxDependsOn" />
      <label for="checkboxDependsOn"></label>
    </div>	
  </div>
  <div class="col-fixed">
    <label>String</label>
  </div>
  <div class="col">
    <input type="text" class="input input-sm rounded-sm" id="textbox1" data-validation-text="message1" />	
    <label id="message1" class="control-message text-sm text-italic"> </label>
  </div>
</div>
HTML
webui.ready( () => {

  let txt1Valid = ui("#textbox1").hasNumericInRange(10.5, 20.5, false, "#checkboxDependsOn", ui.TRUE_VALUE);

  if (!txt1Valid) {
    ui("#textbox1").setControlState("", "control-danger", "Please enter a valid number between 10.5 and 20.5", false, false);
  }
  else {
    ui("#textbox1").setControlState("control-danger", "control-success");
  }

});
JS

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.
<div class="row gap-md align-items-center">
  <div class="col-fixed">
    <label>String</label>
  </div>
  <div class="col">
    <input type="text" class="input input-sm rounded-sm" id="textbox1" data-validation-text="message1" />	
    <label id="message1" class="control-message text-sm text-italic"> </label>
  </div>
</div>
HTML
webui.ready( () => {

  let txt1Valid = ui("#textbox1").hasIntegerInRange(10, 20, false);

  if (!txt1Valid) {
    ui("#textbox1").setControlState("", "control-danger", "Please enter a valid integer between 10 and 20", false, false);
  }
  else {
    ui("#textbox1").setControlState("control-danger", "control-success");
  }

});
JS

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.
<div class="row gap-md align-items-center">
  <div class="col-fixed">
    <div class="checkbox">
      <input type="checkbox" value="" id="checkboxDependsOn" />
      <label for="checkboxDependsOn"></label>
    </div>	
  </div>
  <div class="col-fixed">
    <label>String</label>
  </div>
  <div class="col">
    <input type="text" class="input input-sm rounded-sm" id="textbox1" data-validation-text="message1" />	
    <label id="message1" class="control-message text-sm text-italic"> </label>
  </div>
</div>
HTML
webui.ready( () => {

  let txt1Valid = ui("#textbox1").hasIntegerInRange(10, 20, false, "#checkboxDependsOn", ui.TRUE_VALUE);

  if (!txt1Valid) {
    ui("#textbox1").setControlState("", "control-danger", "Please enter a valid number between 10.5 and 20.5", false, false);
  }
  else {
    ui("#textbox1").setControlState("control-danger", "control-success");
  }

});
JS

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.
<div class="row gap-md align-items-center">
  <div class="col-fixed">
    <label>String</label>
  </div>
  <div class="col">
    <input type="text" class="input input-sm rounded-sm" id="textbox1" data-validation-text="message1" />	
    <label id="message1" class="control-message text-sm text-italic"> </label>
  </div>
</div>
HTML
webui.ready( () => {

  let txt1Valid = ui("#textbox1").hasValidDateTime("DD/MM/YYYY hh:mm", false);

  if (!txt1Valid) {
    ui("#textbox1").setControlState("", "control-danger", "Please enter a valid datetime in the format DD/MM/YYYY hh:mm", false, false);
  }
  else {
    ui("#textbox1").setControlState("control-danger", "control-success");
  }

});
JS

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.
<div class="row gap-md align-items-center">
  <div class="col-fixed">
    <label>String</label>
  </div>
  <div class="col">
    <input type="text" class="input input-sm rounded-sm" id="textbox1" data-validation-text="message1" />	
    <label id="message1" class="control-message text-sm text-italic"> </label>
  </div>
</div>
HTML
webui.ready( () => {

  let txt1Valid = ui("#textbox1").hasPastDateTime("DD/MM/YYYY hh:mm", false);

  if (!txt1Valid) {
    ui("#textbox1").setControlState("", "control-danger", "Please enter a retrospective datetime in the format DD/MM/YYYY hh:mm", false, false);
  }
  else {
    ui("#textbox1").setControlState("control-danger", "control-success");
  }

});
JS

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.
<div class="row gap-md align-items-center">
  <div class="col-fixed">
    <label>String</label>
  </div>
  <div class="col">
    <input type="text" class="input input-sm rounded-sm" id="textbox1" data-validation-text="message1" />	
    <label id="message1" class="control-message text-sm text-italic"> </label>
  </div>
</div>
HTML
webui.ready( () => {

  let txt1Valid = ui("#textbox1").hasPresentDateTime("DD/MM/YYYY hh:mm", false);

  if (!txt1Valid) {
    ui("#textbox1").setControlState("", "control-danger", "Please enter a current datetime in the format DD/MM/YYYY hh:mm", false, false);
  }
  else {
    ui("#textbox1").setControlState("control-danger", "control-success");
  }

});
JS

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.
<div class="row gap-md align-items-center">
  <div class="col-fixed">
    <label>String</label>
  </div>
  <div class="col">
    <input type="text" class="input input-sm rounded-sm" id="textbox1" data-validation-text="message1" />	
    <label id="message1" class="control-message text-sm text-italic"> </label>
  </div>
</div>
HTML
webui.ready( () => {

  let txt1Valid = ui("#textbox1").hasFutureDateTime("DD/MM/YYYY hh:mm", false);

  if (!txt1Valid) {
    ui("#textbox1").setControlState("", "control-danger", "Please enter a future datetime in the format DD/MM/YYYY hh:mm", false, false);
  }
  else {
    ui("#textbox1").setControlState("control-danger", "control-success");
  }

});
JS

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.
<div class="row gap-md align-items-center">
  <div class="col-fixed">
    <label>String</label>
  </div>
  <div class="col">
    <input type="text" class="input input-sm rounded-sm" id="textbox1" data-validation-text="message1" />	
    <label id="message1" class="control-message text-sm text-italic"> </label>
  </div>
</div>
HTML
webui.ready( () => {

  let txt1Valid = ui("#textbox1").hasDateTimeInRange("17/09/2018 12:00", "17/09/2018 13:30", "DD/MM/YYYY hh:mm", false);

  if (!txt1Valid) {
    ui("#textbox1").setControlState("", "control-danger", "Please enter a datetime between 17/09/2018 12:00 and 17/09/2018 13:30", false, false);
  }
  else {
    ui("#textbox1").setControlState("control-danger", "control-success");
  }

});
JS