Question

我们正在建立一个新的umbraco网站，其中包含许多注册表单，我们正在使用Jquery验证插件来验证这些表单。

由于每个usercontrol（宏）都包含服务器标记，我们必须在每个usercontrol中使用一个表单来使JQuery验证起作用。

但由于我们在每个usercontrol中使用一个表单，因此我们无法在页面中添加多个控件。

我们要做的是在母版页中添加一个带有runat =“server”的表单标签，然后使用一些container.validate（）进行所有验证。而不是form.validate（）。

就像这样

<script type="text/javascript>

    $('#regForm').validate();

</script>


<div id="regForm">

  <input type="text" class="required" name="Name" id="txtName" runat="server"/>

</div>

Answer 1

验证插件需要将要验证的各个字段包含在一组<form></form>标记中。

http://rocketsquared.com/wiki/Plugins/Validation

但是，您无需“提交”表单即可进行验证。对于示例，仍然可以使用onkeyup:或onfocusout:处理程序来实现。

因此，如果您只需将<div id="regForm">更改为<form id="regForm" ... >之类的内容，您就可以进行验证。

修改

For HTML 4，唯一必需的 form属性为action，因此您无法仅将<div id="regForm"> </div>替换为此<form id="regForm" action="#"> </form> ...

{{1}}

Answer 2

默认情况下，asp.net只能有一个带有runat =“server”的表单。但是，如Sparky的答案所示，您可以在页面上有多个表单。有关asp.net中多个表单的更多信息，请访问：http://msdn.microsoft.com/en-us/magazine/cc164151.aspx。

Answer 3

这是一个迟到的答案，但是看到现有的答案都没有被接受，这是我对此的看法。我刚遇到类似的情况，我需要验证表单中包含的div以进行模态对话。以下是我解决它的方法。

<script type="text/javascript>
  jQuery(function($) {
    $('form').validate();

    $('.continue').click(function() {
        var isValid = true;
        var $div = $(this).closest("div");
        $div.find(":input").each( function() {
           isValid = $(this).valid() && isValid;
        });
        if ( isValid ) {
           var $next = $div.hide().next('div');
           if ( $next.length == 0 ) {
              $(form).submit();
           } else {
              $next.show();
           }
        }
    });
  });
</script>

<form action="#">
    <div id="div1">
       <input type="text" required name="Name" id="txtName"        runat="server"/>
       <button class="continue">Continue</button>
    </div>
    <div id="div2">
       <input type="text" required name="Address" id="txtAddress" runat="server"/>
       <input type="text" required name="City" id="txtCity" runat="server"/>
       <input type="text" required name="State" id="txtState" runat="server"/>
       <input type="text" required name="Zip" id="txtZip" runat="server"/>
       <button class="continue">Continue</button>
    </div>
</form>

在container.validate（）而不是form.validate（）上进行Jquery验证

3 个答案: