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 email input control.
The pattern attribute is used to specify a regular expression that the email input value must match.
const pattern = ix.api.dom.getControl("<GUID>").pattern;
Sets the pattern attribute for the email input control.
The pattern attribute is a regular expression that the email input value is checked against. This provides a way to enforce specific patterns, like email formats, 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 check for email format
var ctrl = ix.api.dom.getControl("<GUID>");
ctrl.pattern = "\\S+@\\S+\\.\\S+";
// This pattern checks for:
// - Any non-whitespace character (`\\S`) one or more times (`+`)
// - Followed by an `@`
// - Followed by any non-whitespace character one or more times
// - Followed by a `.`
// - And finally followed by any non-whitespace character one or more times.
// This ensures that the input value is in a basic email format.
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" });
Represents an edit control for email addresses.
This control is used to input and edit email addresses in a user-friendly manner. It can handle various email formats and provides validation to ensure that the email address is correctly formatted. This makes it easier for users to input and verify email data.