淘汰賽自定義驗證阿賈克斯問題

我想驗證一個郵政編碼輸入到一個表單字段是否有效的選擇從一個下拉字段的狀態。我擁有一張表中的所有數據，並能夠使用ajax調用進行確認。我的代碼下面允許我使ajax調用返回true/false，但我不知道如何觸發基於返回值的驗證。有人有想法嗎？淘汰賽自定義驗證阿賈克斯問題

自定義驗證：

ko.validation.rules["isValidZipCode"] = 
    { 
     getValue: function (o) { 
      return (typeof o === 'function' ? o() : o); 
     }, 
     validator: function (val, fields) { 
      var self = this; 
      var anyOne = ko.utils.arrayFirst(fields, function (field) { 
       var val = self.getValue(field); 

       if (val === undefined || val === null) 
        return "";     
       return true; 
      }); 

      var ajaxData = { state: anyOne, zipCode: val } 
      $.ajax({ 
       url: $("a#ValidateZipByState").attr("href"), 
       type: "POST", 
       data: ajaxData, 
       success: function (isValid) { 
        if (isValid) { 
         return true; 
        } else { 
         return false; 
        } 
       }, 
       error: handleSubmitError 
      }); 

      return; 
     }, 
     message: "Invalid zip code for this state" 
    };

視圖模型：

self.State = ko.observable(model.State).extend({ required: true }); 
self.ZipCode = ko.observable(model.ZipCode).extend({ required: true, pattern: /^[0-9]{5}(?:-[0-9]{4})?$/g, isValidZipCode: [self.State, self.ZipCode] });

來源

2017-02-06 Dean Friedland

看起來你需要設置異步標誌上你的驗證定義，然後你可以將結果返回給回調參數。 Reference

ko.validation.rules["isValidZipCode"] = 
{ 
    async: true, 
    getValue: function (o) { 
     return (typeof o === 'function' ? o() : o); 
    }, 
    validator: function (val, fields, callback) { 
     var self = this; 
     var anyOne = ko.utils.arrayFirst(fields, function (field) { 
      var val = self.getValue(field); 

      if (val === undefined || val === null) 
       return "";     
      return true; 
     }); 

     var ajaxData = { state: anyOne, zipCode: val } 
     $.ajax({ 
      url: $("a#ValidateZipByState").attr("href"), 
      type: "POST", 
      data: ajaxData, 
      success: function (isValid) { 
       callback(isValid); 
      }, 
      error: handleSubmitError 
     }); 

     return; 
    }, 
    message: "Invalid zip code for this state" 
};

來源

2017-02-06 20:03:29

傑森再次救援！非常感謝。我整天坐在這裏，無法弄清楚。我剛剛閱讀文檔。如果你不介意你能解釋一下async：true和callback在底層做了什麼？看起來像一些KO源文件:) –

據我所知，這一切都是魔法。淘汰賽驗證是開源的，所以如果你真的好奇，你可以看看他們的源代碼，但我並沒有看到自己的搖滾。 –

好吧，無論如何非常感謝你！ –

你是做一個異步驗證。你需要處理的第三個參數來validator：

validator: function (val, fields, callback) { 
     var self = this; 
     var anyOne = ko.utils.arrayFirst(fields, function (field) { 
      var val = self.getValue(field); 

      if (val === undefined || val === null) 
       return "";     
      return true; 
     }); 

     var ajaxData = { state: anyOne, zipCode: val } 
     $.ajax({ 
      url: $("a#ValidateZipByState").attr("href"), 
      type: "POST", 
      data: ajaxData, 
      success: function (isValid) { 
       if (isValid) { 
        callback(true); // HERE 
       } else { 
        callback(false); // HERE 
       } 
      }, 
      error: handleSubmitError 
     }); 

     return; 
    },

來源

2017-02-06 20:03:06

謝謝你，丹尼爾。真的很感激它！ –

淘汰賽自定義驗證阿賈克斯問題

回答

相關問題