Question

Hi I wonder whether someone may be able to help me please.

I’ve put together this page which has working ‘client’ and ‘server’ side validation.

What I’m now trying to do is add a page refresh and ‘scroll to top’, once the page has passed validation.

To the script used in the first link I’ve added the following code to try and invoke this functionality:

setTimeout(function() {
    $('body').fadeOut(400, function() {
        location.reload();
        setTimeout(function() {
            $('body').fadeIn(400);
        }, 500);
        window.scrollTo(x - coord, y - coord);
    });
}, 2000);

The problem I’m having, is that irrespective of whether the the form passes validation, the page refreshes as can be seen in this page. So the full JavaScript code looks like this:

Post Update – Through working with @rahul, I’ve now have a working solution as below. NB I only needed to change the JavaScript code

 <script type="text/javascript">
        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)
                                   if (klass=='response-success')
                               {
                                   setTimeout(function () {
                                   $('body').fadeOut(400, function () {
                                       location.reload();
                                       setTimeout(function () {
                                           $('body').fadeIn(400);
                                       }, 500);
                                       window.scrollTo(x - coord, y - coord);
                                   });
                               }, 2000);
                               }
                                });
                    });
                }
            });
        }

        //prevent form from submitting
        return false;
    });
});
</script>

and this is a cut down version (I’ve deleted most of the validation rules for preview purposes) the PHP code which works in conjunction with the JavaScript and saves the record to a MySQL database.

<?php


    //sanitize data
    $userid = mysql_real_escape_string($_POST['userid']);   
    $locationname = mysql_real_escape_string($_POST['locationname']);   
    $returnedaddress = mysql_real_escape_string($_POST['returnedaddress']); 

    if(empty($locationname)){
        $status = "error";
        $message = "You need to enter a name for this location!";
    }

    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!";  
            }

    }

    //return json response
    $data = array(
        'status' => $status,
        'message' => $message
    );

    echo json_encode($data);
    exit;
?>

I must admit, I’m not sure where the problem lies, but I’m the first to admit I’m a little new to JavaScript and jQuery.

I just wondered whether someone may be able to look at this please and let me know where I’m going wrong, or even perhaps suggest a better alternative to make the page refresh once the form passes validation.

Answer 1

you can easily get it done using return false

check if validation not passed return false

if(Yourvalidation!=true)
{
return false;
}

after this section

 //response conditional
                    switch(responseData.status){
                        case 'error':
                            klass = 'response-error';
                        break;
                        case 'success':
                            klass = 'response-success';
                        break;  
                    }

check value of klass like this

    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)
                               if (klass=='response-success')
                               {
                                   setTimeout(function () {
                                   $('body').fadeOut(400, function () {
                                       location.reload();
                                       setTimeout(function () {
                                           $('body').fadeIn(400);
                                       }, 500);
                                       window.scrollTo(x - coord, y - coord);
                                   });
                               }, 2000);
                               }
                               else
                               {
                                   return false;  //use return false in else condition 
                               }
                           });
                        });