2

Textbox に最小長の検証を追加し、カスタム エラー メッセージを表示するにはどうすればよいですか?

次の検証が必要です。

  • UserName の長さは 6 以上にする必要があります
  • パスワードと一致するパスワードの確認
  • アドレス1は必須です

ポップアップ テンプレートのコードは次のとおりです。テンプレートで指定された minlength は機能していませんが、maxlength は適切に機能しています。

<script id="popup_editor" type="text/x-kendo-template">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <label for="UserName"><b>UserName*</b></label>
            </td>
            <td>
                <div class="control-row">
                    <input type="text" 
                           name="UserName" 
                           id="UserName" 
                           class="k-input k-textbox"
                           required
                           **minLength**="6"
                           maxlength="8"
                           pattern="[a-zA-Z0-9]+"
                           validationMessage="Please enter username"/>
                    <span class="k-invalid-msg" data-for="UserName" ></span>
                </div>
            </td>
            <td></td>
            <td></td>
         </tr>
         <tr>
             <td>
                 <div>
                     <label for="Password"><b>Password*</b></label>
                 </div>
             </td>
             <td>
                 <div class="k-edit-label">
                     <input type="password" 
                            id="Password" 
                            name="Password"
                            class="k-input k-textbox"required
                            validationMessage="Please enter Password"/>
                     <span class="k-invalid-msg" data-for="Password"></span>
                 </div>
              </td>
              <td>
                  <div>
                      <label for="ConfirmPassword" style=""><b>Confirm Password</b></label>
                  </div>
              </td>
              <td>
                  <div class="k-edit-label">
                      <input type="password" 
                             id="ConfirmPassword" 
                             name="ConfirmPassword"
                             class="k-input k-textbox"required
                             validationMessage="Please enter Confirm Password"/>
                  </div>
              </td>
          </tr>
          <tr>
              <td>
                  <div>
                      <label for="Company_Name"><b>Company Name*</b></label>
                  </div>
              </td>
              <td>
                  <div class="k-edit-label">
                      <input name="Company_Name"
                             id="Company_Name"
                             required
                             pattern="[a-zA-Z0-9]+"
                             validationMessage="Please enter Valid CompanyName"/>
                  </div>
              </td>
              <td></td>
              <td></td>
          </tr>
          <tr>
              <td>
                 <div>
                     <label for="First_Name"><b>First Name*</b></label>
                 </div>
              </td>
              <td>
                  <div class="k-edit-label">
                      <input type="text"
                             name="First_Name"
                             id="First_Name"
                             data-type="string"
                             data-bind="value:First_Name"
                             class="k-input k-textbox" required
                             pattern="[a-zA-Z]+"
                             validationMessage="Please enter FirstName"/>
                   </div>
               </td>
               <td>
                   <div>
                       <label for="Last_Name"><b>Last Name*</b></label>
                   </div>
               </td>
               <td>
                   <div class="k-edit-label">
                       <input type="text" 
                               id="Last_Name"
                                name="Last_Name"
                                class="k-input k-textbox" required
                                pattern="[a-zA-Z]+"
                                validationMessage="Please enter LastName"/>
                   </div>
               </td>
           </tr>
           <tr>
               <td>
                   <div>
                       <label for="Address1"><b>Address1*</b></label>
                   </div>
               </td>
               <td>
                   <div class="k-edit-label">
                       <textArea style="resize: none;" 
                                 rows="5" 
                                 cols="18" 
                                 name="Address1" 
                                 maxlength="150" 
                                 id="Address1" required
                                 pattern="[a-zA-Z0-9]+"
                                 validationMessage="Please enter Address">
                       </textarea>
                   </div>
               </td>
           </tr>  
</table>
4

2 に答える 2

9

グリッドの dataSource 内でポップアップ編集用のカスタム検証を追加できます。

var dataSource = new kendo.data.DataSource({
    transport: {
        ...
    },
    schema: {
        model: {
            id: "UserName",
            fields: {
                UserName: {}
                Password: {}
                ConfirmPassword: {}
                Company_Name: {}
                First_Name: {}
                Last_Name: {}
                Address1: {
                    validation: {
                        minLength: function (input) {
                            if (input.is("[name=UserName]")) {
                                return input.val().length >= 6;
                            }
                            return true;
                        },
                        match: function (input) {
                            if (input.is("[name=ConfirmPassword]")) {
                                return input.val() == $("#Password").val();
                            }
                            return true;
                        }
                    }
                }
            }
        }
    }
});

尊重すべき点がいくつかあります: 検証は、ポップアップ内のすべての入力要素に対して実行されるため、

  1. モデル内の1 つのフィールドに対してのみ定義する必要があります。どちらでも構いません。
  2. 現在の実行でどの入力要素がチェックされているかを確認する必要があります。これにより、私の例の if ステートメントが実行されます。
  3. 定義するすべてのルールの最後にa を追加する必要がreturn trueあります。そうしないと、明示的にチェックしていないすべての入力に対してエラー メッセージが表示されます。戻り値が渡されない場合、kendo はチェックの結果が false であると自動的に想定します。

すべての検証ルールには独自の検証メッセージが必要です。そうしないと、検証ツールチップ ボックスに警告ロゴのみが表示され、テキストは表示されません。次のように、入力要素にhtml 属性 ( data-{validation rule}-msg )として追加できます。

<input type="text" 
       name="UserName" 
       id="UserName" 
       class="k-input k-textbox"
       required
       maxlength="8"
       pattern="[a-zA-Z0-9]+"
       validationMessage="Please enter username"
       data-minLenght-msg="Username must be at least 6 characters"/>


<input type="password" 
       id="ConfirmPassword" 
       name="ConfirmPassword" 
       class="k-input k-textbox"
       required
       validationMessage="Please enter Confirm Password"
       data-match-msg="Password and confirmation must be equal"/>

お役に立てれば

于 2013-05-13T11:57:13.267 に答える