代码之家 › 专栏 › 技术社区 › David Morton

带有select和文本输入的jquery验证

validation jquery javascript

David Morton · 技术社区 · 15 年前

我要花很长时间来验证这一点。

我正在使用找到的jquery验证框架 here ,我正在尝试验证一个同时具有select和input作为必需字段的表单。我已经设法将问题简化为一个相当简单的原型来演示问题:

<%@ 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>

提交时将完全忽略文本框验证。点击提交按钮似乎只验证选择。

也就是说,将文本框留空将强制弹出“此字段是必需的”消息,但当我单击“提交”时,表单仍然提交。

我想看到的是显而易见的:两个字段在提交之前都是必需的。就这样。我想有件事真的,真的很简单,我只是忽略了。

2 回复 | 直到 15 年前

brianpeiris 15 年前

你失踪了 name 表单输入的属性。验证插件忽略输入(除了 select S,显然)没有 名称 属性,因为它们 don't get submitted anyway .

只需将名称属性添加到输入中即可。

工作演示:

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

Elliott 15 年前

你试过了吗?

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