当同一页面上有多个使用同一个类时，如何验证电子邮件提交表单？

Posted 2023-05-09

【中文标题】当同一页面上有多个使用同一个类时，如何验证电子邮件提交表单？

【英文标题】：How to Validate an Email Submission Form When There Are Multiple on the Same Page Using the Same Class?

【发布时间】：2018-04-07 03:44:33

【问题描述】：

我在一页上有三个电子邮件表单，都使用同一个类。当有人输入电子邮件地址并提交其中一个表单时，我想验证输入该特定表单的电子邮件地址。我遇到的问题是有人为后来的一个表单输入了一个电子邮件地址，它会根据第一个表单中的数据进行验证。如何使我的验证函数验证输入电子邮件地址的字段，而不必为每个表单提供唯一 ID 并多次验证代码？

验证代码如下和其中一种形式的代码。谢谢！

               <script>
                    function validateMyForm() 
                            var sEmail = $('.one-field-pardot-form-handler').val();
                            if ($.trim(sEmail).length == 0) 
                                event.preventDefault();
                                alert('Please enter valid email address.');
                                return false;

                            

                            if (validateEmail(sEmail)) 

                            

                            else 
                                event.preventDefault();
                                alert('Invalid Email Address. Please try again.');                          
                    ;

                    function validateEmail(sEmail) 
                        var filter = /^([\w-\.]+)@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.)|(([\w-]+\.)+))([a-zA-Z]2,4|[0-9]1,3)(\]?)$/;
                        if (filter.test(sEmail)) 
                            return true;
                        
                        else 
                            return false;
                        
                                                                      

                 </script>  

                 <form action="https://go.pardot.com/l/43312/2017-10-24/7dnr3n" method="post" onSubmit="return validateMyForm();" novalidate>

                    <input class="one-field-pardot-form-handler" maxlength="80" name="email" size="20" type="email" placeholder="Enter Email Address" required="required" />
                    <div style="position:absolute; left:-9999px; top: -9999px;">
                      <label for="pardot_extra_field">Comments</label>
                      <input type="text" id="pardot_extra_field" name="pardot_extra_field">
                    </div>

                    <button type="submit" name="submit">Submit</button>
                </form>

【问题讨论】：

你不能检查哪个输入有一个值，然后验证它的父表单吗？或者在提交时验证输入中包含值的每个表单（如果用户可以在多个表单中输入电子邮件）？

【参考方案1】：

与其从 html onsubmit 属性调用方法，不如在 jquery 中连接整个事情。

$('form.myform').submit(function(e)
   var $theForm = $(this);
   var $theEmailInput = $theForm.find('.one-field-pardot-form-handler');
   validateEmail($theEmailInput.val());
);

【讨论】：

你可以写var theForm = $(this); var theEmailInput = theForm.find('.one-field-pardot-form-handler');而不是var theEmailInput = $('.one-field-pardot-form-handler', this);

@JoshuaK 当然，因为 OP 似乎很新，所以我试图明确表示。

好的。一些“改进”：根据 jquery 命名约定，它应该是 $theForm 和 $theEmailInput。对于新手来说，在所有 jQuery 集合前面加上 $ 符号是一个很好的记忆道具。

@Paul 这是一个非常普遍的约定，早在 JQuery 出现在 CDN 之前。

@Paul 这是 2009 年的 SO post。

【参考方案2】：

如果您有 3 个表单，只需在表单上下文中定位电子邮件字段（通过类）。

而且，不要使用内联 HTML 事件属性（onsubmit 等），原因有很多，您可以阅读这些 here。 相反，使用 javascript/JQuery 进行所有事件绑定，如果您已经在使用 .preventDefault()，则无需担心 return false 会取消事件。此外，最好将事件引用捕获为事件回调函数的参数，而不是全局 event 对象。

还有其他项目也应该调整，所以请参阅其他 cmets inline：

// Get all the form elements and set up their event handlers in JavaScript, not HTML
$("form").on("submit", validateMyForm);

