Validation in EJ2 TypeScript TextBox

21 Aug 20264 minutes to read

The TextBox supports three types of validation styles namely error, warning, and success. These states are enabled by adding corresponding classes .e-error, .e-warning, or .e-success to the cssClass property.

import { InputObject, TextBox } from '@syncfusion/ej2-inputs';

let warningTextBox: TextBox = new TextBox({
    placeholder: 'Input with warning',
    cssClass: 'e-warning',
  });
  warningTextBox.appendTo('#warning');
  let errorFloatTextBox: TextBox = new TextBox({
    placeholder: 'Input with error',
    cssClass: 'e-error',
  });
  errorFloatTextBox.appendTo('#error');
  let successIconTextBox: TextBox = new TextBox({
    placeholder: 'Input with success',
    cssClass: 'e-success',
  });
  successIconTextBox.appendTo('#success');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 TextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 TextBox Components" />
    <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="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.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'>
        <div class='wrap'>
          <div id="input-container">



            <div>
              <input id="warning" type="text"  />
            </div>
         
            <div >
              <input id="error" type="text"/>
            </div>
         
            <div>
              <input id="success" type="text" />
            </div>




          </div>
        </div>
    </div>
</body>
</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 340px;
}