Skip to main content

UI Validations

UI Validation in Plateau Studio allows you to ensure that the data entered by users into various input fields (such as text fields and text areas) meets specific criteria or rules before it's submitted.

To implement UI Validation for your input elements, you need to register these inputs with the validation system. This registration process involves setting the rules prop using a Quick Rules function.

Note

Validations are not applied in readonly and disabled cases of input components.

Props​

rules​

All input components have a rules prop which takes an array of Quick Rule functions below.

In some of the Quick Rule functions, the required values for validation must be entered as parameter. In addition, the message to be displayed when the validation is not successful can be given as a parameter.

required (message?)

minLength (minLenght, message?, options?: { disableNewlineOnCount? })

maxLength (maxLenght, message?, options?: { disableNewlineOnCount? })

email (message?)

iban (message?)

regex (regexVal, message?)

tckn (message?)

IBANNumOnly (message?)

vkn (message?)

  • If you want to change the default message for validation:

  • It can be used by adding global localization under UI Settings in Plateau Studio. Definitions are added in localization using the key values specified below.

    • validationRequiredDefaultMessage
    • validationMinLengthDefaultMessage
    • validationMaxLengthDefaultMessage
    • validationEmailDefaultMessage
    • validationIbanDefaultMessage

Icons_Sample

Usage Example:

[Quick.validation.required(), Quick.validation.minLength(5, 'Enter at least 5 characters', { disableNewlineOnCount = true })]
[Quick.validation.maxLength(100, LR('maxLenghtErrorMessage'))]
[Quick.validation.email('email entry error')]
//Only numbers
myRegex=regex('^[0-9\._,]*$')
[Quick.validation.regex(myRegex,'regexErrorMessage')]
//Only letters and numbers
myRegex=regex('^[a-zA-Z0-9]*$')
[Quick.validation.regex(myRegex,'regexErrorMessage')]
//Escape Turkish characters
myRegex=regex('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$')
[Quick.validation.regex(myRegex,'regexErrorMessage')]
[Quick.validation.tckn('tcknErrorMessage')]
[Quick.validation.vkn('vknErrorMessage')]
[Quick.validation.iban('ibanErrorMessage')]
[Quick.validation.IBANNumOnly('ibanErrorMessage')]

Example Qjson File :

VTextField_Validation_examples

Custom Rules Validation​

In cases where standard validations are not sufficient, or in parts of your page where you validate multiple values and you want to customize, you can create your custom validation by using Custom Rules Validation.

The Custom Validation method is written in the postRender event of the PageComponent.

Custom Validation method example:

function isValidCard(cardNumber: string){
    let isValidLuhn =isValidLuhnNumber(cardNumber);
    if(!isValidLuhn){
        return "lütfen geçerli bir kart numarası giriniz";
    }
}
function isValidLuhnNumber(cardNumber: string): boolean {
    if (!cardNumber || cardNumber.trim() == '') {
        return false;
    }
    cardNumber = cardNumber.replace(/\s/g, "");
    // Tüm karakterlerin sayı olup olmadığını kontrol et
    if (!/^\d+$/.test(cardNumber)) {
        return false;
    }

    const digits = cardNumber.split('').map(Number).reverse();
    const sum = digits.reduce((acc, digit, index) => {
        // Çift pozisyondaki rakamları 2 ile çarp ve basamakları ayır
        if (index % 2 === 1) {
            digit *= 2;
            if (digit > 9) {
                digit -= 9;
            }
        }
        return acc + digit;
    }, 0);

    // Toplam 10'a bölünebiliyorsa geçerlidir
    return sum % 10 === 0;
}
components.creditCard.rules.push(() => isValidCard(components.creditCard.qValue));


Example Qjson File :

VTextField_customValidation
VCombobox_customValidation
Custom_CreditCardNumber_Validation
Datatable_Slots_with_Custom_Validation_Usage

validate-on-blur​

Validate-on-blur delays validation until blurring the event. Type: Boolean Default: false

Validation Methods​

Before taking an action on button click event, you need to check component validation by using Quick methods.

Quick.validateAll​

Quick.validateAll validates all registered inputs in page. Returns true if successful and false if not.

displayAlertBox: Calls alert function in UI configuration (if not registered, calls default alert function) and shows alert box. Default value is true.

quick.Quick.validateAll (displayAlertBox: boolean)

Usage Example: The result returned from the validateAll function is printed in the message.

If the result is success, the page is redirected.

let result = quick.Quick.validateAll()
quick.EM.trace('isValidationSuccess: ' + result)

if(result){
    quick.EM.trace('Redirect to X page..')
    quick.Quick.go('exampleMicroUI/secondExamplePage.js')
}

Quick.validate​

Quick.validate validates given component and all child inputs. Returns true if successful and false if not.

compEID: Component Quick ID that validates. It might be an input or an container component that has inputs.

displayAlertBox: Calls alert function in UI configuration (if not registered, calls default alert function) and shows alert box. Default value is true.

quick.Quick.validate(compEID: string, displayAlertBox: boolean)

Usage of Validate() and ValidateAll() function on VDataTable: Icons_Sample

Note: In VDataTable component, you need to use uniqueSlot prop to validate components.

Example Qjson File :

VDataTable_Validation

Quick.alert​

Quick.alert shows alert component at the top of page. If custom alert box has registered on UI config, shows custom alert component (see Alert Management document).

quick.Quick.alert(title: string)

Usage Example: Quick.alert validates spesific container component and does not show default alert message. If validation fails, shows alert box with given alert message. 

let result = quick.Quick.validate('customerInfoGroupboxQID', false) 

if(!result){
   quick.Quick.alert('Please enter all required customer info fields') 
}

quick.Quick.alert(options: title?: string; text?: string; category?: "Warning" | "Info" | "Success" | "Error"; actionButtons?: IActionButton[]; error?: errorMessage?: string; errorCode?: string; errorSource?: "Page" | ... 1 more ... | "Validation"; ; additionals?: { ...; }; )

Usage Example: 

quick.Quick.alert({
    text: 'The record will be deleted. Do you confirm?',
    category: 'Warning',
    actionButtons: [{ name: 'Confirm', type: 'Confirm', clickEventName: 'onConfirmTask' },
    { name: 'Cancel', type: 'Cancel', clickEventName: 'onCancelTask' }],
    additionals: { props: { timeout: 5000 } }
});

Reset Validation Usage​

While the reset() and resetValidation() functions affect the components it is used on, it also affects the other components in it when used on the VCard and VContainer components.

Quick.Reset​

Quick.Reset function ensures that the set values and validations of the components are cleared.

quick.Quick.reset(compEID: string)

Quick.ResetValidation​

Quick.ResetValidation function only clears validations, it has no effect on other variables.

quick.Quick.resetValidation(compEID: string)

The uses of these two functions are as follows;

quick.Quick.reset('txtName')
quick.Quick.resetValidation('txtName')

Usage of Reset() function on VTextfield and VInlineDatePicker:

Icons_Sample

Usage of ResetValidation() function on VTextfield and VInlineDatePicker:

Icons_Sample

Usage of Reset() function on VCard:

Icons_Sample

Usage of ResetValidation() function on VCard:

Icons_Sample