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

Question

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

Answer 1

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

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

Answer 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>

Answer 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>