MultiSelect component inside form can be validated through FormValidator. Add the name attribute of component to be validated inside rules of FormValidator. Error message after validation can be placed in DOM based on the requirement through customPlacement.
In the following sample, validation is added for MultiSelect component.
// initialize MultiSelect component
var listObj1 = new ej.dropdowns.MultiSelect({
// set the placeholder to MultiSelect input element
placeholder: 'Favorite Sports',
// set the type of mode for how to visualized the selected items in input element.
mode: 'Default'
});
listObj1.appendTo('#default');
var buttonFormValidate = new ej.buttons.Button({
isPrimary: true
});
buttonFormValidate.appendTo('#validateSubmit');
// Initialize the Reset Button.
var buttonReset = new ej.buttons.Button({});
buttonReset.appendTo('#resetbtn');
var options = {
rules: {
default: { required: true }
},
customPlacement: (inputElement, error)=>{
inputElement.parentElement.parentElement.parentElement.insertBefore(error, inputElement.parentElement.parentElement.nextSibling);
}
};
// Initialize the FormValidator.
var formObj = new ej.inputs.FormValidator('#formId', options);
document.getElementById('formId').addEventListener("submit", function (e) {
e.preventDefault();
if (formObj.validate()) {
alert('Success');
formObj.reset();
}
});<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 MultiSelect</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="styles.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">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.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" style="margin:0 auto; width:250px;">
<div class="col-lg-12 control-section">
<div class="content-wrapper" style="margin-bottom: 25px;">
<div class="form-title"><span>Add Customer Details</span></div>
<form id="formId" class="form-horizontal" novalidate="">
<div class="form-group">
<div class="e-float-input">
<select id="default" name="default">
<option value="Game1">American Football</option>
<option value="Game2">Badminton</option>
<option value="Game3">Basketball</option>
<option value="Game4">Cricket</option>
<option value="Game5">Football</option>
<option value="Game6">Golf</option>
<option value="Game7">Hockey</option>
<option value="Game8">Rugby</option>
<option value="Game9">Snooker</option>
<option value="Game10">Tennis</option>
</select>
</div>
<div id="userError"></div>
</div>
<div class="row">
<div style="width: 320px;margin:0px auto;height: 100px;padding-top: 25px;">
<div style="display: inline-block;">
<button id="validateSubmit" class="samplebtn e-control e-btn e-primary" type="submit" style="height:40px;width: 150px;" data-ripple="true">Submit</button>
</div>
<div style="float: right;">
<button id="resetbtn" class="samplebtn e-control e-btn" type="reset" style="height:40px;width: 150px;" data-ripple="true">Clear</button>
</div>
</div>
</div>
</form>
</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>