带有选择和文本输入的 JQuery 验证答案

【问题标题】：JQuery Validation with Select and Text Input带有选择和文本输入的 JQuery 验证
【发布时间】：2010-12-27 18:09:36
【问题描述】：

我正忙着让这个验证生效。

我正在使用找到 here 的 JQuery 验证框架，并且我正在尝试验证一个表单，该表单同时具有选择和输入作为必填字段。我已经设法将问题简化为一个演示问题的相当简单的原型：

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

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

话虽如此，将文本框留空将强制弹出“此字段为必填项”消息，但当我点击提交时，表单仍会提交。

我想看到的很明显：提交前这两个字段都是必需的。而已。我的猜测是我只是忽略了一些非常非常简单的事情。

【问题讨论】：

这个 SO 答案可能会有所帮助：stackoverflow.com/questions/619816/…>

标签： javascript jquery validation

【解决方案1】：

您在表单输入中缺少name 属性。验证插件会忽略没有 name 属性的输入（显然是 selects 除外），因为它们是 don't get submitted anyway。

只需将名称属性添加到您的输入。

工作演示：

http://jsbin.com/idupe（可通过http://jsbin.com/idupe/edit#html编辑）

【讨论】：

【解决方案2】：

你试过了吗

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

【讨论】：

没有骰子。这会导致表单每次都提交。
不应该将脚本声明在标题而不是正文/表单标签中吗？
当我将脚本移动到标题中时，在加载 aspx 页面时出现“需要对象”异常。因此，我将其移至表单内的 ScriptManager 下方。
看看他们对每个输入使用“name”的演示，你试过吗？
编辑 - 有人打败了我：p