使用 jQuery 防止 Elementor 表單提交

Question

我們有一個簡單的 Elementor 表單，其中一個字段用於 email 地址和一個提交按鈕，供人們注冊時事通訊。

我正在嘗試添加一些自定義驗證，以僅允許來自.co.uk 、 .gov.uk和gmail.com email 的提交地址與其中一個地址匹配，並阻止提交。

驗證本身有效，因為它在適當時顯示自定義錯誤消息，但盡管調用e.preventDefault()和e.stopPropagation();但它並沒有阻止提交。 ，並return false; .

我看過的每個線程都說這在理論上應該有效，但也許它與 Elementor forms 不同？ 有任何想法嗎？

(function($) {
  $(document).ready(function() {
    const accepted = ['.co.uk', '.gov.uk', 'gmail.com'],
      form = $('#mail_signup');

    $(form).submit(function(e) {
      $('.mail-form-invalid').remove();

      const email = $('#form-field-email').val(),
        valid = accepted.some(accepted => email.includes(accepted));

      if (!valid) {
        e.preventDefault();
        e.stopPropagation();
        $(form).after('<p class="mail-form-invalid" style="color: #f00;">Sorry, we only allow submissions from .co.uk, .gov.uk and gmail.com.</p>');
        return false;
      }
    });
  });
})(jQuery);

Answer 1

感謝 Rory McCrossan 的評論，我能夠更新我的代碼來監聽提交按鈕的點擊：

<script>
    (function($){
        
        $(document).ready(function(){
        
            const accepted = ['.co.uk','.gov.uk','gmail.com'],
                  form = $('#mail_signup'),
                  input = $('#form-field-email'),
                  submit = $(form).find('button[type="submit"]');
                  
            function validate(e){
                $('.mail-form-invalid').remove();
                
                const email = $(input).val(),
                      valid = accepted.some( accepted => email.includes( accepted ) );
                      
                if (!valid) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(form).after('<p class="mail-form-invalid" style="color: #f00; margin-top: 10px;">Sorry, we only allow submissions from .co.uk, .gov.uk and gmail.com.</p>');
                    return false;
                }
            }
            
            $(submit).on('click',function(e){
               validate(e); 
            });
            
        });
        
    })(jQuery);
</script>