Question

我在一个页面上有三个电子邮件表单，都使用相同的类。当有人输入电子邮件地址并提交其中一个表单时，我想验证输入该特定表单的电子邮件地址。我遇到的问题是，有人输入后续表单之一的电子邮件地址，它会对第一种表单中的数据进行验证。我怎样才能使我的验证功能验证输入电子邮件地址的字段，而不必为每个表单提供唯一的ID并多次使用验证码？

验证码如下，其中一个表格的代码。谢谢！

{{1}}

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完成所有事件绑定，如果您已经使用return false，则无需担心.preventDefault()取消事件。此外，最好将事件引用捕获为事件回调函数的参数，而不是全局event对象。

还有其他项目也应该调整，因此请参阅内联其他评论：

// 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的组合＆＃39;上面的答案最终让我到了我需要去的地方。下面是我最终得到的，它按预期工作。正如其他人所指出的那样，我绝对是一个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>

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

3 个答案: