JavaScript/jQuery Button - Validate and Submit an HTML Form

Commonly, editors nested into an HTML form are supposed to be validated on the client and then submitted to the server. The JavaScript Button supports this scenario out of the box. Place the JavaScript Button on the HTML form and set the useSubmitBehavior property to true.

jQuery
HTML
JavaScript
<form action="/Login" method="post">
    <div id="login"></div>
    <div id="password"></div>
    <div id="validateAndSubmit"></div>
</form>
$(function() {
    $("#login").dxTextBox({
        name: "Login"
    }).dxValidator({
        validationRules: [
            { type: "required" }
        ]
    });

    $("#password").dxTextBox({
        name: "Password",
        mode: "password"
    }).dxValidator({
        validationRules: [
            { type: "required" }
        ]
    });

    $("#validateAndSubmit").dxButton({
        text: "Submit",
        type: "success",
        useSubmitBehavior: true
    });
});
Angular
HTML
TypeScript
<form action="/Login" method="post">
    <dx-text-box name="Login">
        <dx-validator>
            <dxi-validation-rule type="required"></dxi-validation-rule>
        </dx-validator>
    </dx-text-box>
    <dx-text-box name="Password" mode="password">
        <dx-validator>
            <dxi-validation-rule type="required"></dxi-validation-rule>
        </dx-validator>
    </dx-text-box>
    <dx-button
        text="Submit"
        type="success"
        [useSubmitBehavior]="true">
    </dx-button>
</form>
import { DxTextBoxModule, DxValidatorModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTextBoxModule,
        DxValidatorModule,
        DxButtonModule
    ],
    // ...
})
Vue
<template>
    <form action="/Login" method="post">
        <DxTextBox name="Login">
            <DxValidator>
                <DxValidationRule type="required" />
            </DxValidator>
        </DxTextBox>
        <DxTextBox name="Password" mode="password">
            <DxValidator>
                <dx-validation-rule type="required" />
            </DxValidator>
        </DxTextBox>
        <DxButton
            text="Submit"
            type="success"
            :use-submit-behavior="true" />
    </form>
</template>
<script>
import DxTextBox from "devextreme-vue/text-box";
import DxValidator, { DxValidationRule } from "devextreme-vue/validator";
import DxButton from "devextreme-vue/button";

export default {
    components: {
        DxTextBox,
        DxValidator,
        DxValidationRule,
        DxButton
    }
}
</script>
React
import React from 'react';
import { JavaScript Button } from 'devextreme-react/button';
import { TextBox } from 'devextreme-react/text-box';
import { Validator, RequiredRule } from 'devextreme-react/validator';

class App extends React.Component {
    render() {
        return (
            <form action="/Login" method="post">
                <TextBox name="Login">
                    <Validator>
                        <RequiredRule />
                    </Validator>
                </TextBox>
                <TextBox name="Password" mode="password">
                    <Validator>
                        <RequiredRule />
                    </Validator>
                </TextBox>
                <JavaScript Button
                    text="Submit"
                    type="success"
                    useSubmitBehavior={true}
                />
            </form>
        );
    }
}

export default App;

Note that the name property of the TextBox UI components in the previous code specifies the name attribute of the underlying <input> element.

DevExtreme editors may belong to different validation groups. To specify which group the JavaScript Button must validate, use the validationGroup property. If you do not set this property, the JavaScript Button validates all editors whose validation group is not specified.

NOTE
Although the JavaScript Button may validate different validation groups, it always submits a definite HTML form - the one in which it is nested. To avoid mixing up validated and submitted values, we recommend that a single HTML form contain only a single validation group.
See Also