javascript - 仅在页面验证后刷新页面

Question

您好，我想知道是否有人可以帮助我。

我已经整理了this具有有效“客户端”和“服务器”端验证的页面。

我现在要做的是在页面通过验证后添加页面刷新和“滚动到顶部”。

对于第一个链接中使用的脚本，我添加了以下代码来尝试调用此功能:

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

我遇到的问题是，无论表单是否通过验证，页面都会刷新，如 this 中所示。页。所以完整的 JavaScript 代码如下所示:

更新后 - 通过与 @rahul 合作，我现在有了一个可行的解决方案，如下所示。注意我只需要更改 JavaScript 代码

 <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>

这是一个精简版本(出于预览目的，我删除了大部分验证规则)PHP 代码，它与 JavaScript 结合使用，并将记录保存到 MySQL 数据库。

<?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;
?>

我必须承认，我不确定问题出在哪里，但我是第一个承认我对 JavaScript 和 jQuery 有点陌生的人。

我只是想知道是否有人可以看看这个并让我知道我哪里出了问题，或者甚至可能建议一个更好的替代方案，以便在表单通过验证后刷新页面。

Answer 1

您可以使用return false轻松完成它

检查验证是否未通过返回 false

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

本节之后

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

像这样检查 klass 的值

    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 
                               }
                           });
                        });