views:

254

answers:

3

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"&gt;

<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.

+1  A: 

have you tried

$("#submit").click(function() 
{    
   $("#form1").validate();                    
});
Elliott
No dice. That causes the form to submit every time.
David Morton
shouldnt declaring the scripts be in the header not the body/form tag?
Elliott
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
Looking at the demos they use " name " for each input, have you tried that?
Elliott
Edit - somebody beat me to it :p
Elliott
A: 

This SO Answer may help: http://stackoverflow.com/questions/619816/jquery-validation-plugin-in-asp-net-web-forms/619950#619950

micahwittman
Could you explain a bit more? I'm not using any id-mangling constructs in this page. Note that nothing, with the exception of the form itself, is marked with runat="server".
David Morton
+5  A: 

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)

brianpeiris
Thanks, that was it.
David Morton
Well done, brianpeiris!
micahwittman