8

ASP.Net Web フォームを使用した検証に取り組んでいます。

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このフォームは愚かな ASP.Net で生成されたルート (親) 要素内にあるため、DOM には見つからないことがわかりました。

これをどのように処理しますか？

フォームなしでjQuery検証プラグインを使用して要素を検証する方法はありますか?

編集：いくつかの回避策を手に入れました：

最後に、これを親フォームで機能させ、フィールド名に基づいてルールを追加しました。もう一度、ASP.Net Web フォームがコントロール名フィールドを別の方法で生成することで問題を起こし始めました。

これがコードの回避策です。

    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