0

サインアップフォームに取り組んでいます。必須、最小長などのフィールドを検証し、次のような要素の前に検証エラーメッセージを配置しました。

$('#register').validate(
{
    rules: 
    {
        username: 
        {
            required: true,
            minlength: 6
        },
        email: 
        {
            required: true,
            email: true
        },
        password: 
        {
            required: true,
            minlength: 8
        },
        confirmPassword: 
        {
            required: true,
            equalTo: '#password'
        }
    },
    messages: 
    {
        username:
        {
            required: 'Please enter username',
            minlength: 'Username too short'
        },
        email: 
        {
            required: 'Please enter email',
            email: 'Invalid E-Mail'
        },
        password:
        {
            required: 'Please enter password',
            minlength:'Password too short'
        },
        confirmPassword: 
        {
            required: 'Please provide password',
            equalTo: 'Passwords don\'t match'
        }
    },
    errorPlacement: function(error, element)
    {
        error.insertBefore(element);
    }
});

クライアント側の検証中はすべて問題ありませんが、ユーザー名の複製やメールの複製など、サーバー側の検証も確認する必要があります。したがって、ユーザー名が既に存在する場合は、要素の前に検証エラーメッセージを再度配置する必要があります。では、どうなるでしょうか。私はすべてのajax、request、php / mysqlのコーディングを行い、エラーメッセージを返しました。jqueryの検証と同じスタイルの要素の前に表示する必要があります。

4

2 に答える 2

1

各要素にカスタム検証関数を追加できます。たとえば、「username」フィールドにajax検証を追加する必要がある場合、これは次のように実行できます。

$.validator.addMethod("validateUserName", function(val, element) {

    $.ajax({
        type : "post",
        async: false,
        url : YOUR_URL,
        data : {'username': val},
        dataType : 'json',
        error : function(jqXHR, textStatus, errorThrown){
            //alert("some error occured while submitting the form");
            return false;
        },
        success : function(  response,  textStatus,  jqXHR ){
            //Assuming you return true in server reply
            if( response.status == true ){
                //Username valid
                return true;
            } else {
                //Invalid Username
                return false;
            }
        }
    });
}, "Username Already exists.");

そしてあなたの検証jsはこのように見えるでしょう

$('#register').validate(
{
    rules: 
    {
        username: 
        {
            required: true,
            minlength: 6,
            validateUserName: true,
        },
 .....

したがって、繰り返しユーザー名がある場合、カスタムエラー「ユーザー名は既に存在します」。エラーラベルに表示されます。

于 2013-01-31T06:21:44.063 に答える
0

ここで、うまくいきました。コードを修正してください。正解としてマークする必要があります。

var isSuccess ;
$.validator.addMethod('validateUserName', function(val, element)
{
    $.ajax(
    {
     type : 'post',
     async: false,
     url :  'include/validateUser.php',
     data : {'username': val},
     dataType : 'json',
     error : function(jqXHR, textStatus, errorThrown)
     {
        alert('some error occured while submitting the form');
     },
     success : function(response,  textStatus,  jqXHR )
     {
        isSuccess = response ;
     }
    });
   return isSuccess ;
}, 'Username Already exists.');
于 2013-01-31T17:44:22.877 に答える