Условная и настраиваемая проверка в полях формы Добавить / Изменить при использовании шаблона настраиваемого всплывающего редактора сетки Kendo

Я использую пользовательский шаблон для кендо сетки всплывающей формы добавления / редактирования. Вот моя рабочая ДЕМО

Я хочу реализовать условную проверку в полях формы, например, если для Адреса введено какое-либо значение (не оставлено пустым), тогда поля Город и Почтовый индекс должны стать обязательными, в противном случае они могут быть пустыми. Также я хочу создать пользовательское правило проверки для PostCode, чтобы его длина всегда была равна 4, в противном случае должно отображаться пользовательское сообщение об ошибке "Почтовый индекс должен состоять из четырех цифр".

Я сослался на эти ссылки:

Правила валидации вdatasource.model

Пользовательские правила проверки и сообщения об ошибках

но я не могу понять, как я могу реализовать проверки в моей модели источника данных?

Вот мой код:

HTML:

<h3>I want to implement conditional validation on Add/Edit form such as if any value is entered for Address then the fields City and Postal Code should become required</h3>
<div id="grid"></div>
<script id="popup-editor" type="text/x-kendo-template">
  <p>
    <label>Name:<input name="name" required /></label>
  </p>
  <p>
    <label>Age: <input data-role="numerictextbox" name="age" required /></label>
  </p>

  <p>
    <label>Address: <input name="address"/></label>
  </p>

  <p>
    <label>City: <input name="city"/></label>
  </p>

  <p>
    <label>Post Code: <input name="postcode"/></label>
  </p>
</script>

JS:

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: { id: "id" },
      fields: {
        name:{},
        age:{},
        address:{},
        city:{},
        postcode:{},
      },
    }
  },
  editable: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  },
    toolbar: [{ name: 'create', text: 'Add' }]
});
Источник

2 ответа

Решение

Вот ДЕМО, как я это реализовал:

HTML:

<div id="grid"></div>
<script id="popup-editor" type="text/x-kendo-template">
<div id="myForm">
  <p>
    <label>Name:<input name="name" required /></label>
  </p>
  <p>
    <label>Age: <input data-role="numerictextbox" name="age" required /></label>
  </p>

  <p>
    <label>Address: <input name="address" id="address"/></label>
  </p>

  <p>
    <label>City: <input name="city" id="city"/></label>
  </p>

  <p>
    <label>Post Code: <input name="postcode" id="postcode"/></label>
    <!--<span class="k-invalid-msg" data-for="postcode"></span>-->
  </p>
  </div>
</script>

JS:

var validator;
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { field: "address" },
    { field: "city" },
    { field: "postcode" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30, address:'Addr', city:"city", postcode: '1234' },
      { id: 2, name: "John Doe", age: 33, address:'Addr11', city:"city11", postcode: '4321' }
    ],
    schema: {
      model: { id: "id" },
      fields: {
        name:{},
        age:{},
        address:{},
        city:{},
        postcode:{},
      },
    }
  },
  editable: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  },
  toolbar: [{ name: 'create', text: 'Add' }],
  save: function(e) {//alert('save clicked');
    if(!validator.validate()) {
        e.preventDefault();
    }
  },    
  edit: function(e){
  //alert('edit clicked');
    validator = $("#myForm").kendoValidator({
    messages: {
        postcode: "Please enter a four digit Postal Code"
    },
    rules: {
        postcode: function(input) {
            //console.log(input);
            if (input.is("[name='address']")) 
            {
                if (input.val() != '')
                {
                    $('#city, #postcode').attr('required', 'required');
                    //return false;
                }
                else
                {
                    $('#city, #postcode').removeAttr("required");
                }
            }
            else if (input.is("[name='postcode']")) {
                if ($('#address').val() != '' && input.val().length != 4)
                    return false;
            }
            return true;
        }
    },
}).data("kendoValidator");
  },
});
Источник

Если бы я сделал это, я бы сделал такой подход, где

  1. Я создам собственный валидатор
  2. Переопределите функцию редактирования (сетки), поместите валидатор туда
  3. Переопределите функцию сохранения (сетки), используйте validator.validate() перед сохранением

Вот пример в додзё, в основном это код сетки:

var validator;  
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
    data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
    schema: {
      model: { id: "id" },
      fields: {
        name:{},
        age:{},
        address:{},
        city:{},
        postcode:{},
      },
    }
  },
  save: function(e) {
    if(!validator.data("kendoValidator").validate()){
        e.preventDefault();
    }
  },    
  edit: function(){
     validator = $("#test-form").kendoValidator({
      validateOnBlur: false,
      rules: {
        matches: function(input) {

          var requiredIfNotNull = input.data('test');
          // if the `data-test attribute was found`
          if (requiredIfNotNull) {
            // get the input requiredIfNotNull
            var isFilled = $(requiredIfNotNull);

            // trim the values and check them
            if ( $.trim(isFilled.val()) !== "" )  {

              if($.trim(input.val()) !== ""){
                // the fields match
                return true;
                }else{
                return false; 
              }

            } 
            // don't perform any match validation on the input since the requiredIf
            return true;
          }

          // don't perform any match validation on the input
          return true;

        }
      },
      messages: {
        email: "That does not appear to be a valid email address",
        matches: function(input) {
          return input.data("testMsg");
        }
      }
    });
  },
  editable: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  },
    toolbar: [{ name: 'create', text: 'Add' }]
});

PS: я привык ко многим, если заявление, вы могли бы упростить его, я думаю

Источник
Другие вопросы по тегам