1

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

まず、申し訳ありませんが、私は JavaScript と jQuery に比較的慣れていないため、これは本当にばかげた質問かもしれません。

これらのチュートリアルhereおよびhereを使用して、このページをまとめて、ユーザーが MySQL データベースにレコードを追加できるようにしましたが、フォームの「検証」と jQuery の「送信」メッセージに少し問題があります。

上記のリンクを選択し、ページが読み込まれたら [保存] を選択すると、正しいフィールド検証がアクティブになっていることがわかりますが、検証エラーにもかかわらず、ページの下部に「場所が保存されました」というメッセージが表示されます。 、ページが更新され、レコードがデータベースに保存されます。

明らかに、これは起こるべきではありませんが、「検証」と「送信」メッセージに参加するのが非常に困難です。単独では問題なく動作しますが、ご覧のとおり、一緒にするとうまくいきません。

以下のコードは、「レコードの保存」とページの更新を処理します

更新 - 以下の実用的なソリューション

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

これは、「保存」ボタンを選択すると呼び出される「saverecord.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']); 

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

誰かがこれを見て、どこが間違っているのか教えてください。

多くの感謝と親切な敬意

4

3 に答える 3

1

私はあなたが必要だと信じています：

if($.validationEngine.submitForm(this,settings) == true) {return false;}

$.ajax 行の前のどこか

于 2012-08-25T18:28:46.107 に答える
1

IRHM、イベントで送信する前にフォームが検証されていることを確認してください。

$('#addlocation').submit(function(){
    if($(this).validate()){
       // put your all existing content here.
    }  
});

上記のスクリプトの最後に ajax が return false を入れた後にフォームを送信しないようにするには、if ブロック ie

if($(this).validate()){
    // put your all existing content here.
    return false;
}

検証エンジンが原因で問題が発生していると思われるため、その場合、フォームの送信を防ぐには、次のように使用してみてください。

$('#addlocation').submit(function(evt){
    if($(this).validate()){
       evt.preventDefault();
       // put your all existing content here.
    }  
});

上記のコードが機能しない場合は、onValidationCompleteイベントを含めて、 if($(this).validate())ブロックvalidationEngineの既存のものをすべて入れます。

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

幸運を

于 2012-08-25T18:30:22.003 に答える
0

これに数日間取り組んだ後、元の投稿に追加したこちらの例を使用して、実用的なソリューションを手に入れました。

于 2012-09-06T15:23:10.477 に答える