12

私はこれをどのように変えることができるかを理解しようとしています:

$('#username').blur(function(){
    $.post('register/isUsernameAvailable', 
           {"username":$('#username').val()}, 
           function(data){
               if(data.username == "found"){
                   alert('username already in use');
               }
           }, 'json');
});

これに近い何かに:

rules: {
        username: {
            minlength: 6,
            maxlength: 12,
            remote: {
                url: 'register/isUsernameAvailable',
                type: 'post',
                data: {
                    'username': $('#username').val()
                } 

            }
        }

しかし、私はそれを終わらせるのに苦労しています。アラートの代わりにエラーメッセージを表示させたいのですが、実際のjquery検証メッセージ内にメッセージを設定できます。

http://docs.jquery.com/Plugins/Validation/Methods/remote#options

アップデート:

何らかの理由で、POSTとして実行せず、GETリクエストとして実行し、理由がわかりません。更新されたコードは次のとおりです。

rules: {
        username: {
            minlength: 6,
            maxlength: 12,
            remote: {
                url: 'register/isUsernameAvailable',
                dataType: 'post',
                data: {
                    'username': $('#username').val()
                },
                success: function(data) {
                    if (data.username == 'found')
                    {
                        message: {
                            username: 'The username is already in use!'
                        }
                    }
                }

            }
        },

更新2:

これで、POSTリクエストの取得に戻ってきました。さらに2つの問題が発生しています。その1つは、別のPOSTリクエストを実行するには、ユーザーがフォームを更新する必要があるという事実です。そして最後の問題は、返されたユーザー名が見つかった場合、エラーメッセージが表示されないことです。

rules: {
        username: {
            minlength: 6,
            maxlength: 12,
            remote: {
                type: 'post',
                url: 'register/isUsernameAvailable',
                data: {
                    'username': $('#username').val()
                },
                dataType: 'json',
                success: function(data) {
                    if (data.username == 'found')
                    {
                        message: {
                            username: 'The username is already in use!'
                        }
                    }
                }

            }
        },

アップデート:

public function isUsernameAvailable()
{
    if ($this->usersmodel->isUsernameAvailable($this->input->post('username')))
    {
        return false;
    }
    else
    {
        return true;
    }        
}

更新4:

コントローラ:

public function isUsernameAvailable()
{
    if ($this->usersmodel->isUsernameAvailable($this->input->post('username')))
    {
        return false;
    }
    else
    {
        return true;
    }        
}

public function isEmailAvailable()
{
    if ($this->usersmodel->isEmailAvailable($this->input->post('emailAddress')))
    {
        return false;
    }
    else
    {
        return true;
    }        
}

モデル:

/**
 * Check if username available for registering
 *
 * @param   string
 * @return  bool
 */
function isUsernameAvailable($username)
{
    $this->db->select('username');
    $this->db->where('LOWER(username)=', strtolower($username));
    $query = $this->db->get($this->usersTable);
    if ($query->num_rows() == 0)
    {
        return true;
    }
    else
    {
        return false;
    }
}

/**
 * Check if email available for registering
 *
 * @param   string
 * @return  bool
 */
function isEmailAvailable($email)
{
    $this->db->select('email');
    $this->db->where('LOWER(email)=', strtolower($email));
    $query = $this->db->get($this->usersTable);
    if($query->num_rows() == 0)
    {
        return true;
    }
    else
    {
        return false;
    }
}
4

8 に答える 8

25

これを実現する最も簡単な方法は、単純trueに、エラー メッセージを文字列として返すかfalse、サーバー側のリソースから返すことです。リモートのjQuery検証ドキュメントによると:

応答は JSON として評価され、有効な要素の場合は true である必要があり、無効な要素の場合は false、未定義、または null のいずれかになります。デフォルト メッセージを使用します。または文字列。「その名前は既に使用されています。代わりに peter123 を試してください」というエラー メッセージが表示されます。

これは、サーバー側のコードを変更してtrue、検証が成功した場合に返すか、検証に失敗した場合にエラー メッセージ (「ユーザー名は既に使用されています」) を返すように変更できる場合、次のリモート ルールを記述するだけでよいことを意味します。

remote: {
    type: 'post',
    url: 'register/isUsernameAvailable',
    data: {
        'username': function () { return $('#username').val(); }
    },
    dataType: 'json'
}

trueまたはfalse、サーバー側のリソースから単純に戻り、クライアントでエラー メッセージを定義することもできます。その場合、上記のルールと、messagesオブジェクト内のプロパティがあります。

messages: {
    username: {
        remote: "username already in use"
    }
}
于 2012-06-05T21:21:18.003 に答える
10

手遅れであることはわかっていますが、これは他の人を助けることができます。

リモート メソッドは Json 文字列を受け取るためのものなので、サーバー側はメソッドにこのようなものを返す必要があります...

echo(json_encode(true)); // if there's nothing matching
echo(json_encode(false));

これは、ユーザーのニックネームを検証しようとして作成した JS コードの例です。

$(document).ready(function(){
            $('#form').validate({
            rules: {
                user_nickname: {
                    remote: {
                        url: "available.php",
                        type: "post",
                        data: {
                          user_nickname: function() {
                            return $( "#user_nickname" ).val();
                          }
                        }
                      }               
                }
            },
            messages:{
                user_nickname: {
                    remote: "Username already taken"
                }
            }
        });});

それが誰かを助けることを願っています、それは私を助けました.

于 2014-09-09T17:00:59.033 に答える
7

これは古いことだと思いますが、これを機能させるのにも苦労したので、何がうまくいったかを共有したいと思いました.

クライアント側のフォーム検証コード:

$('#frmAddNew').validate({
onkeyup: false,
rules: {
    ADID: {
        required: true,
        alphanumeric: true,
        maxlength: 10,
        remote: {
            url: "ADIDValidation.cshtml",
            type: "post",
            dataType: "json",
            dataFilter: function (data) {
                if (data) {
                    var json = $.parseJSON(data);
                    if (json[0]) {
                        return JSON.stringify(json[0].valid) /* will be "true" or whatever the error message is */
                    }
                }
            },
            complete: function (data) {
               /* Additional code to run if the element passes validation */
                if (data) {
                    var json = $.parseJSON(data.responseText);
                    if (json[0]) {
                        if (json[0].valid === "true") {
                            $('#FirstName').val(json[0].FirstName);
                            $('#LastName').val(json[0].LastName);
                        }
                    }
                }
            }
        }
    }
},
messages: {
    ADID: {
        required: "Please Enter an ADID of the Employee",
        alphanumeric: "The ADID Can Only Contain Letters and Numbers",
        maxlength: "ADID For User's Current Permissions Must Be 10 Characters or Less"
    }
},
submitHandler: function (form) {
    form.submit();
},
errorContainer: $('section.errorCon'),
errorLabelContainer: $('ol', 'section.errorCon'),
wrapper: 'li',
showErrors: function (errors) {
    var error = this.numberOfInvalids();
    var message = error == 1
        ? 'You missed 1 field:'
        : 'You missed ' + error + ' fields:';
    $('section.errorCon h3').html(message);
    this.defaultShowErrors();
}
});

ADIDValidation.cshtml のサーバー側コード (Razor Web ページを使用しています):

@{

Layout = null;

if(IsPost)
{
    var db = Database.Open("<enter connection name>");
    var sql = "<enter sql or stored procedure>";
    var strADID = Request["ADID"];

    var result = db.Query(sql, strADID);
    IEnumerable<dynamic> response;

    if(result.Any()) 
    {
        @* "true" indicates the element passes validation. Additional data can be passed to a callback function *@
        response = result.Select(x => new
        {
            valid = "true",
            FirstName = x.FirstName,
            LastName = x.LastName
        });
    }

    else
    {
        @* The element did not pass validation, the message below will be used as the error message *@
        response = new[] {
            new {valid = "The Employee's ADID '" + strADID.ToString() + "' Is Not Valid. Please Correct and Resubmit"}
        };
    }

    Json.Write(response, Response.Output);
}
}
于 2016-03-18T19:40:15.833 に答える
0
rules: {
        username: {
            minlength: 6,
            maxlength: 12,
            remote: 'register/isUsernameAvailable',
         }
        }

ユーザー名を渡す必要があります

于 2016-02-23T14:12:05.730 に答える
-2

プラグインの概念については具体的にはわかりませんが、ユーザー名が6より大きいか12より小さいかをそのプラグインで確認してほしいと思います.プラグインなしのjQueryを使用したコアの例から、追加するのと同じくらい簡単ですコンセプトに少しのif-else。

$('#username').blur(function(){
    if($('#username').val().length < 6 || $('#username').val().length > 12)
    {
        alert('Username must be between 6 and 12 characters');
    }
    else
    {
       $.post('register/isUsernameAvailable', 
              {"username":$('#username').val()}, 
              function(data){
                  if(data.username == "found"){
                      alert('username already in use');
                  }
              }, 'json');
    }
});
于 2012-06-05T19:05:10.980 に答える