简体   繁体   English

具有选择和文本输入的JQuery验证

[英]JQuery Validation with Select and Text Input

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. 我正在使用此处找到的JQuery Validation框架,并且试图验证同时具有select和input作为必填字段的表单。 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. 我的猜测是,我只是忽略了一些非常非常简单的事情。

You're missing name attributes on your form inputs. 您在表单输入中缺少name属性。 The Validation plugin ignores inputs (except select s, apparently) that don't have name attributes because they don't get submitted anyway . Validation插件会忽略不具有name属性的输入(显然, select除外),因为它们无论如何都不会提交

Just add name attributes to your inputs. 只需在输入中添加名称属性即可。

Working Demo: 工作演示:

http://jsbin.com/idupe (editable via http://jsbin.com/idupe/edit#html ) http://jsbin.com/idupe (可通过http://jsbin.com/idupe/edit#html进行编辑)

have you tried 你有没有尝试过

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM