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提交不起作用

回答

相关问题