0

ユーザー名が既に存在するかどうかを確認するために、knockout.js を使用してカスタム検証ルールを設定するのに問題があります。私の理解では、戻り値が true の場合はエラーはなく、それ以外の場合はエラーが設定されます。

カスタム検証の例を次に示します

//val is the username in question and searchType is the type of search(username or email)
function checkValue(val, searchType){
  if(searchType == 'userName'){
    $.post("/users/check_if_exists",{ 'type':'username', 'value': val },function(data) {
        var info = JSON.parse(data);
        if(info.username_availability == "available"){
            return searchType;
                            //I know this is working because I've alerted the searchtype here and it displays properly
        }
        else{
            return "unavailable";
        }
    });
  }
} 

ko.validation.rules['checkIfExists'] = {
    validator: function (val, searchType) {
        return searchType == checkValue(val, searchType); //if the username is availble, the searchType is returned back so it would return searchType == searchType which should be true meaning there are no errors
    },
    message: 'This username is taken, please select another.'
};
ko.validation.registerExtenders();

ネットワーク タブを確認したところ、POST は正しい値を返しています。値が利用可能な場合は、searchType を返します。そうすることで、真であるはずの searchType == searchType を比較します。しかし、そうではありません。

私がやろうとしていることを達成する他の方法はありますか?

アップデート

ここに私が今持っているものがあります

function checkValue(val, searchType, callback) {
     var callback = function(data) {
        return true;
    }
    $.post("/users/check_if_exists", { 'type':'username', 'value': val }, function(data) {
        info = JSON.parse(data);
        if(info.username_availability == "available"){
            callback(true);
        } else {
            callback(false);
        }
    }); 
}

ko.validation.rules['checkIfExists'] = {
    async: true,
    validator: function (val, searchType) {
        alert(checkValue(val, searchType));//returns undefined
        return checkValue(val, searchType);
    },
    message: 'This username is taken, please select another.'
};
ko.validation.registerExtenders();
4

3 に答える 3

2

ko.validation は検証関数を呼び出します。成功/失敗の状態を ko.validation に戻す方法に関して、検証関数には 2 つのタイプがあります。単純に true/false を返す方法、または「非同期」の方法です。

非同期の方法が存在するのは、 $.ajax が存在し、基本的にはこれだけです: 値を返す代わりに ( $.ajax 呼び出しを使用しているため、これは不可能です)、ajax 応答が返された後に ko.validation に何らかの方法で通知する必要があります。ブラウザに、ですよね？

したがって、このライブラリを作成した賢い人は、応答が利用可能になったときに呼び出さなければならない追加のパラメーター、関数 (コールバック) を使用して検証関数を呼び出します。

function checkValue(val, searchType, callback){
  if(searchType == 'userName'){
    $.post("/users/check_if_exists",{ 'type':'username', 'value': val },function(data) {
        var info = JSON.parse(data);
        if(info.username_availability == "available"){
            callback(true);
                            //I know this is working because I've alerted the searchtype here and it displays properly
        }
        else{
            callback(false);
        }
    });
  }
} 


ko.validation.rules['checkIfExists'] = {
    async: true,
    validator: checkValue,
    message: 'This username is taken, please select another.'
};
ko.validation.registerExtenders();
于 2013-08-22T22:12:01.923 に答える
0

あなたが書いたように、checkValueは常に未定義を返します。コールバック関数の内部から「return」を呼び出すと、そのコールバック関数の戻り値のみが設定されます (「外部関数」ではありません)。バリデーター関数がすぐに戻り値を期待する場合 (ノックアウトのように)、そのデータを非同期的に取得することはできません。

于 2013-08-22T21:27:09.533 に答える