Form validate PreventDefault只能在本地使用，但不能在服務器上使用

Question

我嘗試使用jQuery和validate（）函數提交表單。當我在本地測試時，event.preventDefault（）起作用！也沒有行「event.preventDefault（）;」但是，當我將它部署到服務器時，結果json會加載到新頁面中 - 它不會阻止重定向。

$(function() { 
    $("#photo-form").validate({ 
     submitHandler: function (form, event) { 
      event.preventDefault(); //with or without - doesn't work 
      if ($(form)[0].checkValidity()) { 
       console.log("No Errors!") 
       var formData = new FormData(document.querySelector("#photo-form")); 
       var photo = formData.get("photo"); 

       $.ajax({ 
        url: "/photo/", 
        type: 'POST', 
        data: formData, 
        async: false, 
        success: function (data) { 
         console.log("Ajax success"); 
         if (data.error == "OK") { 
           alert("Photo was uploaded"); 
         } else { 
           //error 
         } 
        }, 
        error: function (data) { 
        }, 
        cache: false, 
        contentType: false, 
        processData: false 
       }); 
       return false; //this also doesn't help 
      } 
     } 
    }); 
}); 

這種情況下的錯誤在哪裏？此代碼的本地和服務器之間有什麼區別？

HTML表單：

<form id="photo-form" action="/photo/" method="post" enctype="multipart/form-data" 
      class="row col s10 center-block"> 
     <div class="card row"> 
      <div class="col s12"> 
       <h5>Generic Information</h5> 
       <div class="input-field col s12 m6"> 
        <i class="material-icons prefix">title</i> 
        <input id="campaign_id" type="text" name="campaign_id" class="validate" required> 
        <label for="campaign_id" data-error="huh?" data-success="WOW!">campaign_id</label> 
       </div> 
       <div class="input-field col s12 m6"> 
        <div class="file-field input-field"> 
         <button class="btn btn-floating pink lighten-1 file-btn"> 
          <span>Photo</span> 
          <input name="photo" type="file"> 
         </button> 
         <div class="file-path-wrapper"> 
          <input class="file-path validate" type="text"> 
         </div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="input-field col s8"> 
         <button class="btn-large waves-effect waves-light" type="submit">Submit 
          <i class="material-icons right">send</i> 
         </button> 
        </div> 
       </div> 
      </div> 
     </div> 

    </form> 

Answer 1

形式驗證的preventDefault只能在本地，但沒有在服務器上

從技術上說，它並不重要，其中的代碼託管，.preventDefault()是JavaScript總是/只在本地（客戶端）在瀏覽器中工作。所以你的問題在其他地方......即上傳到服務器後JavaScript斷了。

---

儘管你的測試，你有一些錯誤代碼中：

1. submitHandler: function(form, event) { ...

   你不能創造參數傳遞到由該插件的開發者提供了回調。他只是給你提供了一個論點，就是這樣。 event參數在這裏是沒有意義的，將被忽略。

2. event.preventDefault()將會忽略。見項目＃1;在這種情況下，event論點沒有意義。

3. 您首先不需要event.preventDefault()。插件會自動處理捕獲點擊並在內部阻止默認的submit操作。

4. if ($(form)[0].checkValidity()) { ...

   想必你檢查，看看是否形式讓你ajax提交前通過了驗證。這也完全不合理。根據定義，submitHandleronly fires when the form is already valid。

   此外，checkValidity()被綁定到HTML5驗證中，它在初始化時完全由jQuery Validate插件禁用。充其量，這不會做什麼，但是，你應該刪除它。

   （這是一個有爭議的問題，但你因爲$(form)選擇是使用由插件提供的form說法也不會需要[0]）

---

在您的本地測試你沒有任何事情打破插件或阻止其正常運行。由於插件已經阻止了默認提交，所以您錯誤地認爲您的.preventDefault()正在做某件事。部署後，您錯誤地認爲您的.preventDefault()突然停止工作，而整個插件可能由於某些原因而被破壞。

---

如果插件不會阻止您的默認表單提交的行動，那麼可能是你有這些條件中的一個或多個：

• jQuery和/或jQuery驗證插件無法正常包含
• 錯誤（s）阻止您的JavaScript的執行
• 不正確地聲明驗證規則導致窗體顯示有效
• HTML標記問題（b）廣告選擇器（S）等），防止您的表單元素
• 無效的HTML的插件的初始化，如重複id等
• 一些其他問題防止插件

---

的正確初始化

工作：

$(function() { 
    $("#photo-form").validate({ 
     submitHandler: function(form) { 
      console.log("No Errors!"); 
      console.log("form data: " + $(form).serialize()); 
      $.ajax({ 
       .... 
      }); 
      return false; 
     } 
    }); 
}); 

DEMO：jsfiddle.net/b9x4626a/

Answer 2

檢查JavaScript文件包含到視圖中。如果您使用的是Bundle來管理js庫，您可以嘗試使用腳本，鏈接標籤以正常方式包含它。

過去，在將我的應用程序部署到網絡服務器後，我遇到同樣的問題。 希望得到這個幫助。