function validateMyForm(evt) 
  // First, get the form that is being filled out
  var frm = evt.target;
  evt.preventDefault();
  
  // Now, just supply the form reference as context for the email search
  // Notice the extra argument after the selector "frm"? That tells JQuery
  // where within the DOM tree to search for the element.
  var sEmail = $('.one-field-pardot-form-handler', frm).val();
  
  // Just to show that we've got the right field:
  $('.one-field-pardot-form-handler', frm).css("background-color", "yellow");
  // ***************************************************************************
  
  // No need to convert a string to a JQuery object and call .trim() on it
  // when native JavaScript has a .trim() string method:
  if (sEmail.trim().length == 0) 
    evt.preventDefault();
    alert('Please enter valid email address.');
  

  // Don't have empty branches, reverse the logic to avoid that
  if (!validateEmail(sEmail)) 
    evt.preventDefault();
    alert('Invalid Email Address. Please try again.');                         
  



function validateEmail(sEmail) 
  var filter = /^([\w-\.]+)@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.)|(([\w-]+\.)+))([a-zA-Z]2,4|[0-9]1,3)(\]?)$/;
  
  return filter.test(sEmail);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://go.pardot.com/l/43312/2017-10-24/7dnr3n" 
      method="post" 
      novalidate>
  <input class="one-field-pardot-form-handler" 
         maxlength="80" 
         name="email" 
         size="20" 
         type="email" 
         placeholder="Enter Email Address" 
         required>
  <div style="position:absolute; left:-9999px; top: -9999px;">
    <label for="pardot_extra_field">Comments</label>
    <input type="text" id="pardot_extra_field" name="pardot_extra_field">
  </div>

  <button type="submit" name="submit">Submit</button>
</form>
<form action="https://go.pardot.com/l/43312/2017-10-24/7dnr3n" 
      method="post" 
      novalidate>
  <input class="one-field-pardot-form-handler" 
         maxlength="80" 
         name="email" 
         size="20" 
         type="email" 
         placeholder="Enter Email Address" 
         required>
  <div style="position:absolute; left:-9999px; top: -9999px;">
    <label for="pardot_extra_field">Comments</label>
    <input type="text" id="pardot_extra_field" name="pardot_extra_field">
  </div>

  <button type="submit" name="submit">Submit</button>
</form>
<form action="https://go.pardot.com/l/43312/2017-10-24/7dnr3n" 
      method="post" 
      novalidate>
  <input class="one-field-pardot-form-handler" 
         maxlength="80" 
         name="email" 
         size="20" 
         type="email" 
         placeholder="Enter Email Address" 
         required>
  <div style="position:absolute; left:-9999px; top: -9999px;">
    <label for="pardot_extra_field">Comments</label>
    <input type="text" id="pardot_extra_field" name="pardot_extra_field">
  </div>

  <button type="submit" name="submit">Submit</button>
</form>

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

【参考方案3】：

所以上面@paul 和@ScottMarcus 的答案的组合最终让我到达了我需要去的地方。以下是我最终得到的结果，它按预期工作。正如其他人所指出的，我绝对是一个 n00b 并且只是学习 javascript，所以肯定可能并不完美：

<script>
$('form.pardot-email-form-handler').submit(function(event) 
var theForm = $(this);
var theEmailInput = theForm.find('.one-field-pardot-form-handler');
var theEmailValue = theEmailInput.val();

function validateEmail(theEmailValue) 
var filter = /^([\w-\.]+)@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.)|(([\w-]+\.)+))([a-zA-Z]2,4|[0-9]1,3)(\]?)$/;
if (filter.test(theEmailValue)) 
return true;
 else 
return false;



if (!validateEmail(theEmailValue)) 
event.preventDefault();
alert('Invalid Email Address. Please try again.');
 else 
return true;


);
</script>
<div class="nav-email-form">    
<form action="https://go.pardot.com/l/43312/2017-10-24/7dnr3n" method="post" class="pardot-email-form-handler" novalidate>

<input class="one-field-pardot-form-handler" maxlength="80" name="email" size="20" type="email" placeholder="Enter Email Address" required="required" />
<div style="position:absolute; left:-9999px; top: -9999px;">
<label for="pardot_extra_field">Comments</label>
<input type="text" id="pardot_extra_field" name="pardot_extra_field">
</div>

<button type="submit" name="submit">Submit</button>
</form>

</div>