Як перевірити допустимість (чи ще не зайнято кимось) імені та мила при реєстрації нового користувача, та ще й без перевантаження сторінки - ajax.
Останнім часом дуже часто використовую javascript бібліотеку jQuery(швидко і легко писати клієнтський код). Для валідації полів є чудовий плагін jQuery validation, про який я вже писав тут. Для валідації полів з використанням аjax він має правило remote.
$("#form1").validate({
rules: {
txtUserName: {
required: true,
remote: {
url: "register.aspx/UserNameValid",
type: "post",
data: {
username: function () {
return $("#txtUserName").val();
}
}
}
},
txtEmail: {
required: true,
email: true,
remote: {
url: "register.aspx/EmailValid",
type: "post",
data: {
email: function () {
return $("#txtEmail").val();
}
}
}
}
}
});
Але даний код мав одну маленьку проблему, данні передавались на сервер у трохі не такому форматі як цього хотів asp.net (як серверну частину я використовую asp.net PageMethod, який вертає true або false). Також результат мав не зовсім підходящий варіант для jQuery.
Зазвичай для виклику pagemethod через ajax я використовую плагін jMsAjax , він вже має в собі всі вирішення даних проблем. Але в даному випадку я мушу використовувати validation плагін. Звичайно можна написати своє правило(не дуже легка справа в даному випадку) перевірки з використанням jMsAjax, але в validation плагіні майже все працює, лише проблеми із форматуванням json.
Покопавшись трохи в мережі знайшов вирішення для виправлення відповіді серверу, зміна формату данних які відсилаються вийшла в мне не ідеальна, але працює. Далі код який я використовую:
$.ajaxSetup({
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{}",
dataFilter: function (data) {
var msg;
if (typeof(JSON) !== 'undefined' &&typeof(JSON.parse) === 'function') msg = JSON.parse(data);
else msg = eval('(' + data + ')');
if (msg.hasOwnProperty('d')) return msg.d;
else return msg;
}
});
$("#form1").validate({
onkeyup: false,
rules: {
txtUserName: {
required: true,
remote: {
url: "register.aspx/UserNameValid",
beforeSend: function (xhr) {
this.data = "{username:'" +
$("#txtUserName").val() + "'}";
}
}
},
txtEmail: {
required: true,
email: true,
remote: {
url: "register.aspx/EmailValid",
beforeSend: function (xhr) {
this.data = "{email:'" +
$("#txtEmail").val() + "'}";
}
}
}
},
messages: {
txtUserName: {
required: "Please enter your username.",
remote: "Username already registered. Try another."
},
txtExpertEmail: {
required: "Please enter your email.",
email: "Please enter a valid email.",
remote: "Email already registered. Try another."
}
}
});