Validate RadioButton not working

1 Answer 67 Views
RadioButton Validation
Faz
Top achievements
Rank 1
Faz asked on 17 Aug 2021, 11:38 AM | edited on 17 Aug 2021, 11:05 PM

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?

1 Answer, 1 is accepted

Sort by
0
Stoyan
Telerik team
answered on 20 Aug 2021, 11:32 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Faz
Top achievements
Rank 1
commented on 21 Aug 2021, 11:53 AM

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
Telerik team
commented on 24 Aug 2021, 01:30 PM

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
Top achievements
Rank 1
commented on 25 Aug 2021, 11:47 PM

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
Telerik team
commented on 30 Aug 2021, 09:34 AM

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.

Tags
RadioButton Validation
Asked by
Faz
Top achievements
Rank 1
Answers by
Stoyan
Telerik team
Share this question
or