Неверная проверка формы с использованием jquery (плагина)

Question

Плагин, похоже, работает нормально. Если я оставлю два поля пустыми, я получаю уведомление, что они требуются, и что они должны быть действительным числом.

Проблема, с которой я столкнулся, заключается в том, что я заполняю два текстовых поля с правильными данными и ударяю по кнопке добавления, я нахожу ошибку в моем коде ниже. Данные по-прежнему отправляются на мой контроллер, и мое приложение выполняется, но предупреждение отключается от моего раздела с ошибкой.

$(document).ready(function (e) { 
      $("#frmOverride").validate({ 
       rules: { 
        maintenancePercentage: { 
         required: true, 
         number: true 
        }, 
        officePercentage: { 
         required: true, 
         number: true 
        } 
       } 
      }); 
    } 

Этот раздел в случае щелчка моей кнопки Сохранить в:

 var seg1 = dataItem.Seg1_Code; 
     var maintPercentage = $("#maintenancePercentage").val(); 
     var officePercentage = $("#officePercentage").val(); 

     if ($('#frmOverride').validate().form()) { 
      $.ajax({ 
       type: "POST", 
       url: "/PayrollMarkup/AddPayrollMarkupOverride", 
       data: { 
        seg1: seg1, 
        maintenancePercentage: maintPercentage, 
        officePercentage: officePercentage 
       }, 
       success: function (data) { 
        //console.log(data); 
        var window = $("#window").data("kendoWindow"); 
        $('#window_wnd_title').text(""); 
        window.close(); 
        $("#maintenancePercentage").val(''); 
        $("#officePercentage").val(''); 

        readDefaultsGrid(); 

        readNotDefaultsGrid(); 
       }, 

       error: function (e) { 
        console.log(e); 
        alert("There was an error setting custom values. Maintenance % and Office % are required."); 
       } 
      }); 
     } 

Answer 1

Там нет необходимости делать это ...

if ($('#frmOverride').validate().form()) { 
     $.ajax({ ... 

И вы, конечно, не хотите делать какие-либо из этого внутри обработчика в click событий. Это связано с тем, что плагин jQuery Validate уже фиксирует событие click, проверяя действительную форму и предоставляя функцию обратного вызова submitHandler, которая была полностью предназначена для отправки через ajax.

As per documentation,

submitHandler, Обратный звонок, по умолчанию: по умолчанию (родной) отправки формы

Callback для обработки фактического представить , когда форма действительна. Возвращает форму как единственный аргумент. Заменяет по умолчанию submit. Правильное место для отправки формы через Ajax после этого проверено.

$(document).ready(function() { 

    $("#frmOverride").validate({ 
     rules: { 
      maintenancePercentage: { 
       required: true, 
       number: true 
      }, 
      officePercentage: { 
       required: true, 
       number: true 
      } 
     }, 
     submitHandler: function (form) { 
      // your ajax goes here 
      return false; // to block page redirect since you're using ajax 
     } 
    }); 

}); 

Простой DEMO: http://jsfiddle.net/4kn3y/

Answer 2

Вы должны очистить код, код ищет тот же тег 4 раза (!).

Вместо того, чтобы повторять $ ('# PayrollMarkupDefaultsGrid'). Data ("kendoGrid") четыре раза хранить его в переменной и использовать ее методы и члены через эту переменную.

Что касается вашей проблемы, я считаю, что ваш объект кендо еще не инициализирован, когда вы уже пытаетесь его использовать. Я считаю, что ваш код генерирует исключение здесь:

$('#PayrollMarkupDefaultsGrid').data("kendoGrid").dataSource.read(); 

, потому что либо тег не существует, или он не инициализируется как объект кендо или объект кендо не член общественного DataSource или элемент DataSource не имеет функции read(). Пожалуйста, проверьте их и сообщите мне о ваших результатах.