在阿賈克斯的形式做驗證和顯示隱藏的div

-1

我有這個功能（使我與阿賈克斯的形式工作）：在阿賈克斯的形式做驗證和顯示隱藏的div

$(function() { 
    $('#restore_form').ajaxForm({ 
    beforeSubmit: ShowRequest, 
    success: SubmitSuccesful, 
    error: AjaxError 
    }); 
}); 

function ShowRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString); 
    return true; 
} 

function AjaxError() { 
    alert("An AJAX error occured."); 
} 

function SubmitSuccesful(responseText, statusText) { 
    alert("SuccesMethod:\n\n" + responseText); 
}

我的表格（Django的形式）只包含一個文件上傳字段。我想還要檢查驗證和我有這個功能用於此目的：

function TestFileType(fileName, fileTypes) { 
    if (!fileName) { 
     alert("please enter a file"); 
     return false; 
    } 
    dots = fileName.split(".") 
    fileType = "." + dots[dots.length-1]; 
    if(fileTypes.join(".").indexOf(fileType) != -1){ 
     alert('That file is OK!') ; 
     return true; 
    } 
    else 
    { 
     alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again."); 
     return false; 
    } 
}

現在，當我試圖在第一個函數中使用驗證功能（TestFileType），這是行不通的。他們兩人分別工作。前例如，如果我寫了下面的線的onclick的提交按鈕，它的工作原理：

onclick="TestFileType(this.form.file.value, ['tar.gz']);"

我也想，而不是提醒用戶，顯示出成功的功能隱藏的div：我有：

我想在成功的函數來完成：

$('.response').html(responseText); 
$('.response').show();

編輯：這裏是我的模板：

<form id="restore_form" enctype="multipart/form-data" method="POST" action="restore/"> 
     {{ form.non_field_errors }} 
     {{ form.as_p }} 
     {{ form.file.errors }} 
     <p id="sendwrapper"><input type="submit" value="{% trans "Send" %}" id="submitButton" style="margin-bottom:10px; cursor:pointer; background-color:#F90;"/></p>    
</form> 
<div class="response" style="display: none;"></div>

但它不起作用！似乎只有警報在這個功能中起作用。你能幫我麼？真的非常感謝:)

來源

2012-11-10 user1597122

表單模板代碼是什麼樣的？你確定$（'。response'）選擇器是否匹配DOM中的一個元素？ – blackbourna

我編輯了我的問題。我認爲它匹配。謝謝:) – user1597122

從這裏看起來不錯。也許作爲Firebug或Web Inspector的Network標籤中的健全性檢查，表單不會導致頁面重新加載，這可以解釋爲什麼警告對話框起作用，因爲警報會阻止頁面重新加載，並且如果您在本地工作，刷新可能如此之快，並不容易引人注目。 – blackbourna

我試圖在過去使用AjaxForm插件，發現除非你有一個非常具體的理由來使用它，否則通常更容易編寫ajax表單提交代碼而無需插件。這是我創建使用jQuery無插件之前的jQuery給ajaxForm的簡化/註釋版本：

$('form').submit(function(event) { 
    var form = $(this); 

    // creates a javascript object of the form data 
    // which can be used to validate form data 
    var formArray = form.serializeArray(); 
    // (validate whatever values in formArray you need to check here); 

    if (form_is_valid) { 
     var formData = form.serialize(); // a URL-encoded version of the form data for the ajax submission 
     $.ajax({ 
      type: "POST", 
      url: someUrl, 
      data: formData, 
      success: function(data) { 
       // update success message boxes here 
      } 
     }); 
    } else { 
     // update client-side validation error message boxes 
    } 
    event.preventDefault(); // prevent the form from actually navigating to the action page 
});

希望這會有所幫助，我發現，這個插件可以多次使用，但我通常過發現這導致更容易理解的代碼並避免使用插件。

來源

2012-11-11 06:57:29 blackbourna

謝謝，是的，你是可靠的。我在我的其他頁面中使用了這個函數，但是當我嘗試在這裏使用它時，它沒有發送文件。我的意思是我的請求中沒有任何文件發送到服務器。這是一個非常有用和簡單的功能，但它似乎對文件無法正常工作。因爲這個原因我使用了這個插件。 – user1597122

在阿賈克斯的形式做驗證和顯示隱藏的div

回答

相關問題