Hello,
Tijdens het valideren van mijn form via jquery kom ik volgend probleem tegen :
Er is live validatie door jquery (via het blur event), voor het invullen van de username wil ik live checken of hij al in de database bestaat via ajax en zolang alle velden niet correct zijn, houd ik de page refresh tegen via 'return false'.
Nu als ik ajax eruit haal, dan werkt het perfect, probleem is dat als ik ajax erin steek, er blijkbaar geen return true wordt doorgegeven aangezien ik eindeloos op de submit knop kan blijven drukken en er niets gebeurd (terwijl jquery alle velden correct gevalideerd heeft ..)
Hier een overzicht van mijn code, hopelijk kunnen jullie mij helpen!
HTML
<form method="post" action="">
<label for="gebruikersnaam">username</label>
<input type="text" id="gebruikersnaam" name="gebruikersnaam" value="" />
<span id="msgbox"></span>
<label for="firstname">firstname</label>
<input type="text" id="firstname" name="firstname" value="" />
<span id="msgbox1"></span>
</form>
jquery
binnen de $(document).ready functie :
$("#gebruikersnaam").blur(validateUsername );
$("#firstname").blur( validateFirstname );
$("#registerformvalidation").click( valideerRegistratie );
function validateUsername() {
if( $("#gebruikersnaam").val().length < 4 ){
$("#gebruikersnaam").removeClass('check').addClass('error');
$("#msgbox").text('Please fill in your username (min. 4 characters)');
return false;
}else{
$.post("includes/ajax/user_availability.php", { user_name:$("#gebruikersnaam").val() }, function(data){
if( data == "yes"){
//username bestaat nog niet
$("#gebruikersnaam").removeClass('error').addClass('check');
$("#msgbox").text('');
return true;
}else{
// username bestaat reeds -> error
$("#gebruikersnaam").removeClass('check').addClass('error');
$("#msgbox").text('Username already in use, please choose another one');
return false;
}
});
}
}
function validateFirstname() {
if( $("#firstname").val().length < 4 ){
$("#firstname").removeClass('check').addClass('error');
$("#msgbox1").text('Please fill in your firstname (min. 4 characters)');
return false;
}else{
$("#firstname").removeClass('error').addClass('check');
$("#msgbox1").text('');
return true;
}
}
function valideerRegistratie() {
if( validateUsername() && validateFirstname() ){
return true;
}else{
validateUsername();
validateFirstname();
return false;
}
}
iemand die ziet waar de fout zit??
alvast bedankt!
Tijdens het valideren van mijn form via jquery kom ik volgend probleem tegen :
Er is live validatie door jquery (via het blur event), voor het invullen van de username wil ik live checken of hij al in de database bestaat via ajax en zolang alle velden niet correct zijn, houd ik de page refresh tegen via 'return false'.
Nu als ik ajax eruit haal, dan werkt het perfect, probleem is dat als ik ajax erin steek, er blijkbaar geen return true wordt doorgegeven aangezien ik eindeloos op de submit knop kan blijven drukken en er niets gebeurd (terwijl jquery alle velden correct gevalideerd heeft ..)
Hier een overzicht van mijn code, hopelijk kunnen jullie mij helpen!
HTML
<form method="post" action="">
<label for="gebruikersnaam">username</label>
<input type="text" id="gebruikersnaam" name="gebruikersnaam" value="" />
<span id="msgbox"></span>
<label for="firstname">firstname</label>
<input type="text" id="firstname" name="firstname" value="" />
<span id="msgbox1"></span>
</form>
jquery
binnen de $(document).ready functie :
$("#gebruikersnaam").blur(validateUsername );
$("#firstname").blur( validateFirstname );
$("#registerformvalidation").click( valideerRegistratie );
function validateUsername() {
if( $("#gebruikersnaam").val().length < 4 ){
$("#gebruikersnaam").removeClass('check').addClass('error');
$("#msgbox").text('Please fill in your username (min. 4 characters)');
return false;
}else{
$.post("includes/ajax/user_availability.php", { user_name:$("#gebruikersnaam").val() }, function(data){
if( data == "yes"){
//username bestaat nog niet
$("#gebruikersnaam").removeClass('error').addClass('check');
$("#msgbox").text('');
return true;
}else{
// username bestaat reeds -> error
$("#gebruikersnaam").removeClass('check').addClass('error');
$("#msgbox").text('Username already in use, please choose another one');
return false;
}
});
}
}
function validateFirstname() {
if( $("#firstname").val().length < 4 ){
$("#firstname").removeClass('check').addClass('error');
$("#msgbox1").text('Please fill in your firstname (min. 4 characters)');
return false;
}else{
$("#firstname").removeClass('error').addClass('check');
$("#msgbox1").text('');
return true;
}
}
function valideerRegistratie() {
if( validateUsername() && validateFirstname() ){
return true;
}else{
validateUsername();
validateFirstname();
return false;
}
}
iemand die ziet waar de fout zit??
alvast bedankt!
