Class Phone

Gets the maximum length of the control.

Example

var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
console.log(ctrl.maxLength);
Copy

The maxLength property is used to set the maximum number of characters that can be entered into the control.

• If the value exceeds the specified length, the control will be marked as invalid.

Note

The maxLength property is used for client-side validation only. To enforce a maximum length on the server side, you must set up the corresponding validation rule within the controls configuration.

Example

var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
// Allow only 120 characters
ctrl.maxLength = 120;
Copy

Gets the control's required state.

Example

var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
console.log(ctrl.required);
Copy

Sets the control's required state

Example

var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
ctrl.required = false;
Copy

Asynchronously checks the validity of the control.

This method checks whether the current value of the control meets the validation rules defined for it.

• If the value is valid, it removes the invalid CSS class and the aria-invalid attribute from the control.
• If the value is not valid, it adds the invalid CSS class and sets the aria-invalid attribute to true.

Example

// Get the control by its element GUID and check its validity
const validityResult = await ix.api.dom.getControl("<GUID>").checkValidity();

// Example of `validityResult` when the field is required but not filled:
ValidationInfo {
  valStatus: false,
  valMessage: 'Please make a selection',
  valType: 'required'
}
Copy

Retrieves the current value of the control.

This method returns the current value of the control as a string. If the control does not have a value, it returns an empty string.

Example

// Get the control by its element GUID and retrieve the value
const value = ix.api.dom.getControl("<ELEMENT-GUID>").getValue();
console.log(value); // Outputs the value to the console
Copy

Sets a value for the control and optionally triggers a change event.

This method allows you to programmatically set the value of the control. If the value has changed and the yellowFade setting is enabled, the control will visually indicate the change. If the triggerOnchange setting is set to "always" or "strict" and the value has changed, the control will dispatch a change event.

Example

// Get the control by its element GUID and set the value
var element = ix.api.dom.getControl("<ELEMENT-GUID>");
element.setValue("New Value", { triggerOnchange: "always" });
Copy