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

轻松完成此操作

检查验证是否未通过return 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 
                               }
                           });
                        });

Answer 2

您可以使用此

检查client和server方验证

if(Page_ClientValidate()) 
          return true;
    else 
          return false;

页面验证后页面刷新

2 个答案: