I been picking my brain for a good part of today and I’m kind of stumped in the this registration form that I doing in jQuery, Ajax and PHP. I have it working in php and about 90 percent in the JQuery and Ajax portion as well. I get it where it validates for null, checks to see if the username is already taken and validates the password. Problem is when I go to submit it.
Here’s the important HTML portion:
<section class="container registerPage">
<form id="register_form" class="span6" action="register.php" method="post">
<fieldset class="registerFieldset">
<legend class="registerLegend" data-status="fail" ><?php echo isset($message) ? $message : 'Registration Form'; ?></legend>
<label for="username" class="registerLabelStyle">Username: </label>
<input id="username" type="text" name="username" value="" tabindex="1">
<label class="passwordClass registerLabelStyle" for="password">Password: </label>
<input id="password" type="password" name="password" tabindex="2">
<br><br>
<button class="enableSubmit" type="button" value="">Please Fill in Form!</button>
<input class="submitBtn" type="submit" name="submit" value="Submit" tabindex="3">
</fieldset>
</form>
</section>
<section class="container">
<h2 class="result">Status OK</h2>
</section>
Here’s the JQuery(JavaScript) and Ajax portion:
[php] function saveData(myData) {
$.ajax({
type: “post”,
url: “process.php”, // PHP file that checks agains the database table:
data: myData,
success: function (info) {
error_code = parseInt(info);
switch (error_code) {
case 100:
message = "All input fields required, please re-enter!";
break;
case 200:
message = "Username is unavailable, please re-enter!";
break;
case 300:
message = "'Password must be at least 8 characters, must contain at least 1 lowercase letter, 1 uppercase letter and 1 digit.'";
break;
case 400:
message = "Status OK";
break;
default:
message = "Error, please re-enter!";
}
$('.result').text(message);
console.log(error_code, message);
}
}); // End of Ajax Function:
}
/* Validate username functin so that data is correct /
function checkUsername() {
$username = $(’#username’).val(); // Grab the username once user has entered it in form:
var params = {username: $username}; // Set parameters
var myData = jQuery.param(params); // Set parameters to corret AJAX format
/ Check the database table against user’s username */
saveData(myData);
} // End of checkUsername Function:
/* Validate Password */
function checkPassword() {
$password = $('#password').val(); // Grab the password once user has entered it in form:
var params = {password: $password}; // Set parameters
var myData = jQuery.param(params); // Set parameters to corret AJAX format
saveData(myData);
} // End of checkPassword Function:
function insertData() {
var $username = $(’#username’).val(); // Grab username from form:
var $password = $(’#password’).val(); // Grab password from form:
var $submit = ‘submit’;
var params = {username: $username, password: $password, submit: $submit}; // Set parameters
var myData = jQuery.param(params); // Set parameters to corret AJAX format
/* Simple Ajax request to save username, password */
$.ajax({
type: “post”,
url: “process.php”, // PHP file that checks agains the database table:
data: myData,
success: function (info) {
$(’.result’).text(“Data Successfully Entered!”);
$(’#username’).val(’’); // Clear the input username input field:
$(’#password’).val(’’); // Clear the input password input filed:
displayTimer(6);
}
}); // End of Ajax Function:
} // End of insertData Function:
/* Check to see if username is availability (Validate) */
$("#username").on(“focusout”, function () {
checkUsername();
}); // End of Focus Out of Username input Function:
/* Validate Password */
$(’#password’).on(“focusout”, function () {
checkPassword();
}); // End of Focus Out of Password input Function:
/* Submit button is click */
$submit.on(“click”, function (e) {
e.preventDefault(); // Prevent the submit button from firing:
}); // End of Submit Button Function:[/php]
The problem is the username and password input fields checks it on focusout, meaning that when the user goes to the next field it validates it via Ajax. Now I can get it to submit, but I don’t want some clever person doing a bypass by having the fields validate then quickly changing it so it doesn’t but inserting into the database. I hope you get what I trying to say. Worse comes to worse I can just have the submit but work normally. That way server-side validate will take place no matter what, but I would like to get it to work properly using 100% JQuery (JavaScript).
