Error Messages in JavaScript (ES5) Form Validator control

08 May 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.js

index.html

var customFn = (args) => {
    return args['value'].length >= 5;
};
var options = {
    rules: {
        'user': { required: true },
        'password': { minLength: [customFn, 'Need atleast 5 letters'] }
    }
};
var formObject = new ej.inputs.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.2.3/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://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <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>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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.js

index.html

var options = {
    rules: {
        'user': { required: [true, 'User Name: required'] },
        'password': { minLength: [5, 'Password: need atleast 5 characters'] }
    },
    customPlacement: (inputElement, error) => {
        document.getElementById('error').appendChild(error);
    }
};
var formObject = new ej.inputs.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.2.3/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://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <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>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Contents

Customizing Error Messages
Customizing Error Placement

Contents

Customizing Error Messages
Customizing Error Placement