Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/UI_Components/dxValidator/Configuration/ below:

Vue Validator Props | Vue Documentation

An object defining configuration properties for the Validator UI component.

An object that specifies what and when to validate, and how to apply the validation result.

This property should be specified when you cannot associate the Validator UI component with an editor, for instance, when you use custom editors or a validated value is a sequence of several DevExtreme editor values. Refer to the Validate a Custom Value topic for more details.

• Data Validation

Specifies the global attributes to be attached to the UI component's container element.

Selector: DxElementAttr

Default Value: {}

$(function(){
    $("#validatorContainer").dxValidator({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

<dx-validator ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-validator>

import { DxValidatorModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxValidatorModule
    ],
    // ...
})

<template>
    <DxValidator ...
        :element-attr="validatorAttributes">
    </DxValidator>
</template>

<script>
import DxValidator from 'devextreme-vue/validator';

export default {
    components: {
        DxValidator
    },
    data() {
        return {
            validatorAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

import React from 'react';

import Validator from 'devextreme-react/validator';

class App extends React.Component {
    validatorAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Validator ...
                elementAttr={this.validatorAttributes}>
            </Validator>
        );
    }
}
export default App;

Specifies the UI component's height.

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

Specifies the editor name to be used in the validation default messages.

All predefined rules have a default message displayed when the rules are not satisfied by the validated editor values. If you specify the name property of the associated dxValidator object, the property value will be used as an object in the default message. For instance, the "Value is invalid" message will be transformed to "Login is invalid", if you set "Login" for the name property.

A function that is executed before the UI component is disposed of.

Selector: @disposing

Information about the event.

Object structure:

Default Value: null

A function used in JavaScript frameworks to save the UI component instance.

Selector: @initialized

Information about the event.

Object structure:

Default Value: null

<dx-validator ...
    (onInitialized)="saveInstance($event)">
</dx-validator>

import { Component } from "@angular/core";
import Validator from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    validatorInstance: Validator;
    saveInstance (e) {
        this.validatorInstance = e.component;
    }
}

App.vue (Composition API)

<template>
    <div>
        <DxValidator ...
            @initialized="saveInstance">
        </DxValidator>
    </div>
</template>

<script>
import DxValidator from 'devextreme-vue/validator';

export default {
    components: {
        DxValidator
    },
    data: function() {
        return {
            validatorInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.validatorInstance = e.component;
        }
    }
};
</script>

<template>
    <div>
        <DxValidator ...
            @initialized="saveInstance">
        </DxValidator>
    </div>
</template>

<script setup>
import DxValidator from 'devextreme-vue/validator';

let validatorInstance = null;

const saveInstance = (e) => {
    validatorInstance = e.component;
}
</script>

import Validator from 'devextreme-react/validator';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.validatorInstance = e.component;
    }

    render() {
        return (
            <div>
                <Validator onInitialized={this.saveInstance} />
            </div>
        );
    }
}

• Get a UI component Instance in jQuery

• Get a UI component Instance in Angular

• Get a UI component Instance in Vue

• Get a UI component Instance in React

A function that is executed after a UI component property is changed.

Selector: @option-changed

Information about the event.

Object structure:

The modified property's new value.

The UI component's previous value.

String

The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.

String

The path to the modified property that includes all parent properties.

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Validator

The UI component's instance.

Default Value: null

A function that is executed after a value is validated.

Selector: @validated

Information about the event.

Object structure:

Specifies the validation group the editor will be related to.

Selector: validation-group

Generally, the editors that are associated with dxValidator objects are validated on each value change. But you can combine several editors into a group so that they are validated together (e.g., on a button click).

The validationGroup property should be specified for the associated dxValidator object to indicate the validation group within which the editor will be validated. Assign the same validation group name for those editors that should be validated together.

View on GitHub

• Validate Several Editor Values

An array of validation rules to be checked for the editor with which the dxValidator object is associated.

Selector: DxValidationRule

There are several predefined rule types. Each rule type demands a specific set of rule properties. Use the Validation Rules section to learn how to define rules of different types.

Specifies the UI component's width.

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4