JQuery Validation with Select and Text Input

Question

I'm having one heck of a time getting this validation to work.

I'm using the JQuery Validation framework found here, and I'm trying to validate a form that has both a select and an input as required fields. I've managed to simplify the problem down to a rather simple prototype that demonstrates the problem:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ValidateTest._Default" %>

<!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 runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server" action="javascript:alert('hi!');">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
               <Services>
                   <asp:ServiceReference Path="~/Scripts/jquery-1.3.2.min.js" />
                   <asp:ServiceReference Path="~/Scripts/jquery.validate.min.js" />
               </Services>
            </asp:ScriptManager>  
            <div>
                <script type="text/javascript">
                    $(document).ready(function() { 
                        $("#form1").validate();
                    });
                </script>   
                <table>
                    <tr>
                        <td>
                            <select id="someselect" class="required">
                                <option></option>
                                <option value="value1">value1</option>
                                <option value="value2">value2</option>
                                <option value="value3">value3</option>
                            </select>         
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="someinput" type="text" class="required" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="somesubmit" type="submit" class="submit" value="Submit" />
                        </td>
                    </tr>
                </table>    
            </div>
        </form>
    </body>
</html>

The text box validation is being completely ignored on submit. It seems that hitting the submit button only validates the select.

That being said, leaving the textbox blank will force the "This field is required" message to pop up, but when I hit submit, the form still submits.

What I'd like to see is obvious: both fields are required before submit. That's it. My guess is there's something really, really simple I'm just overlooking.

This SO Answer may help: – micahwittman Dec 17 '09 at 17:39 — micahwittman, Dec 17 '09 at 17:39

score 5 · Accepted Answer · answered Dec 17 '09 at 17:48

You're missing name attributes on your form inputs. The Validation plugin ignores inputs (except selects, apparently) that don't have name attributes because they don't get submitted anyway.

Just add name attributes to your inputs.

Working Demo:

http://jsbin.com/idupe (editable via http://jsbin.com/idupe/edit#html)

score 1 · Answer 2 · answered Dec 17 '09 at 17:38

1

have you tried

$("#submit").click(function() 
{    
      $("#form1").validate();                    
});

answered Dec 17 '09 at 17:38

Elliott

3,812
24
69
93

No dice. That causes the form to submit every time. – David Morton Dec 17 '09 at 17:40
shouldnt declaring the scripts be in the header not the body/form tag? – Elliott Dec 17 '09 at 17:42
When I move the script into the header, I get an "Object Required" exception on loading the aspx page. Hence my moving it to within the form, below the ScriptManager. – David Morton Dec 17 '09 at 17:45
Looking at the demos they use " name " for each input, have you tried that? – Elliott Dec 17 '09 at 17:50
Edit - somebody beat me to it :p – Elliott Dec 17 '09 at 17:50

JQuery Validation with Select and Text Input

2 Answers2

Working Demo: