1

こんにちは誰かが私を助けてくれるのではないかと思います。

「クライアント」側と「サーバー」側の検証が機能しているこのページをまとめました。

私が今やろうとしているのは、ページが検証に合格したら、ページの更新と「一番上までスクロール」を追加することです。

最初のリンクで使用されているスクリプトに、この機能を呼び出すための次のコードを追加しました。

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

私が抱えている問題は、フォームが検証に合格したかどうかに関係なく、このページに表示されているようにページが更新されることです。したがって、完全な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>

これは、JavaScriptと連携して動作し、レコードをMySQLデータベースに保存するPHPコードの縮小版です（プレビュー用にほとんどの検証ルールを削除しました）。

<?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に少し慣れていないことを最初に認めました。

誰かがこれを見て、どこが間違っているのか教えてくれるのではないか、あるいはフォームが検証に合格したらページを更新するためのより良い代替案を提案できるのではないかと思いました。

4

2 に答える 2

0

を使用して簡単に実行できます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;  
                    }

このようなクラスの値を確認してください

    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 
                               }
                           });
                        });
于 2012-09-10T13:27:54.937 に答える
0

clientこれを使用して、serverサイドの検証を確認できます

if(Page_ClientValidate()) 
          return true;
    else 
          return false;
于 2012-09-10T13:34:35.253 に答える