1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. select atleast one checkbox validation in javascript side

select atleast one checkbox validation in javascript side

@Html.EJS().ListBox("DdlLocation").SelectionSettings(new Syncfusion.EJ2.DropDowns.ListBoxSelectionSettings { ShowCheckbox = true, ShowSelectAll = true }).Height("200px").Change("onecheck").DataSource((IEnumerable<object>)ViewBag.DrpLocations).Fields(new Syncfusion.EJ2.DropDowns.ListBoxFieldSettings { Value = "LocationId", Text = "LocationName", Id = "LocationId" }).Render()<br /><br />

<script>
  function onecheck(args) {
        debugger;
        var ddlLoc = document.getElementById("DdlLocation").ej2_instances[0];
        var sss = ddlLoc.value;

if(sss.length == 0)
{
alert("select at least one location")
return false;
}
    }
</script>

6 Replies 1 reply marked as answer
AS Aravinthan Seetharaman Syncfusion Team April 11, 2021 03:48 PM UTC

 
Thanks for contacting Syncfusion Support. 
 
We have checked your query. We can apply validation in ListBox  by using our FormValidator control. Please refer the below code snippet and sample. 
 
 
<form id="form-element"> 
    @Html.EJS().ListBox("listbox").DataSource((IEnumerable<object>)ViewBag.data).SelectionSettings( 
                new Syncfusion.EJ2.DropDowns.ListBoxSelectionSettings { ShowCheckbox = true, ShowSelectAll = true 
                }).Fields(new Syncfusion.EJ2.DropDowns.ListBoxFieldSettings { Text = "sports.Name"  
                }).Created("onCreate").Change("onecheck").Render() 
</form> 
 
<script> 
 
    function onCreate() { 
        document.getElementById(this.element.id).setAttribute("name", "listbox"); 
         
    } 
 
    var options = { 
        rules: { 
            'listbox': { required: [true, "Select at least one Item"] }, 
        }, 
    }; 
 
    var formObject = new ej.inputs.FormValidator('#form-element', options); 
 
    formObject.customPlacement = function (element, errorElement) { 
        element.parentNode.parentNode.appendChild(errorElement); 
    }; 
 
    function onecheck(args) {  
     formObject.validate("listbox"); 
    } 
</script> 
 
 
 
Please refer the FormValidator Doc link below. 
 
 
Please let us know if you have any concern on this. 
 
Regards, 
Aravinthan S 


NH Nishit Hirpara April 12, 2021 04:32 AM UTC

it;s help me but i want like minimum selection limit one. means if only one checkbox select from listbox then that checkbox do not uncheck


AS Aravinthan Seetharaman Syncfusion Team April 14, 2021 04:49 PM UTC

Hi Nishit, 
 
Thanks for the update. 
 
We have checked your query. We have achieved your requirement in sample level by using ListBox change event. Please refer the below code snippet and sample below. 
 
 
<form id="form-element"> 
    @Html.EJS().ListBox("listbox").DataSource((IEnumerable<object>)ViewBag.data).SelectionSettings( 
                new Syncfusion.EJ2.DropDowns.ListBoxSelectionSettings { ShowCheckbox = true, ShowSelectAll = true 
                }).Fields(new Syncfusion.EJ2.DropDowns.ListBoxFieldSettings { Text = "sports.Name"  
                }).Created("onCreate").Change("onecheck").Render() 
</form> 
 
<script> 
    var listBox; 
    function onCreate() { 
        document.getElementById(this.element.id).setAttribute("name", "listbox"); 
        listBox = document.getElementById("listbox").ej2_instances[0]; 
    } 
 
    var options = { 
        rules: { 
            'listbox': { required: [true, "Select at least one Item"] }, 
        }, 
    }; 
 
    var formObject = new ej.inputs.FormValidator('#form-element', options); 
 
    formObject.customPlacement = function (element, errorElement) { 
        element.parentNode.parentNode.appendChild(errorElement); 
    }; 
    var selectedElement, value; 
    function onecheck(args) { 
        if (value) { 
            listBox.selectItems(value, false); 
        } 
        if (selectedElement) { 
            selectedElement.classList.remove('readOnly'); 
        } 
        value = listBox.value; 
        for (i = 0; i < args.value.length; i++) { 
            if ( value && value[0] == args.value[i]) { 
                selectedElement = args.elements[i]; 
                selectedElement.classList.add('readOnly'); 
            } 
        } 
     formObject.validate("listbox"); 
    } 
</script> 
<style> 
    .readOnly { 
        pointer-events: none; 
    } 
</style> 
 
 
 
Could you please check the above details, and get back to us, if you need assistance on this. 
 
Regards, 
Aravinthan S 


Marked as answer
NH Nishit Hirpara April 15, 2021 05:58 AM UTC

Wow it's work perfect
Thanks you so much

NH Nishit Hirpara April 15, 2021 06:26 AM UTC

is it possible in multiselect dropdownlist?

AS Aravinthan Seetharaman Syncfusion Team April 15, 2021 12:42 PM UTC

Hi Nishit, 
 
Thanks for the update. 
 
We are happy to here that your requirement has been achieved. 
 
Query: is it possible in multiselect dropdownlist? 
 
Ans: We have checked your query. We can achieve the requested requirement with help of maximumSelectionCount property which is used to select the item based on the provided value. Kindly refer the below demo sample. 
 
 
 
Please let us know if you have any concern on this. 
 
Regards, 
Aravinthan S

Loader.
Up arrow icon