8

使用 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]是在 jquery 验证文件中未定义。我发现#validation-form在 DOM 中找不到，因为这个表单在那个愚蠢的 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);

还有其他更好的方法吗？

4

1 回答 1

1

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

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

如果你使用ajax，你必须 [把你的 jQuery ajaxValidatesubmitHandler插件

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

您可以将您的ajax和 areturn 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/

于 2013-08-06T07:47:41.877 回答