How to add required field validation on client side with custom message for Radio Button in ASP.Net MVC?

Question

How to add required field validation on client side with custom message for Radio Button in ASP.Net MVC ?

<div class="form-group">
                    <div class="col-sm-4 control-label">
                        <label class="hthin" asp-for="IsGuidance"></label>
                        <label class="hthin">Coach: @Model.GuideName</label>
                </div>
                <div class="col-sm-3 checkbox-inline">
                        @Html.RadioButtonFor(model => model.IsGuidance, 1, new { @Id = "IsGuidanceYes" })
                        <label class="hthin" for="IsGuidanceYes">Yes</label>
                        @Html.RadioButtonFor(model => model.IsGuidance, 0, new { @Id = "IsGuidanceNo" })
                        <label class="hthin" for="IsGuidanceNo">No</label>
                        <span asp-validation-for="IsGuidance" class="text-danger"></span>
                </div>
               </div>

I wrote a Jquery file :

 $('input[name="IsGuidance"]').rules("add",
                {
                    required: true,
                    messages: {
                        required: "Please select Yes or No"
                    }
                });

Though, this is not validating (or) validation message is not showing on the UI.

Are you want to use `RequiredAttribute` with `@Html.ValidationMessageFor(model => model.IsGuidance)`? — Tetsuya Yamamoto, Aug 10 '18 at 00:54
How do i use Required Attribute on client side ? I am aware of Required attribute on Model — goofyui, Aug 10 '18 at 00:55
`RequiredAttribute` used in server-side against model property. To use it in client-side you may look at jQuery validation. — Tetsuya Yamamoto, Aug 10 '18 at 00:57
Yeah, I am looking for Jquery Validation. This scenario is completely on client side validation — goofyui, Aug 10 '18 at 00:58
You can look at [this issue](https://stackoverflow.com/questions/277589/validation-of-radio-button-group-using-jquery-validation-plugin) to do that. Depending on your implementation, the given steps are essentially similar. — Tetsuya Yamamoto, Aug 10 '18 at 00:59

score 1 · Accepted Answer · answered Aug 10 '18 at 04:36

I tested in this fiddle and your client-side validation rule seem to be working fine. What you should do is place custom error message using either errorPlacement or errorElement with errorContainer inside validate() function:

jQuery (inside $(document).ready() )

// hint: you can use $('form') selector
// using errorPlacement
$('#form').validate({
    errorPlacement: function (error, element) {
        error.appendTo($('#errorPlaceholderName'));
    }
});

// alternative with errorElement & errorLabelContainer
$('#form').validate({
    errorElement: 'span',
    errorLabelContainer: '.text-danger'
});

You may also try putting server-side viewmodel property validation attribute:

Model

[Required(ErrorMessage = "IsGuidance is required")]
public int? IsGuidance { get; set; }

Note: rules('add', ...) method must follows validate() in order to enable client-side validation, as given in similar issue.

Reference: jQuery validation plugin

score 0 · Answer 2 · answered Aug 10 '18 at 01:45

For client side validation to work automatically in Asp.Net MVC, you need to follow certain steps i.e

1 - Decorate your viewmodel property with the DataAnnotationAttribute which you do for server side validation anyway.

2 - Verify that your client side validation is enabled. you can refer this video on different ways to enable client side validation. By the way, by default it is always enabled: https://www.youtube.com/watch?v=PLe7WbsuHPU

3 - Make sure these 3 jQuery libraries are referenced in your page in the order shown below : jquery.js, jquery.validate.js and jquery.validate.unobtrusive.js.

4 - Use @Html.BeginForm helper method for form and place all your form fields within it. All form fields should also be generated using appropriate @Html helper methods.

That's all and client side validation should work when you submit the form.

In your case for custom message, Decorate your data annotation attribute with custom error message for displaying custom error message like

   class ViewModel
    {
      [Required(ErrorMessage ="Custom error message")]
      public bool IsGuidance{get;set;}
    }

How to add required field validation on client side with custom message for Radio Button in ASP.Net MVC?

2 Answers2