jQuery验证元素没有形式

Question

jQuery验证元素没有形式

Mur*_*san 7 html asp.net jquery jquery-validate

使用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>

Run Code Online (Sandbox Code Playgroud)

使用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);
     }
    });
    });

Run Code Online (Sandbox Code Playgroud)

但问题是,我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);

Run Code Online (Sandbox Code Playgroud)

有没有其他更好的方法呢？

Answer 1

Opt*_*ime 1

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

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

如果您使用ajax，您必须[将您的jQuery Validate 插件放在ajax里面submitHandler

您可以删除或阻止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
        }
    });

});

Run Code Online (Sandbox Code Playgroud)

请参阅演示： http://jsfiddle.net/NEPsc/5/

归档时间：	12 年，2 月前
查看次数：	11802 次
最近记录：	6 年，2 月前