Validate DropDown using Jquery in MVC3

Question

i have implement simple MVC3 application in that i want validate control form particular DIV

//ViewModel

public class NewStreamViewModel
    {
        public NewStreamViewModel()
        {
            this.Streams = new List<SelectListItem>();
            this.Subjects = new List<SelectListItem>();
            this.Languages = new List<SelectListItem>();
        }

        [Display(Name = "Language")]
        [Required(ErrorMessage = "{0} is Required")]
        public int? LanguageId {get;set;}


        [Display(Name = "Stream")]
        [Required(ErrorMessage = "{0} is Required")]
        public int? StreamId {get;set;}

        public int[] SubjectIds {get;set;}

        public List<SelectListItem> Languages {get;set;}
        public List<SelectListItem> Streams {get;set;}
        public List<SelectListItem> Subjects {get;set;}

    }

//View.cshtml

<div id="tab1">
@using (Html.BeginForm())
{
     <table style="background: none; width: 100%;">
                    <tr>
                        <td>
                            Language
                        </td>
                        <td>
                            @Html.DropDownListFor(m=>m.LanguageId.Value,Model.Languages)
                            @Html.ValidationMessageFor(m=>m.LanguageId.Value)
                        </td>
                    </tr>
                    <tr>
                        <td>Stream
                        </td>
                        <td>
                            @Html.DropDownListFor(m => m.StreamId.Value, Model.Streams)
                             @Html.ValidationMessageFor(m=>m.StreamId.Value)
                        </td>
                    </tr>
                    <tr>
                        <td>Subjects
                        </td>
                        <td>
                            @Html.ListBoxFor(m => m.SubjectIds, Model.Subjects, new { Style = "width:300px;" })
                        </td>
                    </tr>

                </table>
}
    <input type="button" value="Save" id="addspan" />
</div>  



<script type="text/javascript">
    $(function () {
        var count = 2;
        $('#wrap').tabs();
        $('#addspan').click(function () {
            var $step = $('#tab1');
            var validator = $("form").validate(); // obtain validator
            var anyError = false;
            var selects = $('#tab1').find('select');
            selects.each(function () {
                if (!validator.element(this)) { // validate every input element inside this step
                    anyError = true;
                }

            });
            if (anyError) {
                return false;
            }

            count++;
        });
    });
</script>

how i can validate these Drop-Downs at client side in jquery?

Are you using unobtrusive client-side validation? In which case, what is the need for the custom validation code? — Tim Rogers
– Tim Rogers, Commented Apr 2, 2013 at 13:36
@Tim no i am not using unobtrusive client-side validation i want to only validate drop downs from particular DIV — Shivkumar
– Shivkumar, Commented Apr 2, 2013 at 13:50
@Shivkumar Without unobtrusive validation $("form").validate() will return object where setting.rules is empty array. You should manually set them, look at this link: stackoverflow.com/questions/8829030/… — webdeveloper
– webdeveloper, Commented Apr 2, 2013 at 14:43

webdeveloper · Accepted Answer · 2013-04-02 13:32:15Z

1

Add this files to your page (this will allow client validation):

<script src="@Url.Content("~/scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Calling:

$('form').valid()

Will return true if there is no errors, and false if they are and display errors near inputs.

answered Apr 2, 2013 at 13:32

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Omair · Accepted Answer · 2013-04-03 16:30:17Z

0

You can validate dropdown manually like this:

$('#addbtn').click(function(){
var ddlvalue= $("#dropdownid option:selected").val();
if(ddlvalue!='-1')
{    
   //Do your work.
}
else
  alert('Please select product");
});

answered Apr 3, 2013 at 16:30

Muhammad Omair

7974 silver badges14 bronze badges

Comments

Hitesh Nirmal · Accepted Answer · 2013-05-16 13:38:52Z

0

  <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('#<%=btnSubmit.ClientID%>').click(function () {
                if ($('#<%=ddlCity.ClientID%>').val() == 0) {
                    alert('Please select Country')
                    return false;
                   }                              
                if ($('#<%=txtName.ClientID%>').val() == "") {
                    alert(' Name')
                    return false;
                }

            });
        });  

    </script>

answered May 16, 2013 at 13:38

Hitesh Nirmal

1

Collectives™ on Stack Overflow

Validate DropDown using Jquery in MVC3

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related