Search jQuery

jQuery Forum

Validate Drop Down Not Working

in Using jQuery Plugins • 11 years ago

Good day,

I'm using the jQuery Validation plugin and love it. However, in one instance, I'm not able to get the validator to behave as I want. I'm including a simplified version of what I'm trying to do (I'm using the latest code on the validator and 1.4.3 of jquery.).

Goal: Validate the drop down ONLY upon submit. I don't want to validate it if they switch the selected item back and forth.

Problem: The validator still fires when the drop down is selected back to the original item and shows an error.

Steps To Reproduce:

1. Open the page.

2. Select 'Test Item 1' from the drop down

3. Select '[Select An Item From The List Below]' (original item from the drop down)

4. Click on the Text Area.

5. Validation Fires * (I don't want this to happen. Again, I only want to validate on Submit)

Am I doing something wrong here? Thanks for the help.

CODE:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="/2/include/scripts/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/2/include/scripts/jquery.validate.js"></script>
</head>
<body>
<form action="testvalidate.asp" method="post" enctype="multipart/form-data" name="Form1" id="Form1">
<p>
<select name="item_name2">
<option value="-1">[Select An Item From The List Below]</option>
<option value="100">Test Item 1</option>
<option value="200">Test Item 2</option>
</select>
</p>
<p><textarea>Lorem Ipsum</textarea></p>
<p><input name="submit" type="submit" value="Submit"/></p>
</form>
</body>
<script type="text/javascript">
<!--
$.validator.addMethod("check_item_dropdown", function(value, element) {
return this.optional(element) || value != -1 ;
}, "Please select an item from the dropdown list.");
$(document).ready(function(){
var validator = $("#Form1").validate({
onsubmit: true,
onblur: false,
onkeyup: false,
rules: { item_name2: { check_item_dropdown: true } },
messages: { item_name2: { check_dropdown: "Please select an item from the dropdown." } }
});
});
//-->
</script>
</html>