jQuery驗證插件不適用於Ajax

Question

我發現jQuery ajax腳本可以將文件上傳到項目文件夾中的特定目錄。 現在，我正在嘗試使用jQuery驗證插件來驗證字段。

一切工作正常，但我必須提交2次才能提交數據。 用戶提交表單時，我一次無法使用Ajax發送數據。 如果我將單擊2次，那么它將正常工作。 我不知道為什么它不能一次使用。

您能否檢查我的代碼並幫助我解決此問題。 如果您能幫助我，我將不勝感激:)

謝謝。

index.php

<div id="content" style="margin-top:10px;">
    <div style="height:80%;width:97%;border:2px solid black;padding:10px 8px;">
        <form action="upload.php" method="POST" id="uploadform">
            <input type="text" name="username" id="username">
            <input type="file" name="file"/>
            <input type="submit" id="submit" value="Upload"/>

            <div id="loader" style="display:none;">
                <center><img src="load.gif" /></center>
            </div>
            <div>
                Message : <div id="onsuccessmsg" style="border:5px solid #CCC;padding:15px;"></div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){

        $("#uploadform").validate({
            rules: {
                "username": {
                    required: true
                }
            },
            messages: {
                "username": {
                    required: "Please, enter a name"
                }
            },
            submitHandler: function (form) { // for demo

                $("#uploadform").on('submit',function(){
                    $("#loader").show();
                        var options={
                        url : $(this).attr("action"),
                        success : onsuccess
                    };
                    $(this).ajaxSubmit(options);
                    return false;
                });

                function onsuccess(response,status){
                    $("#loader").hide();
                    $("#onsuccessmsg").html("Status :<b>"+status+'</b><br><br>Response Data :<div id="msg" style="border:5px solid #CCC;padding:15px;">'+response+'</div>');
                }

                return false; // for demo
            }
        });
    });
</script>

upload.php

<?php
    function getExtension($str){
        $i=strrpos($str,".");
        if(!$i){
            return"";
        }
        $l=strlen($str)-$i;$ext=substr($str,$i+1,$l);return $ext;
    }
    $formats = array("jpg", "png", "gif", "bmp", "jpeg", "PNG", "JPG", "JPEG", "GIF", "BMP");

    if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
        $name = $_FILES['file']['name'];
        $size = $_FILES['file']['size'];
        $tmp  = $_FILES['file']['tmp_name'];
        if(strlen($name)){
            $ext = getExtension($name);
            if(in_array($ext,$formats)){
                if($size<(1024*1024)){
                    $imgn = time().".".$ext;
                        if(move_uploaded_file($tmp, "./uploads/".$imgn)){
                            echo "File Name : ".$_FILES['file']['name'];
                            echo "<br/>File Temporary Location : ".$_FILES['file']['tmp_name'];
                            echo "<br/>File Size : ".$_FILES['file']['size'];
                            echo "<br/>File Type : ".$_FILES['file']['type'];
                            echo "<br/>Image : <img style='margin-left:10px;' src='uploads/".$imgn."'>";
                        }else{
                            echo "Uploading Failed.";
                        }
                }else{
                    echo "Image File Size Max 1 MB";
                }
            }else{
                echo "Invalid Image file format.";
            }
        }else{
            echo "Please select an image.";
            exit;
        }
    }
?>

Answer 1

您的代碼：

submitHandler: function (form) { 
    $("#uploadform").on('submit',function(){  // <-  GET RID OF THIS
        $("#submit").click();                 // <-  WHAT IS THIS??
        $("#loader").show();
        var options={
            url : $(this).attr("action"),
            success : onsuccess
        };
        $(this).ajaxSubmit(options); // initialize Forms plugin… can't be here
        return false;
    });

    function onsuccess(response,status){
        $("#loader").hide();
        $("#onsuccessmsg").html("Status :<b>"+status+'</b><br><br>Response Data :<div id="msg" style="border:5px solid #CCC;padding:15px;">'+response+'</div>');
    }
return false;
}

您的代碼失敗，因為您在插件的submitHandler回調函數中使用了jQuery submit處理程序。 聽起來很有趣，不是嗎？

插件的submitHandler僅在單擊提交按鈕時才觸發，並且僅在表單有效時才觸發。 （該插件會自動處理提交/單擊），因此，不需要在其中使用其他submit處理程序。 我也不知道您為什么在submit處理程序中調用提交按鈕的click()事件……毫無意義。

像這樣的東西更接近於工作代碼…

submitHandler: function (form) { 
    // all of your ajax stuff in here, no submit or click handlers needed
    return false;
}

---

此外， .ajaxSubmit(options)是Forms插件的初始化。 因此，這就是為什么您需要單擊兩次的原因。 第一次單擊將初始化Forms插件。 由於插件終於准備好，第二次單擊提交表單。 您不能將.ajaxSubmit()放入jQuery Validate插件的submitHandler回調中。