Error Messages in JavaScript Form Validator control

29 Mar 2023 / 2 minutes to read

The FormValidator provides default error messages for all default validation rules. It is tabulated as follows

Rules	message
`required`	This field is required.
`email`	Please enter a valid email address.
`url`	Please enter a valid URL.
`date`	Please enter a valid date.
`dateIso`	Please enter a valid date ( ISO ).
`number`	Please enter a valid number.
`digit`	Please enter only digits.
`maxLength`	Please enter no more than {0} characters.
`minLength`	Please enter at least {0} characters.
`rangeLength`	Please enter a value between {0} and {1} characters long.
`range`	Please enter a value between {0} and {1}.
`max`	Please enter a value less than or equal to {0}.
`min`	Please enter a value greater than or equal to {0}.
`regex`	Please enter a correct value.

Customizing Error Messages

The default error message for a rule can be customizable by defining it along with concern rule object as follows.

Source

Preview

index.ts

index.html

import {FormValidator, FormValidatorModel} from '@syncfusion/ej2-inputs';

let options: FormValidatorModel = {
    rules: {
        'user': { required: true },
        'password': { minLength: [6, 'Need atleast 6 character length'] }
    }
}
let formObject: FormValidator = new FormValidator('#form-element', options);

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Form Validator</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <form id="form-element" class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-3 control-label" for="user">User Name</label>
                <div class="col-sm-6">
                    <input type="text" id="required" name="user" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="password">Password</label>
                <div class="col-sm-6">
                    <input type="password" id="number" name="password" class="form-control" />
                </div>
            </div>
        </form>
    </div>
</body>

</html>

Customizing Error Placement

The FormValidator has an event customPlacement which can be used to place the error message from default position to desired custom location.

Source

Preview

index.ts

index.html

import {FormValidator, FormValidatorModel} from '@syncfusion/ej2-inputs';

let options: FormValidatorModel = {
    rules: {
        'user': { required: [true, 'User Name: required'] },
        'password': { minLength: [5, 'Password: need atleast 5 characters'] }
    },
    customPlacement: (inputElement: HTMLElement, error: HTMLElement)=>{
        document.getElementById('error').appendChild(error);
    }
}
let formObject: FormValidator = new FormValidator('#form-element', options);

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Form Validator</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <form id="form-element" class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-3 control-label" for="user">User Name</label>
                <div class="col-sm-6">
                    <input type="text" id="required" name="user" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="password">Password</label>
                <div class="col-sm-6">
                    <input type="password" id="number" name="password" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-3 control-label"></div>
                <div class="col-sm-6">
                    <div id='error'></div>
                </div>
            </div>
        </form>
    </div>
</body>

</html>

Contents

Customizing Error Messages
Customizing Error Placement

Contents

Customizing Error Messages
Customizing Error Placement