I am using the jQuery.steps Plugin and do have now some problems regarding the validation, I have a field "username" which has to be validated (if the username already exists) before continuing to the next step, let me show you some code:
removed
The PHP code looks like this
removed
the issue I have here is that when I click on the next button the form just continues even if the username is already taken.. if I click on back and the username was already taken the error message is displayed and I am not able to continue before choosing an available username.
When I do enter for example 7 characters in the username field and click on next the form does not continue, after removing the 7 charakter and enter a username that is already taken the form does also not continue.
I hope you guys do unterstand my issue and do have any great solution (as always) for me :-)
Please let me know if you need any additional information.
Cheers!
UPDATE Since my problem was not really clear, I created a small online example which should reflect my issue, you can find that here: http://example.crasher.ch/
There sources used on this page Looks like this
index.php
<form id="test" name="test" action="#" style="width: 650px">
<h3>Personelles</h3>
<div>
<p>
Lorem ipsum dolor sit amet.
</p>
<label for="name">Name</label><input type="text" id="bva_name" name="bva_name" value="Name">
<br /><br class="clear" />
<label for="vorname">Firstname</label><input type="text" id="vorname" name="vorname" value="Firstname">
<br /><br class="clear" />
<label for="username">Username</label><input type="text" id="username" name="username" value="abcdef">
<br /><br class="clear" />
</div>
<h3>Arbeitsplatz</h3>
<div class="arbeitsplatz">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
<label for="something">Something</label>
<input type="text" name="something" id="something" />
<br /><br class="clear" />
</div>
<h3>Abschluss</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
</p>
<label for="otherlogins">Sonstige Logins</label>
<textarea name="otherlogins" id="otherlogins"></textarea>
<br /><br class="clear" />
</div>
</form>
<!-- JQUERY FUNCTIONS -->
<script>
$(function()
{
// initialize wizzard form
var form = $("#test").show();
form.steps({
headerTag: "h3",
bodyTag: "div",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex)
{
// Allways allow previous action even if the current form is not valid!
if (currentIndex > newIndex)
{
return true;
}
// Needed in some cases if the user went back (clean up)
if (currentIndex < newIndex)
{
// To remove error styles
form.find(".body:eq(" + newIndex + ") label.error").remove();
form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
}
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex)
{
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinished: function (event, currentIndex)
{
alert('you did it');
},
labels:
{
cancel: "Abbrechen",
current: "Aktueller Schritt:",
pagination: "Pagination",
finish: "Finish",
next: "Next",
previous: "Back",
loading: "Lade..."
}
})
.validate({
rules: {
name: {
required: true,
minlength: 2
},
vorname: {
required: true,
minlength: 2
},
username: {
required: true,
minlength: 6,
maxlength: 6,
remote: {
url: "ajax.php",
type: "POST",
data: {
action: function() {
return "validateUsername";
},
username: function() {
return $("#username").val();
}
}
}
}
}
});
});
</script>
<!-- /JQUERY FUNCTIONS -->
ajax.php
<?php
$username = $_POST['username'];
if ( $username == "abcdef" || $username == "qwertz" )
{
echo json_encode("Der Benutzername ist bereits vergeben");
}
else
{
echo "true";
}
?>
as you can see if you just click on next the validation does not work even if the prefilled username is not allowed, when you click on the back button you can see the error message and can not continue until an other username has been entered. also if you change any field (for example make the firstname empty) click on next the username is also validated correctly since the firstname triggered the validation - I hope now my issue is clear to everyone :)
