jQuery验证没有表单的元素答案

【问题标题】：jQuery validate element without formjQuery验证没有表单的元素
【发布时间】：2013-08-06 07:33:40
【问题描述】：

使用 ASP.Net 网络表单进行验证。

默认情况下，ASP.Net 在根级别添加一个表单。这意味着我们只需要在表单中添加所有控件。

但是我需要定义需要验证的页面的一小部分，我使用了 jQuery 验证插件。

HTML

 <html>
 <body>
  <form method="post" action="AssetDetails.aspx" id="Form1" enctype="multipart/form-
   data">
     //Other page content goes here. which doesnt require validation

    <form class="form-horizontal" id="validation-form" method="get">
                        <div class="row-fluid">
                            <div class="widget-header header-color-blue2">
                                <h5>
                                    Step 1</h5>
                            </div>
          <input type="email" name="ctl00$MainContent$AssetTabs$DefineCriticality$email" id="email" class="span6" />
                        </div>

     </form>
  </form>
  </body></html>

Javascript

  $(document).ready(function(){
  alert($('#validation-form').length); // gives 0, because this form nested under  
                                          another form generated by ASP.Net

  $('#validation-form').validate({
            errorElement: 'span',
            errorClass: 'help-inline',
            focusInvalid: false,
            rules: {
                email: {
                    required: true,
                    email: true
                }},
             messages: {
                email: {
                    required: "Please provide a valid email.",
                    email: "Please provide a valid email."
                }},
     errorPlacement: function (error, element) {
        error.insertAfter(element);
     }
    });
    });

但问题是，我收到错误 this[0] is undefined in jquery 验证文件。我发现在 DOM 中找不到 #validation-form，因为该表单位于愚蠢的 ASP.Net 生成的根（父）元素中。

我们如何处理这个问题？

我们有没有办法使用 jQuery 验证插件来验证元素而不需要表单？

编辑：有一些解决方法：

最后，我使用父表单并根据字段名称添加规则。 ASP.Net webform 再次通过生成不同的控件名称字段开始给麻烦。

这里是代码解决方法。

    var validationParams = {
        errorElement: 'span',
        errorClass: 'help-inline',
        focusInvalid: false,
        rules: {},
        messages: {},

        invalidHandler: function (event, validator) {
            $('.alert-error', $('.login-form')).show();
        },

        highlight: function (e) {
            $(e).closest('.control-group').removeClass('info').addClass('error');
        },

        success: function (e) {
            $(e).closest('.control-group').removeClass('error').addClass('info');
            $(e).remove();
        },

        errorPlacement: function (error, element) {
          error.insertAfter(element);
        },

        submitHandler: function (form) {
        },
        invalidHandler: function (form) {
        }
    };

    var emailFieldName = $('#email').attr('name');

    validationParams['rules'][emailFieldName] = { required: true };
    validationParams['messages'][emailFieldName] = { required: "Email is required" };

    $('#Form1').validate(validationParams);

还有其他更好的方法吗？

【问题讨论】：

jQuery validation without "form" tag的可能重复

标签： jquery html asp.net jquery-validate

【解决方案1】：

我不是告诉你其他选项，而是你问的，如果你可以使用没有表单的验证插件。

您必须拥有<form></form> 标签才能让 jQuery Validate 插件正常运行，或者根本不需要。

如果你使用ajax，你必须[把你的ajax放在jQuery Validate插件的submitHandler中

您可以删除或阻止 action 并仍然使用 jQuery Validate。

您可以将ajax 和return false 放在submitHandler 中，不会发生常规提交：

$(document).ready(function() {

    $('#myform').validate({ // initialize plugin
        // your rules & options,
        submitHandler: function(form) {
            // your ajax would go here
            return false;  // blocks regular submit since you have ajax
        }
    });

});

查看演示：http://jsfiddle.net/NEPsc/5/

【讨论】：

问题是由于父表单，我的#validation-form 不可用。我更新了我的问题。我需要使用 jquery 验证插件进行验证，无需表单即可：)
你可以简单地使用$(parent-form).validate()，并为你需要的元素使用checks(validation)，你为什么在form中使用form？
我没有使用。这就是 ASP.Net 愚蠢的网络表单的设计方式。我们无法控制删除该父表单
那么对不起。我还没用过asp。:(
我更新了我的解决方案。不确定这是不是更好的方法:)