Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Jquery Validate Html.DropDownListFor Not Working?

Posted on 2013-11-29
8
628 Views
Last Modified: 2013-12-08
I use the following code to successfully validate Html.EditorFor and Html.TextBoxFor. I cannot validate the Html.DropDownListFor. It gets ignored on submit button click, Help.

$("#form1").validate(
            {
                rules: {
                    'Vendor.Name': {
                        required: true
                    }
                },
                'Vendor.VendorTypeID':
                    {
                        notEqual: "-select-"
                    },

                messages:
                    {
                        'Vendor.Name': { required: " Required!" },
                        'Vendor.VendorTypeID': " Required!"
                    },

                success: function (label) {
                    label.html('OK').removeClass('error').addClass('ok');
                    setTimeout(function () {
                        label.fadeOut(500);
                    }, 1000)
                }
            });

Also noticed something strange about Jquery and the Html.DropDownListFor. The following code either returns 'undefined' for blank alert box.

 $('#form1').bind('submit', function ()
 {
     alert($('#Vendor.VendorTypeID').val()); //returns 'undefined'

     alert($('#Vendor.VendorTypeID').text()); //returns ''
  });


[Form - View Source]
<form action="/Vendor/New" id="form1" method="post">                
       <select  id="Vendor_VendorTypeID"
               name="Vendor.VendorTypeID">
                    <option value="">-select-</option>
                    <option value="1">Auto Service</option>
                    <option value="12">Bank</option>

      <input type="submit" value="Save" />
</form>
0
Comment
Question by:WorknHardr
  • 4
  • 4
8 Comments
 
LVL 12

Expert Comment

by:jitendra patil
ID: 39686464
hi

i think you need to put a value to option value of select as below.
<option value="-select-">-select-</option>

as per the jquery code you are checking the value as "-select-" which is not there in your option value and that's why it may be not working.

hope this helps
0
 

Author Comment

by:WorknHardr
ID: 39686886
Q. Why does .text return a blank alert window?
0
 
LVL 12

Accepted Solution

by:
jitendra patil earned 500 total points
ID: 39687777
your are trying to acces the control by its name,why don't your try with the id you are specifiying i mean to say "Vendor_VendorTypeID".
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:WorknHardr
ID: 39693082
Okay, you're correct about using _ underscore with a Html.DropDownListFor

Note: I still need to use the . for the Html.EditorFor

Anyway, new problem: I cannot see error message for DropDownListFor

I do think the validation is working because it halts the Action from being called and the JQuery ' submitHandler' returns it's alert.

[Current Code]
 $(function () //onload
    {
        jQuery.validator.addMethod('NonEmpty', function (value) {
            return ($("#Vendor_VendorTypeID option:selected").text() != '-select-');
        }, '');

      $("#form1").validate(
            {
                rules: {
                    'Vendor.Name': {
                        required: true
                    }
                },
                'Vendor_VendorTypeID':
                    {
                        required: true,
                        NonEmpty: false
                    },

                messages:
                    {
                        'Vendor.Name': { required: " Required!" },
                        'Vendor_VendorTypeID': { NonEmpty: " Required!" }
                    },

                submitHandler: function (form) {
                    alert('valid form submitted');
                    return false;
                },

                success: function (label) {
                    label.html('OK').removeClass('error').addClass('ok');
                    setTimeout(function () {
                        label.fadeOut(500);
                    }, 1000)
                }
            });
0
 
LVL 12

Expert Comment

by:jitendra patil
ID: 39697710
hi

if you have added   <option value="--select--">-select-</option> in the markup then the option value will never be empty. you need to check it with the value of the dropdown
if it says --select-- then say its false  and the value is required else ok to go.

try to change the validation code for
 'Vendor_VendorTypeID':
                    {
                        required: true,
                        NonEmpty: false
                    },

HTH!
0
 

Author Comment

by:WorknHardr
ID: 39698037
I was over-thinking the DropDownFor validation. Here's my simple solution:

[New Code]
 $(function () //onload
    {
      $("#form1").validate(
            {
                rules: {
                    'Vendor.Name' : {
                        required: true
                    }
                },
                'Vendor.VendorTypeID' : {
                        required: true
                    },

                messages:
                    {
                        'Vendor.Name': {
                                required: " *"
                         },
                        'Vendor.VendorTypeID': {
                                required: " *"
                         }
                    },

                success: function (label) {
                    label.html(' ').removeClass('error').addClass('ok');
                    setTimeout(function () {
                        label.fadeOut(500);
                    }, 1000)
                }
            });
0
 
LVL 12

Expert Comment

by:jitendra patil
ID: 39703968
so i think you managed to get it work, good.
0
 

Author Closing Comment

by:WorknHardr
ID: 39704243
Thx for helping me along
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
This video shows how to use Hyena, from SystemTools Software, to bulk import 100 user accounts from an external text file. View in 1080p for best video quality.
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question