2012-06-05 56 views
6

我試圖找出如何我可以把這個:使用jQuery驗證的遠程功能

$('#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

UPDATE:

出於某種原因,它沒有這樣做的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請求。我還有兩個問題。其中一個事實是,要完成另一個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!' 
         } 
        } 
       } 

      } 
     }, 

UPDATE:

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

UPDATE 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; 
    }   
} 

MODEL:

/** 
* 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; 
    } 
} 
+0

我包括一個鏈接到遠程功能。 –

+0

你能夠更改服務器端代碼嗎? –

+0

爲什麼我需要。我正在與JS一起工作。 –

回答

1

嗯,我不知道你的插件概念具體,但我想你想要它檢查與該插件如果用戶名是大於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'); 
    } 
}); 
+1

大概是正確的,但沒有回答問題 – anthonygore

16

做到這一點最簡單的方法是簡單地從你的服務器端資源返回true,錯誤消息作爲字符串,或false。根據jQuery validate documentation for remote

的響應被評估爲JSON並且必須是有效的元素, 真並且可以是任何假的,未定義或爲空無效的元素,使用 默認消息;或一個字符串,例如。 「該名稱已被佔用,請嘗試使用 peter123」作爲錯誤消息顯示。

這意味着,如果你可以改變你的服務器端代碼,以驗證成功或不成功驗證的情況下生成錯誤消息(「用戶名已在使用」)的情況下返回true,你可以只寫以下遠程規則:

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

您也可以簡單地從你的服務器端資源返回truefalse和客戶端上定義的錯誤消息。在這種情況下,你將不得不在messages對象上面的規則,然後一個屬性:

messages: { 
    username: { 
     remote: "username already in use" 
    } 
} 
+0

我有這兩個部分就像你做的,但是檢查我的服務器端代碼上面的某些原因,它不顯示消息,它顯示了錯誤的CSS,但沒有' t迴應出錯。 –

+0

當你在假的情況下返回一個字符串會發生什麼?它顯示嗎? –

+0

它張貼在js中的消息,而不是我放在假案例中的文本字符串 –

5

我知道一切都太遲了,但是這可能幫助其他人。

遠程方法是爲了收到一個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" 
       } 
      } 
     });}); 

希望它有助於某人,它幫助了我。

+0

感謝JSON編碼 – mokNathal

0

我最近需要在rails項目中進行遠程驗證,並且在輸入無效的情況下努力從服務器端發送正確的響應。最後,解決方案非常簡單。

如果服務器端檢查返回true,您可以發送真或「真」,否則你可以返回像「電子郵件已存在」或「電子郵件沒有有效的MX記錄」的字符串。該字符串將顯示爲窗體上的驗證消息。唯一的問題是從服務器端返回的消息字符串應該是有效的JSON,並且應該採用這種格式 - [「電子郵件已存在」]。

關於如何調試和發現解決方案的一些說明: 請參閱下面的jquery.validate.js中的遠程方法。我已經將日誌語句和錯誤函數添加到ajax調用中進行調試。當我從服務器端返回一個正常字符串時,拋出了一個jQuery.parseJson錯誤。

// http://jqueryvalidation.org/remote-method/ 

remote: function(value, element, param) { 
    if (this.optional(element)) { 
     return "dependency-mismatch"; 
    } 

    var previous = this.previousValue(element), 
     validator, data; 

    if (!this.settings.messages[ element.name ]) { 
     this.settings.messages[ element.name ] = {}; 
    } 
    previous.originalMessage = this.settings.messages[ element.name ].remote; 
    this.settings.messages[ element.name ].remote = previous.message; 

    param = typeof param === "string" && { url: param } || param; 

    if (previous.old === value) { 
     return previous.valid; 
    } 

    previous.old = value; 
    validator = this; 
    this.startRequest(element); 
    data = {}; 
    data[ element.name ] = value; 

    $.ajax($.extend(true, { 
     url: param, 
     mode: "abort", 
     port: "validate" + element.name, 
     dataType: "json", 
     data: data, 
     context: validator.currentForm, 
     success: function(response) { 
      console.log("response is "+response); 
      var valid = response === true || response === "true", 
       errors, message, submitted; 
      console.log("valid is "+valid); 
      validator.settings.messages[ element.name ].remote = previous.originalMessage; 
      if (valid) { 
       submitted = validator.formSubmitted; 
       validator.prepareElement(element); 
       validator.formSubmitted = submitted; 
       validator.successList.push(element); 
       delete validator.invalid[ element.name ]; 
       validator.showErrors(); 
      } else { 
       errors = {}; 
       message = response || validator.defaultMessage(element, "remote"); 
       console.log("else message is "+message); 
       errors[ element.name ] = previous.message = $.isFunction(message) ? message(value) : message; 
       validator.invalid[ element.name ] = true; 
       console.log("else errors[ element.name ] "+errors[ element.name ]); 
       validator.showErrors(errors); 
      } 
      previous.valid = valid; 
      validator.stopRequest(element, valid); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      console.log(xhr.status); 
      console.log(thrownError); 
     } 
    }, param)); 
    return "pending"; 
} 
+1

我認爲是試圖成爲一個答案,但請澄清你的措辭,因爲它看起來像一個問題,而不是 - 答案被埋在你的意識流中 – Ajean

+0

接受的答案只是沒有回答服務器端應該返回的內容,並且還有一條評論,說它不能回答這個問題。我不確定爲什麼首先被接受。 –

+0

@Dileep CK您有這些意見的原因是因爲您的問題出現在低質量審覈隊列中 - 您的文章的第一條評論是自動生成的,因爲評論者認爲您*提出了另一個問題*,甚至沒有嘗試回答。有很多人錯誤地發佈諸如「我也有這個問題,有沒有人解決它?」在答案框中。您的回答看起來像是第一次臉紅,因爲它以「我需要...」開頭,這就是我爲什麼建議對其進行重新說明的原因。 – Ajean

1
rules: { 
     username: { 
      minlength: 6, 
      maxlength: 12, 
      remote: 'register/isUsernameAvailable', 
     } 
     } 

您需要通過用戶名

3

我意識到這是舊的,但我有一個很難得到這方面的工作,以及和想分享什麼爲我工作。

客戶端表單驗證碼:

$('#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服務器端代碼(我使用剃刀網頁):

@{ 

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); 
} 
}