Validate RadioButton not working

[Faz]

I'm trying to implement validation on he form , but having issues with radio button.

        <div class="form-group row">
            @Html.LabelFor(model => model.LanguageID, htmlAttributes: new { @class = "control-label col-md-2 required" })
            <div class="col-md-10">
                @(Html.Kendo().ComboBoxFor(m => m.LanguageID)
                                         .Name("LanguageID")
                                        .Placeholder(@Resources.Resources.LanguagePlaceholder)
                                        .DataTextField("Description")
                                        .DataValueField("Id")
                                        .Filter("contains")
                                        .Suggest(true)
                                        .DataSource(s => s.Read(r => r.Action("GetLanguages", "Student")).ServerFiltering(false))
                                        .HtmlAttributes(new {  style = "width:300px" })
            )
                @Html.ValidationMessageFor(model => model.LanguageID, "", new { @class = "text-danger" })
            </div>
        </div>

            <div class="form-group row">
                @Html.LabelFor(model => model.WebsiteDisplay, htmlAttributes: new { @class = "control-label col-md-2 required" })
                <div class="form-group k-radio-list">
                    <div class="checkbox">
                        @(Html.Kendo().RadioButtonFor(m => m.WebsiteDisplay).Label(@Resources.Resources.Yes).Value(true))
                        @(Html.Kendo().RadioButtonFor(m => m.WebsiteDisplay).Label(@Resources.Resources.No).Value(false))
                        @Html.ValidationMessageFor(model => model.WebsiteDisplay, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>

<script>
    $(function () {
        $("form").kendoValidator();
    });

</script>

 

it does work for combobox and textboxes , but error is not displayed for radio button.

Am I missing something?

[Stoyan]

Hi Faz,

Thank you for sharing your code. I was able to reproduce the scenario and then validate the form by adding required field via DataAnnotations to the Model that is bound to the Radio Buttons.

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

For your convenience I have attached a sample project that showcases the behavior on my side.

Could you please give that approach a try and let me know whether it works for you.

Regards,
Stoyan
Progress Telerik

[Faz]

Thanks Stoyan. I did have Required DataAnnotations ,  I finally managed to fix it by including 

    $("#form1").kendoValidator({
        rules: {
            radiorequired: function (input) {
                if (input.is("[type=radio]")) {
                    var radioButtons = $("input[name='" + input.attr("name") + "']");
                    if (!radioButtons.is("[data-val-required], required")) return true;

                    return radioButtons.is(":checked");
                }

                return true;
            }
        },
        messages: {
            radiorequired: "@Resources.Resources.TPRadioBtnValidation"
        }
    }).getKendoValidator();

which fixed the issue, but I now face a different issue with date picker

                @(Html.Kendo().DatePickerFor(model => model.StartDate)
                        .Name("StartDate")
                        .Events(e => e.Change("CourseName"))
                        .Format("dd MMM yyyy")
                        .ParseFormats(new List<string>()
                                        {
                                        "dd MMM yyyy"
                                        })
                        .HtmlAttributes(new { @class = "k-datetimepicker", style = "width: 150px" })
                    )
                @Html.ValidationMessageFor(model => model.StartDate, "", new { @class = "text-danger" })

//My model
        [DisplayFormat(DataFormatString = "{0:dd MMM yyyy}", ApplyFormatInEditMode = true)]
        [DataType(DataType.Date)]
        [Display(ResourceType = typeof(Resources.Resources), Name = "StartDate")]
        [Required(ErrorMessageResourceType = typeof(Resources.Resources), ErrorMessageResourceName = "CourseDateValidation")]
        public DateTime? StartDate { get; set; }

Validation is fails as soon as a date is picked,

will you be able to help with this one?

 

Thanks

 

 

[Stoyan]

Hi Faz,

I am happy to hear that the issue with validation of the RadioButton has been resolved.

The reason for the encountered validation error with the DataPicker is that the DataAnnotations apply Date validation on the DataPicker input. However that input is of type text and the entered value remains unchanged by the Component.

To resolve the issue I recommend adding another custom rule to the Kendo Validator. In it you can utilize the kendo.parseDate method which parses string to a Date object. The method returns null, if the string cannot be parsed to a valid Date.

$("#form1").kendoValidator({
        rules: {
              dateformat: function (input) {
                    if (input.is("[name=datepicker]")) {
                        var date = kendo.parseDate(input.val());
                        if (date != null) {
                            return true;
                        }
                        return false;
                    }
              }
        },
        messages: {
            dateformat: "Start Date is not a valid date"
        }
    });

I hope the suggestion above is helpful. Please let me know, if additional questions occur. 

[Faz]

Thanks again for your help. Datepicker issue if fixed however there is one last problem which is with comboboxes. I created a new issue:

Wrong validation message shown for Combobox when using kendoValidator in Kendo UI for jQuery | Telerik Forums

if you or anyone could resolve this it would be very helpful

[Stoyan]

Hi Faz,

I see that my colleague Martin is already onto the Combobox related validation issue.

Please let me know, if you have further questions in regard to the current thread. Thank you.