HTML5必填屬性與AJAX提交不起作用

我正在嘗試對我只需要一封電子郵件的簡單時事通訊表單進行一些基本驗證。我在頁面中有這種表單/輸入的方式，實際上沒有空間添加任何jQuery驗證錯誤消息，所以我試圖添加一個簡單的HTML 5必需屬性，但表單提交不管是否空白。HTML5必填屬性與AJAX提交不起作用

什麼是最好的方式添加一些簡單的驗證，以便表格檢查一個電子郵件地址，它是填充的，最小長度爲4個字符？

<form action="" method="POST" id="newsletter-form"> 
    <input type="email" id="footer-grid1-newsletter-input" placeholder="Your Email Address" required> 
    <input type="submit" id="footer-grid1-newsletter-submit" name="submit" value='&nbsp'> 
</form>

$("#footer-grid1-newsletter-submit").on("click", function (event) { 
    event.preventDefault(); 
    var newsletter_email = $("#footer-grid1-newsletter-input").val(); 
    var targeted_popup_class = jQuery(this).attr('data-popup-open'); 
    $.ajax({ 
     url: "newsletterSend.php", 
     type: "POST", 
     data: { 
      "newsletter_email": newsletter_email 
     }, 
     success: function (data) { 
      // console.log(data); // data object will return the response when status code is 200 
      if (data == "Error!") { 
       alert("Unable to insert email!"); 
       alert(data); 
      } else { 
       $("#newsletter-form")[0].reset(); 
       $('.newsletter-popup').fadeIn(350).delay(2000).fadeOut(); 
      } 
     }, 
     error: function (xhr, textStatus, errorThrown) { 
      alert(textStatus + " | " + errorThrown); 
      //console.log("error"); //otherwise error if status code is other than 200. 
     } 
    }); 
});

來源

2016-03-01 Paul

因爲Ajax調用的onclick按鈕無關與表格提交。瀏覽器不知道Ajax調用與表單有關。您需要詢問表單是否有效或綁定到提交事件，而不是按鈕單擊。 – epascarello

也綁定到按鈕可以很容易地繞過，如果用戶提交鍵盤 – charlietfl

@charlietfl你指的是把我的按鈕id在我的ajax點擊功能，對吧？ $（「＃footer-grid1-newsletter-submit」）。on（「click」，function（event）{'。因此，我應該總是綁定我的表單嗎？ – Paul

的原因是因爲驗證的submit事件的形式來完成，但你有掛鉤的事件提交按鈕的點擊。試試這個：

$("#newsletter-form").on("submit", function (event) { 
    event.preventDefault(); 
    // your code... 
});

Working example

關於驗證最小輸入長度，你可以使用pattern屬性：

<input type="email" id="footer-grid1-newsletter-input" placeholder="Your Email Address" pattern=".{3,}" required>

來源

2016-03-01 15:46:13

好的，謝謝！如果我的記憶正確地服務我。 Safari，對吧？如果是這樣的話，你會推薦什麼樣的備份方式，或者你會推薦做一些完全不同的事情。 – Paul

你說得對，'required'（和'pattern'）在Safari中不起作用。它正在迅速轉向數十年來的Internet Explorer。作爲一種解決方法，我會建議使用[jQuery validate]（http://jqueryvalidation.org/），因爲您已經在頁面中包含了jQuery –

我有jQuery驗證其他地方，我只是不喜歡t的靈活性他錯誤的類。我的意見並不多，因爲這是在我的頁腳內，所以我不知道該如何做才能讓它脫穎而出。 – Paul

HTML5必填屬性與AJAX提交不起作用

回答

相關問題