The below is my js validation code along with form submit event.
The issue is that when I submit the form it validates for user id and name and does not proceed ahead. But if I remove the login id validation then it just checks for user name and submits the form properly.
Firebug shows that its validating login id and getting stopped doing nothing ahead. I get "0" in response from database if login id is available.
$(document).ready(function () {
var value = $('#button input').val();
var name = $('#button input').attr('name');
$('#button input').remove();
$('#button').html('<a href="#" class="cssSubmitButton" rel=' + name + '>' + value + '</a>');
//global vars
var form = $("#customForm");
var name = $("#name");
var nameInfo = $("#nameInfo");
var login_id = $("#login_id");
var login_idInfo = $("#login_idInfo");
//On blur
name.blur(validateName);
login_id.blur(validatelogin_id);
//On key press
name.keyup(validateName);
login_id.keyup(validatelogin_id);
//On Submitting
$('#button a').on('click', function () {
var link = $(this);
if (validateName() & validatelogin_id()) //it validates login id here and gets stuck; if i remove validatelogin_id() it processes the form perfectly
{
var str = $("form").serializeArray();
$.ajax({
url: 'load.php',
data: str,
type: 'POST',
cache: 'false',
beforeSend: function () {
link.addClass('loading');
},
success: function (data) {
link.removeClass('loading');
$('#button').css('display', 'none');
$('#success').css('display', 'block');
},
error: function (x, e) {
}
});
return true
} else {
return false;
}
});
//validation functions
function validatelogin_id() {
//if it's NOT valid
if (login_id.val().length < 4) {
$('#login_id_correct').css('display', 'none');
login_id.addClass("error");
login_idInfo.text("We want names with more than 3 letters!");
login_idInfo.addClass("error");
return false;
}
//if it's valid
else {
$.ajax({
type: "post",
url: "./include/check_user_name.php",
data: "username=" + login_id.val(),
success: function (data) {
if (data == 0) {
$('#login_id_correct').css('display', 'block');
login_id.removeClass("error");
login_idInfo.text("What's your name?");
login_idInfo.removeClass("error");
return true;
} else {
$('#login_id_correct').css('display', 'none');
login_id.addClass("error");
login_idInfo.text("Username already used!");
login_idInfo.addClass("error");
return false;
}
}
});
}
}
function validateName() {
//if it's NOT valid
if (name.val().length < 4) {
name.addClass("error");
nameInfo.text("We want names with more than 3 letters!");
nameInfo.addClass("error");
return false;
}
//if it's valid
else {
name.removeClass("error");
nameInfo.text("What's your name?");
nameInfo.removeClass("error");
return true;
}
}
});
This solution is valid assuming you are calling validatelogin_id()
on onblur event
valid_id = false; //declare a global flag
function validatelogin_id() {
if (login_id.val().length < 4) {
$('#login_id_correct').css('display', 'none');
login_id.addClass("error");
login_idInfo.text("We want names with more than 3 letters!");
login_idInfo.addClass("error");
valid_id = false; //set value of global flag
}
else {
$.ajax({
type: "post",
url: "./include/check_user_name.php",
data: "username=" + login_id.val(),
success: function (data) {
if (data == 0) {
$('#login_id_correct').css('display', 'block');
login_id.removeClass("error");
login_idInfo.text("What's your name?");
login_idInfo.removeClass("error");
valid_id = true; //set value of global flag
} else {
$('#login_id_correct').css('display', 'none');
login_id.addClass("error");
login_idInfo.text("Username already used!");
login_idInfo.addClass("error");
valid_id = false; //set value of global flag
}
}
});
}
}
Then change this line
if (validateName() & validatelogin_id())
to
if (validateName() & valid_id)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.