Form Validation With Record Saved Message - php

Question

I wonder whether someone may be able to help me please.
Firstly, my apologies, I'm relatively new to JavaScript and jQuery, so perhaps this is a really stupid question.
Using these tutorials here and here I've put together this page to allow users to add records to a MySQL database but I'm having a little difficulty with the form 'validation' and jQuery 'submission' message.
If use select the above link, then once the page has loaded, select 'Save', you'll see that the correct field validation is activated, but despite being validation errors, the 'Location saved' message appears at the bottom of the page, and the page refreshes saving the record to the database.
Obviously this is not supposed to happen, but I'm having great difficulty in joining the 'validation' and 'submission' message. Independently they work fine, but as you can see, once together they don't.
The code below deals with the 'Save Record' and refresh of the page
UPDATE - Working Solution Below
<script>
jQuery(document).ready(function(){
jQuery("#addlocation").validationEngine();
$("#addlocation").bind("jqv.field.result", function(event, field, errorFound, prompText){ console.log(errorFound) })
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#addlocation').submit(function(){
//check the form is not currently submitting
if($(this).data('formstatus') !== 'submitting'){
//setup variables
var form = $(this),
formData = form.serialize(),
formUrl = form.attr('action'),
formMethod = form.attr('method'),
responseMsg = $('#saverecordresponse');
//add status data to form
form.data('formstatus','submitting');
//show response message - waiting
responseMsg.hide()
.addClass('response-waiting')
.text('Please Wait...')
.fadeIn(200);
//send data to server for validation
$.ajax({
url: formUrl,
type: formMethod,
data: formData,
success:function(data){
//setup variables
var responseData = jQuery.parseJSON(data),
klass = '';
//response conditional
switch(responseData.status){
case 'error':
klass = 'response-error';
break;
case 'success':
klass = 'response-success';
break;
}
//show reponse message
responseMsg.fadeOut(200,function(){
$(this).removeClass('response-waiting')
.addClass(klass)
.text(responseData.message)
.fadeIn(200,function(){
//set timeout to hide response message
setTimeout(function(){
responseMsg.fadeOut(200,function(){
$(this).removeClass(klass);
form.data('formstatus','idle');
});
},3000)
});
});
}
});
}
//prevent form from submitting
return false;
});
});
</script>
and this is the 'saverecord.php' script which is called upon selecting the 'Save' button.
<?php
//sanitize data
$userid = mysql_real_escape_string($_POST['userid']);
$locationname = mysql_real_escape_string($_POST['locationname']);
$returnedaddress = mysql_real_escape_string($_POST['returnedaddress']);
//validate email address - check if input was empty
if(empty($locationname)){
$status = "error";
$message = "You didn't enter a name for this location!";
}
else if(!preg_match('/^$|^[A-Za-z0-9 _.,]{5,35}$/', $locationname)){ //validate email address - check if is a valid email address
$status = "error";
$message = "You have entered an invalid Location Name!";
}
else{
$query = mysql_query("INSERT INTO `table` (userid, locationname, returnedaddress) VALUES ('$userid', '$locationname', '$returnedaddress')");
if($query){ //if insert is successful
$status = "success";
$message = "Location Saved!";
}
else { //if insert fails
$status = "error";
$message = "I'm sorry, there has been a technical error! Please try again. If problems persist please contact Map My Finds support.";
}
}
//return json response
$data = array(
'status' => $status,
'message' => $message
);
echo json_encode($data);
exit;
?>
I just wondered whether someone could possibly take a look at this please and let me know where I'm going wrong.
Many thanks and kind regards

Answer 1

I believe you need:
if($.validationEngine.submitForm(this,settings) == true) {return false;}
somewhere before your $.ajax line

Answer 2

IRHM, check that the form is validate before submit in your event i.e.
$('#addlocation').submit(function(){
if($(this).validate()){
// put your all existing content here.
}
});
To prevent submitting the form after ajax put return false at the end of above script in if block i.e.
if($(this).validate()){
// put your all existing content here.
return false;
}
I guess the problem is occurring due to validation engine, so in that case to prevent form to submit try to use as follows:
$('#addlocation').submit(function(evt){
if($(this).validate()){
evt.preventDefault();
// put your all existing content here.
}
});
If the above code doesn't work then include onValidationComplete event with validationEngine and put you all existing stuff of if($(this).validate()) block in that i.e.
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#addlocation").validationEngine({ onValidationComplete: function(){
//setup variables
//add status data to form
//show response message - waiting
//send data to server for validation
return false;
}
});
});
Good Luck

Answer 3

After several days of working on this, I now have a working solution by using the example here which I've added to my original post.