유효성 검사를하고 난이 기능이 숨겨진 DIV

Question

을 보여 (아약스와 내 양식 작업하기 위해) :

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

내 양식 (장고 양식은) 단지 파일 업로드 필드가 포함되어 있습니다. 내가 유효성을 확인도 원하고 나는이 목적을 위해이 기능을 가지고 : 내가 첫 번째 함수에서 검증 기능 (TestFileType)를 사용하려고하면 지금은 작동하지 않습니다

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

합니다. 둘 다 별도로 작동합니다. 내가 온 클릭의 버튼을 제출에 아래 라인을 작성하는 경우 앞 예, 그것은 작동합니다 를 내가 가지고 :

이

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

가 나는 또한 성공 기능에 숨겨진 사업부를 표시하는 대신 사용자에게 경고합니다 내가 성공 기능에서 원하는이 수행

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

편집 :

: 여기 내 템플릿입니다

하지만 작동하지 않습니다! 그것은이 기능에서만 경보가 작동하는 것처럼 보입니다. 저를 도와주세요? 정말 고마워요 :)

Answer 1

나는 이전에 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 
}); 

, 나는 플러그인 그러나 나는 일반적했습니다, 시간에 유용 할 수 있다는 것을 발견했습니다 이 코드를 이해하기 쉽게하고 플러그인 사용을 피하는 것으로 나타났습니다.