Solved

Jquery Validate Html.DropDownListFor Not Working?

Posted on 2013-11-29
8
623 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
Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 

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

Ransomware-A Revenue Bonanza for Service Providers

Ransomware – malware that gets on your customers’ computers, encrypts their data, and extorts a hefty ransom for the decryption keys – is a surging new threat.  The purpose of this eBook is to educate the reader about ransomware attacks.

Question has a verified solution.

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

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
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 …
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…

772 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