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: <stackoverflow.com/questions/619816/…> — micahwittman
– micahwittman, Commented Dec 17, 2009 at 17:39

brianpeiris · Accepted Answer · 2009-12-17 17:48:25Z

5

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)

answered Dec 17, 2009 at 17:48

brianpeiris

10.8k1 gold badge34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Elliott · Accepted Answer · 2009-12-17 17:38:52Z

1

have you tried

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

answered Dec 17, 2009 at 17:38

Elliott

3,87424 gold badges72 silver badges93 bronze badges

5 Comments

David Morton Over a year ago

No dice. That causes the form to submit every time.

Elliott Over a year ago

shouldnt declaring the scripts be in the header not the body/form tag?

David Morton Over a year ago

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.

Elliott Over a year ago

Looking at the demos they use " name " for each input, have you tried that?

Elliott Over a year ago

Edit - somebody beat me to it :p

Collectives™ on Stack Overflow

JQuery Validation with Select and Text Input

2 Answers 2

Working Demo:

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Working Demo:

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related