Validate drop-down and listbox at client side in MVC3

Question

I want to validate drop down and List box at client side.

//model

 public class NewStreamViewModel
    {
        public NewStreamViewModel()
        {
            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 = "Subject")]
        [Required(ErrorMessage = "{0} is Required")]
        public int[] SubjectIds {get;set;}

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

    }

//View

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

    </table>
    <input type="button" id="addspan">
</div>   
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<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>

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

I have use unobtrusive validation but still it's not working for me, how i can validate drop down and List box at client side?

score 0 · Answer 1 · answered Apr 03 '13 at 07:53

0

My first guess is that the script tag for jquery is not ok. Change it like the tags below it:

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>

answered Apr 03 '13 at 07:53

Andras Toth

576
4
11

i have checked it, it's working – Shivkumar Apr 03 '13 at 07:55
Have you enabled the unobtrusive JS in config, or from code? – Andras Toth Apr 03 '13 at 08:02

score 0 · Answer 2 · answered Apr 03 '13 at 08:00

0

use hack to apply a validation on dropdown

@Html.DropDownListFor(m => m.DetailsData.TypeSelected, new SelectList(Model.Types, "Value", "Key"), "- Choose Offer Type -", new { @class = "" })
 @Html.TextBoxFor(m => m.DetailsData.TypeSelected, new { @style = "visibility : hidden" })
@Html.ValidationMessageFor(m => m.DetailsData.TypeSelected, null, new { @class ="validation_arrow shift_arrow" })
@Html.ValidationMessageFor(m => m.DetailsData.TypeSelected)

answered Apr 03 '13 at 08:00

John

539
1
4
15

if DetailsData.TypeSelected = 0 means my i want to also put validation on index also in that case i am not able to use this scenario – Shivkumar Apr 03 '13 at 08:08
mainly the validation control by the **hidden** textbox check this in jquery valid form. – John Apr 03 '13 at 08:12

score 0 · Answer 3 · answered Apr 04 '13 at 15:12

0

You ca perform somthing like this:

$('#addspan').click(function () {
        if($('#dropDownID1').val() != 0 && $('#dropDownID2').val() != 0)
//do something
else alert("Please complete required fileds");
        })

answered Apr 04 '13 at 15:12

arnoldrob

813
3
9
15

Validate drop-down and listbox at client side in MVC3

3 Answers3