0

ajax コンタクトフォームの検証に問題があります。エラーチェックは少し機能します。間違ったメールアドレスを入力すると、空の名前フィールドも検証されます。さまざまなことを試しましたが、小さな部分が欠けていると思います。私の質問に答えていただければ、変更点を説明していただけますか? 本当に学びたいです!

これは私のコードです（またはこのjsBinを参照してください）：

Ajax 呼び出し 

    $('form.ajax').on("keyup", function(e){
        e.preventDefault();

        var $this   =   $(this);
                data    =   {};

            $this.find('[name]').each(function(index, value){
                var $this   =   $(this),
                    name    =   $this.attr('name');
                    value   =   $this.val();

                data[name] = value;
            });


            $.ajax({
                url : "contact.php",
                type: "post",
                data: data,
                dataType: "json",

                success: function(response){

                    error_check(response);
                }
            });


        });

エラーをチェックしてエラーメッセージを追加するために使用する関数

     function error_check(arr){

        $.each(arr, function(key, value){

            var el = $('li.' + key);

            if(value == true){

                if( el.hasClass('error') ){
                    $(el).removeClass('error')
                         .children('div.error').remove()
                         .addClass('validated')
                         .prepend('<div class="validated"></div>');
                }else{
                    $(el)
                        .addClass('validated')
                        .prepend('<div class="validated"></div>');
                }

            }else if(value == false){

                if( el.hasClass('validated') ){
                    $(el).removeClass('validated')
                         .children('div.validated').remove()
                         .addClass('error')
                         .prepend('<div class="error"></div>');
                }else{
                    $(el)
                        .addClass('error')
                        .prepend('<div class="error"></div>');
                }
            }
        });
    }

そして、これは私のPHP検証コードです:

 if($_SERVER['REQUEST_METHOD'] == 'POST'){

$validated = array();

$name       =    $_POST['name'];
$company    =    $_POST['company'];
$email      =    $_POST['email'];
$phone      =    $_POST['phone'];
$date       =    $_POST['date'];


/*Ajax validation*/

if(!empty($name) && strlen($name) >= 2){
    $validated['name'] = true;
}else{
    $validated['name'] = false;
}


if( !empty($email) ){
    $validate_email = filter_var($email, FILTER_VALIDATE_EMAIL);        

    if($validate_email){
        $validated['email'] = true;
    }else{
        $validated['email'] = false;
    }
}

echo json_encode($validated);
}else{
die();
}
4

1 に答える 1

0

投稿リクエストにはプロパティが含まれておらずdate（少なくとも jsBin の例では）、エラーが発生します。一般に、事前にパラメーターの存在を確認することをお勧めします。

$name       =    (isset($_POST['name']) ? $_POST['name'] : null;
$company    =    (isset($_POST['company']) ? $_POST['company'] : null;
$email      =    (isset($_POST['email']) ? $_POST['email'] : null;
$phone      =    (isset($_POST['phone']) ? $_POST['phone'] : null;
$date       =    (isset($_POST['date']) ? $_POST['date'] : null;

// check required parameters and exit if they're missing
if (is_null($name) || is_null($email)) {
    // some error handling here
} else {
    // and (almost) the rest of your existing script goes here
}

echo json_encode($validated);

[編集] そして、「すべてのキーを押すたびに検証する」アプローチに関して: はるかに優れたアプローチは、html5 の入力タイプ (例: <input type="email"…&gt;) を活用し、送信前にクライアントで簡単な検証を行うことです (それほど多くのことはしません)。 、それはかなり簡単なはずです）。明らかに、バックエンドで検証する必要があります (ただし、トラフィックを実質的にゼロに減らしただけです)。

于 2013-10-20T20:30:10.907 に答える