preventDefault() 直到确认

Posted 2023-05-09

【中文标题】preventDefault() 直到确认

【英文标题】：preventDefault() until confirm

【发布时间】：2014-10-03 16:58:07

【问题描述】：

电子邮件重置表单，显示带有input: email 的确认框，要求用户确认电子邮件。 (spelling/etc) 如果用户点击 ok 表单应该正常提交。如果用户点击取消，则允许他们更改电子邮件。

  $(function()
    $('form').on('submit',function(e)
      e.preventDefault();

      var email = $('#user_email').val();
      if(email.length == 0)
        alert('Please enter your email address.');
       else 
        confirm('Are you sure you want to reset the password for: '+ email);
        // if confirm [ok] submit the form!!!!
       
    );
  );

附带问题：我可以将电子邮件输入值传递给 rails 输入助手中的confirm 属性吗？ （这样我就可以避免写额外的js）

例如

  <%= button_tag type: 'submit', id: "email-confirm", confirm: "Are you sure you want to reset the password for: #email-input-value" do %>
    Send me reset password instructions
  <% end %>

【问题讨论】：

去掉event.preventDefault()，把return false放在if语句里面（alert之后），把confirm行改成return confirm('...。这应该可以防止在未填写电子邮件或取消confirm

时提交表单

谢谢老兄！这正是我所需要的。是菲尼教授吗？大声笑=）

不，是我小学的老师 ;-)

您的网站非常好。你的设计师是谁？它运行在什么框架上？

很好，谢谢你的帮助。如果您希望代表帖子作为答案，以便我可以接受。 l8 =)

【参考方案1】：

鉴于 JQuery 在这一点上几乎已经过时，这里是 vanilla javascript 解决方案：

let form = document.getElementById('<form id here>')

form.addEventListener('submit', e => 
    return (window.confirm('Are you sure you want to reset your password?'))? true : e.preventDefault()
)

现在表单不会提交，直到弹出确认对话框并且用户单击确定。

【参考方案2】：

使用e.preventDefault() 将阻止表单提交并且无法撤消。您可以在此处理程序中使用returning，其中返回false 会阻止默认行为（与e.preventDefault() 相同）并且 阻止事件传播（与e.stopPropagation() 相同） .由于confirm 根据用户单击的按钮返回一个布尔值，因此您只需return 该值即可。另外，您想防止在未填写电子邮件时提交（紧跟在alert 之后），因此在此处放置return false;。这是一个例子：

$(function()
  $('form').on('submit',function(e)
    var email = $('#user_email').val();
    if(email.length == 0)
      alert('Please enter your email address.');
      return false;
     else 
      return confirm('Are you sure you want to reset the password for: '+ email);
     
  );
);

演示： http://jsfiddle.net/tyaw1az1/