Validate Or Select Radio Button List In Asp.Net MVC Using JavaScript

This article will show you how you can validate or select radio button list in asp.net mvc using JavaScript. Validate weather any item is selected in radiobuttonlist or not if not the show error message using c#.net in mvc.

Have a look of the article which will show Binding Or Populating Radio Button List in Asp.Net MVC Using Model.

So for this article first we will create a new asp.net mvc application and add a mode class file and add the below code.

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVC_Demos.Models {     public class RadioButtonLiatModel     {         public List<RadioButtonData> RadioButtonListData { get; set; }     }     public class RadioButtonData     {         public int Id { get; set; }         public string Value { get; set; }     } }

After this we will add a controller class file and add the below code. This code will show how we can pass the data from model to the view.

using MVC_Demos.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MVC_Demos.Controllers {     public class RadioButtonListController : Controller     {         //         // GET: /RadioButtonList/         public ActionResult Index()         {             RadioButtonLiatModel _radiobuttonliatmodel = new RadioButtonLiatModel();             _radiobuttonliatmodel.RadioButtonListData = new List<RadioButtonData>();             _radiobuttonliatmodel.RadioButtonListData.Add(new RadioButtonData { Id = 1, Value = "Item 1" });             _radiobuttonliatmodel.RadioButtonListData.Add(new RadioButtonData { Id = 2, Value = "Item 2" });             _radiobuttonliatmodel.RadioButtonListData.Add(new RadioButtonData { Id = 3, Value = "Item 3" });             _radiobuttonliatmodel.RadioButtonListData.Add(new RadioButtonData { Id = 4, Value = "Item 4" });             return View(_radiobuttonliatmodel);         }     } }

Now we will create the view and add the below code.

@model MVC_Demos.Models.RadioButtonLiatModel @{     ViewBag.Title = "Validate Or Select Radio Button List In Asp.Net MVC Using JavaScript";     <script>         function ValidateRadioButton() {             var rbtDetail = document.getElementsByName("radiobutton");             var isValid = false;             for (var i = 0; i < rbtDetail.length; i++) {                 if (rbtDetail[i].checked) {                     isValid = true;                     break;                 }             }             if (isValid == true) {                 alert("Thank You : You have selected a radio button.");                 return true;             }             else {                 alert("Error : Pleae select attlease oine option");                 return false;             }         }     </script> } <h2>RadioButton List</h2> <br /> @foreach (var item in Model.RadioButtonListData) {     <input type="radio" id="@item.Id" value="@item.Id" name="radiobutton" />@item.Value } <br /> <input type="button" value="Submit" onclick="javascript: return ValidateRadioButton();" />

In above code I have written a javascript function which will read the radio button list with the help of  name of the control and then start a loop to check the value as we find that radio button is check we break the loop and comes out and display the message as per the status.

Now lets check the output of the code.