[英]jquery form validation with username availibility check
我正在使用jQuery(jquery.validate.js)進行表單驗證。 我需要檢查用戶名是否可用,但是我無法弄清楚如何使用它。 請幫忙。
HTML:
<input type="text" name="username" class="required checkAvailability" />
jQuery的:
$(document).ready(function(){
$.validator.addMethod("checkAvailability", function(username) {
var isSuccess = false;
$.ajax({ url: "/checkAvailibility",
data: "username=" + username,
async: false,
success: function(available) {
if (available == "TRUE")
isSuccess = true;
return $("message", returnData).text() == "Username available";
}
});
}, "Username not available");
$("#formID").validate();
});
服務器端程序返回的字符串為“ TRUE”或“ FALSE”(由“ returnData”變量返回)。
我的問題:如何將消息和檢查結果都返回到validate(),以便消息可以顯示在字段旁邊,並且如果用戶名不可用,則不會提交表單?
您可以稍微重組一下代碼嗎? 就像是:
$(document).ready(function(){
$validUsername = false;
$("input.checkAvailability").keyup(function(){
$.ajax({ url: "/checkAvailibility",
data: "username=" + $(this).val(),
success: function(available) {
if (available == "TRUE"){
$validUsername = true;
$("message", returnData).text("Username available");
}
else{
// Do something
}
}
});
});
$.validator.addMethod("checkAvailability", function(username) {
return $validUsername;
}, "Username not available");
$("#formID").validate();
});
檢查服務器上表單字段的最簡單,標准的方法是使用“遠程”方法。 從服務器端方法只需返回文本“ true”或“ false”,而不返回returnData = true或其他任何內容。
Javascript應該是這個
<script>
$(function () {
$('form').validate({
rules: { username:
{
remote: '/checkAvailibility'
}
}
});
});
</script>
我通過使用codeigniter實現了這一點。 可能對您有幫助。
控制器功能:
function checkUserName()
{
$user_name=$_GET['user_name'];
if(isset($user_name))
{
$arr=$this->home_model->checkUserName($user_name);
$cnt=count($arr);
if($cnt > 0)
echo json_encode(false);
else
echo json_encode(true);
}
}
型號功能:
function checkUserName($user_name)
{
$this->db->select('a.id');
$this->db->like('a.user_name',$user_name,'none');
return $this->db->get('accounts a')->result();
$this->db->get('accounts a')->result();
echo $this->db->last_query();
die;
}
HTML和JS:
<input type="text" name="user_name" placeholder="User name" id="user_name" class="form-control" value="">
JS:
$('#signup').validate(
{
rules:
{
user_name:
{
//required: true,
remote: baseUrl+'home/checkUserName'
}
}
//Your Code here.......
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.