Gets the maximum length of the control.
var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
console.log(ctrl.maxLength);
The maxLength property is used to set the maximum number of characters that can be entered into the control.
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.
var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
// Allow only 120 characters
ctrl.maxLength = 120;
Gets the pattern attribute of the input control.
The pattern attribute is used to specify a regular expression that the input value must match.
const pattern = ix.api.dom.getControl("<GUID>").pattern;
Sets the pattern attribute for the input control.
The pattern attribute is a regular expression that the input value is checked against. This provides a way to enforce specific patterns to the input value.
If the pattern does not match the pattern defined within the server-side validation, the server-side validation will take precedence. This ensures that the input value meets the server-side validation rules even if it passes the client-side pattern check.
// Set a simple custom pattern to only allow numbers
var ctrl = ix.api.dom.getControl("<GUID>");
ctrl.pattern = "[0-9]*";
Gets the control's required state.
var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
console.log(ctrl.required);
Sets the control's required state
var ctrl = ix.api.dom.getControl("<ELEMENT-GUID>");
ctrl.required = false;
Asynchronously checks the validity of the control.
This method checks whether the current value of the control meets the validation rules defined for it.
invalid CSS class and the aria-invalid attribute from the control.invalid CSS class and sets the aria-invalid attribute to true.A Promise that resolves to a ValidationInfo object. The object contains the validation status (valStatus), the validation message (valMessage), and the validation type (valType).
// 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'
}
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.
The current value of the control, or an empty string if no value is set.
// 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
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.
The value to set.
Optional settings: { Optional settings. Determines when to trigger a 'change' event.
// 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" });
Transform the text to upper- or lowercase.
Either lowercase or uppercase - for other mode settings nothing will be changed
var ctrl = ix.api.dom.getControl("<GUID>");
// Transform text to uppercase
ctrl.textTransform("uppercase");
// Transform text to lowercase
ctrl.textTransform("lowercase");
Represents a text input control.
It is a control that allows users to input and edit text. This control also supports validation of the input text to ensure that it meets certain criteria (e.g., length, format).