Search results

How To

Perform custom validation on MaskedTextBox using FormValidator

To perform custom validation on the MaskedTextBox use the FormValidator along with custom validation rules.

In the following example, the MaskedTextBox is validated for invalid mobile number by adding custom validation in the rules collection of the FormValidator.

Source
Preview
index.js
index.html
styles.css
// initializes the MaskedTextBox component
var mask = new ej.inputs.MaskedTextBox({
    // sets mask format to the MaskedTextBox
    mask: '000-000-0000',
    placeholder: 'Mobile Number',
    floatLabelType: 'Always'
});

mask.appendTo('#mask1');

//initialize button
var button = new ej.buttons.Button();
button.appendTo('#submit_btn')

// checks the length of mask value and returns corresponding boolean value 
var customFn = function(args) {
    var argsLength = args.element.ej2_instances[0].value.length;
    if(argsLength != 0){
        return argsLength >= 10;
    } else {
        return true;
    }
}

//value is returned based on the length of mask 
var custom = function(args) {
    var argsLength = args.element.ej2_instances[0].value.length;
    if(argsLength == 0){
    return 0; 
    } else {
        return argsLength;
    }
};

// sets required property in the FormValidator rules collection
var options = {
    rules: {
        'mask_value': { numberValue: [customFn, 'Enter valid mobile number'] },
    },
}

// defines FormValidator to validate the MaskedTextBox
var formObject =  new ej.inputs.FormValidator('#form-element', options);

//FormValidator rule is added for empty MaskedTextBox
formObject.addRules('mask_value', { maxLength: [custom, 'Enter mobile number'] });

// places error label outside the MaskedTextBox using the customPlacement event of FormValidator

formObject.customPlacement =  function(element, error) {
    document.querySelector(".form-group").appendChild(error);
};

document.getElementById('submit_btn').onclick = function () {
    // validates the MaskedTextBox
    formObject.validate("mask_value");
    var ele = document.getElementById('mask1');
    // checks for incomplete value and alerts the formt submit
    if (ele.value !== "" && ele.value.indexOf(mask.promptChar) === -1) {
        alert("Submitted");
    }
};
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 MaskedTextBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript MaskedTextBox Component With Form Validation">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
        <div id="container">
            <div class="wrap">
                <form id="form-element" class="form-horizontal">
                    <div class="form-group">
                        <br><div><input id="mask1" type="text" name="mask_value" class="form-control"></div>
                        <button type="button" id="submit_btn" style="margin-top: 10px">Submit</button>
                    </div>
                </form>
            </div>
        </div>
<style>
.e-mask.e-control-wrapper {
    margin-bottom: 20px;
}

label.e-error {
    margin-top: -50px;
}
</style>



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

Set cursor position in MaskedTextBox

By default, on focusing the MaskedTextBox the entire mask gets selected. You can customize by using any one of the following methods:

  • Setting cursor position at the start of the MaskedTextBox.
  • Setting cursor position at the end of the MaskedTextBox.
  • Setting cursor at the specified position in the MaskedTextBox.

Following is an example that demonstrates the above cases to set cursor position in the MaskedTextBox using focus event.

Source
Preview
index.js
index.html
styles.css
// initializes the First MaskedTextBox component
var mask = new ej.inputs.MaskedTextBox({
    // Default MaskedTextBox
    mask: '00000-00000',
    value: '93828-32132',
    placeholder: 'Default cursor position',
    floatLabelType: 'Always',
});

mask.appendTo('#mask1');

// initializes the Second MaskedTextBox component
var mask = new ej.inputs.MaskedTextBox({
    // sets mask format to the MaskedTextBox
    mask: '00000-00000',
    value: '83929-43427',
    placeholder: 'Cursor positioned at start',
    floatLabelType: 'Always',
    focus: function(args) {
        //sets cursor position at start of MaskedTextBox
        args.selectionEnd= args.selectionStart;
    }
});

mask.appendTo('#mask2');

// initializes the Third MaskedTextBox component
var mask = new ej.inputs.MaskedTextBox({
    // sets mask format to the MaskedTextBox
    mask: '00000-00000',
    value: '83929-32131',
    placeholder: 'Cursor positioned at end',
    floatLabelType: 'Always',
    focus: function(args) {
        //sets cursor position at end of MaskedTextBox
        args.selectionStart=args.selectionEnd;
    }
});

mask.appendTo('#mask3');

// initializes the Fourth MaskedTextBox component
var mask = new ej.inputs.MaskedTextBox({
    // sets mask format to the MaskedTextBox
    mask: '+1 000-000-0000',
    value: '234-432-4324',
    placeholder: 'Cursor at specified position',
    floatLabelType: 'Always',
    focus: function(args) {
        //sets cursor at specified position
        args.selectionStart = 3;
        args.selectionEnd = 3;
    }
});

mask.appendTo('#mask4');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 MaskedTextBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript MaskedTextBox Component With Different Cursor Positions">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="wrap">
                <div class="form-group">
                    <br><input id="mask1" type="text" name="mask_value1" class="form-control">
                    <input id="mask2" type="text" name="mask_value2" class="form-control">
                    <input id="mask3" type="text" name="mask_value3" class="form-control">
                    <input id="mask4" type="text" name="mask_value4" class="form-control">
                </div>
        </div>
    </div>


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

.e-widget {
    padding-bottom: 12px;
}

Display numeric keypad in MaskedTextBox for mobile devices

By default, on focusing the MaskedTextBox, alphanumeric keypad will be displayed on mobile devices. Sometimes only numeric keypad for number values is needed, and this can be achieved by setting “type” property to tel.

Refer to the following example to enable numeric keypad in MaskedTextBox.

Source
Preview
index.js
index.html
styles.css
// initializes the MaskedTextBox component
var mask = new ej.inputs.MaskedTextBox({
    // sets mask format to the MaskedTextBox
    mask: '999-99999',
    value: "342-45432",
});

mask.appendTo('#mask1');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 MaskedTextBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript MaskedTextBox Component With Numeric Keypad For Mobile Devices">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="wrap">
                <div class="form-group">
                    <br><input id="mask1" type="tel" name="mask_value" class="form-control">
                </div>
        </div>
    </div>


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

Change the appearance of MaskedTextBox

The appearance of the MaskedTextBox can be changed by adding custom cssClass to the component and enabling styles.

Refer to the following example to change the appearance of the MaskedTextBox.

Source
Preview
index.js
index.html
styles.css
// initializes the MaskedTextBox component
var mask = new ej.inputs.MaskedTextBox({
    // sets mask format to the MaskedTextBox
    mask: '00000',
    value: "42648",
    placeholder: 'Enter User ID :',
    floatLabelType: 'Always',
    cssClass: 'e-style',
    focus: function(args) {
        //sets cursor position at start of MaskedTextBox
        args.selectionEnd= args.selectionStart;
    }
});

mask.appendTo('#mask1');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 MaskedTextBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript MaskedTextBox Component With CustomCss Class">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="wrap">
              <br><input id="mask1" name="mask_value" class="form-control">
        </div>
    </div>
<style>
.e-mask.e-style .e-control.e-maskedtextbox {
  color: #00ffff ;
  letter-spacing: 10px ;
  font-size: xx-large ;
  border: 1px ;
  border-color: #ffffff ;
}
        
.e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::before {
  background: #ffffff ;
}
        
.e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::after {
  background: #ffffff ;
}
        
.e-control-wrapper.e-mask.e-float-input.e-style .e-float-text.e-label-top {
  color: #00ffff ;
  font-size: medium ;
}
</style>


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