Question

使用ASP.Net webforms进行验证。

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]在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);

还有其他更好的方式吗？

Answer 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/

jQuery验证元素没有形式

1 个答案: