How can i have my combobox field mandatory

[Frédéric Peyronnin]

Hi,

In my view, i have a combobox field defined like this :

            <div class="form-group">
                <ej-combo-box id="strECH_Site" datasource="ViewBag.Sitedatasource"></ej-combo-box>
                <span asp-validation-for="strECH_Site" class="text-danger"></span>
            </div>

In my view model, i add :

        [Required]
        public string strECH_Site { get; set; }

But when i submit my form, this field is not mandatory.

How can i define it mandatory ?

I would like to insert Something like this : validation-rules='new Dictionary<string, object>() { { "required",true} }'

But it does not works ?

[Keerthana Rajendran]

Hi Frédéric,   

   

Thank you for contacting Syncfusion Support.   

   

Currently, we don’t have inbuilt support for validation of ComboBox in source level. But you can validate ComboBox input using jquery validation by adding name attribute through htmlAttributes property of Combobox. Refer to the below given code.   

   

@{   

    IDictionary<string, object> name = new Dictionary<string, object>();   

    name.Add("name", "select");   

}   

<form asp-controller="ComboBox" asp-action="Post" id="form1">   

    <div class="frame">   

        <div class="row">   

            <div class="col-xs-8 col-sm-4">   

                <span class="txt">Select Country</span>   

                <ej-combo-box id="strECH_Site" datasource="(IEnumerable<Countries>)ViewBag.Sitedatasource" html-attributes="name" auto-fill="true" select="select">   

                    <e-combo-box-fields text="text" />   

                </ej-combo-box>   

                <label class="message"></label>   

            </div>   

        </div>   

    </div>   

    <button type="submit" id="valid" onclick="validate()"> Validate</button>   

    <script type="text/javascript">   

        function validate() {   

            var rules = {};   

            $("form[id$=form1] input[name$=select]").each(function () {   

                rules[this.name] = "required";   

            });   

            $('form[id$="form1"]').validate({   

                rules: rules,   

                errorPlacement: function (error, element) {   

                    $(error).insertAfter($(".message"));   

                }   

            });   

        }   

        function select(args) {   

            if (args.value != "") {   

                $("label.error").css("display", "none")  //hide error message when value is selected.   

            }   

        }   

   

    </script>   

    <style class="cssStyles">   

        .error {   

            margin-top: 25px;   

            color: red;   

        }   

    </style>   

</form>   

   

We have attached a sample for your reference which can be downloaded from the following link.   

   

http://www.syncfusion.com/downloads/support/forum/136603/ze/ComboBox-302327973   

   

Refer to the below given UG.   

   

https://help.syncfusion.com/aspnet-core/combobox/how-to#validation-of-combobox-using-jquery-validator   

   

Regards,   

Keerthana