提交时验证表单的问题

Question

我正在尝试在提交时验证电子邮件。现在，我让它工作，以便它验证我是否从电子邮件中选择提交按钮，以及是否直接单击提交按钮。但是，它不会验证我是否在电子邮件字段中按 Enter。此外，一旦验证点击提交，我必须再次点击按钮才能实际提交。

原因是因为我在提交输入上从 type="button" 而不是 type="submit" 开始。这是因为在我开始使用 type="submit" 之前，无论电子邮件是否有效，它都会提交。

所以现在，我从 type="button" 开始，验证电子邮件，然后在有效电子邮件上将其更改为 type="submit"。但是，就像我提到的那样，它仍然不是最用户友好的（即使它按原样工作）。我想添加上述用户友好的功能。这是我拥有的代码（注意：我正在使用 Mailgun jQuery 电子邮件验证器进行验证部分）：

<form accept-charset="UTF-8" id="icpsignup" name="icpsignup" action="process.php" method="post">
    <p>                              
     <input type="text" onfocus="this.value=''" onblur="this.value=!this.value?'Enter name...':this.value;" class="txtbox_index" placeholder="Enter name..." value="Enter name..." name="fields_fname" id="fields_fname">
    </p>                                                                                 
    <p>                                            
     <input type="text" class="txtbox_index" onfocus="this.value=''" onblur="this.value=!this.value?'Enter email...':this.value;" name="fields_email" id="fields_email" Value="Enter email..." placeholder="Enter email...">
     <input type="text" style="border: none;color: #fff;cursor: none; background-color:transparent; height:0px;" size="1" value="<?=$country_field;?>" name="fields_country" id="fields_country">
   </p>
     <div id="status"></div>                                            
   <p class="forfree">                                              
     <input type="button" value="Signup For Free!" id="validate_submit" class="signupbtn_new" name="submit">
   </p>
     <input type="hidden" value="<?php echo $paramstring ;?>" name="fields_trk">
</form>   

<script src="js/vendor/jquery.js"></script>
<script src="js/mailgun_validator.js"></script>
<script>
      // document ready
      $(function() {

        // capture all enter and do nothing
       /* $('#fields_email').keypress(function(e) {
          if(e.which == 13) {
            $('#fields_email').trigger('focusout');
            return false;
          }
        });

        // capture clicks on validate and do nothing
       /* $("#validate_submit").click(function() {
          return false;
        });*/

        // attach jquery plugin to validate address
        $('#fields_email').mailgun_validator({
          api_key: 'pubkey-8s-e-ovj0nbi32xw5eeyibrmv-lkq2e2', // replace this with your Mailgun public API key
          in_progress: validation_in_progress,
          success: validation_success,
          error: validation_error,
        });

      });



      // while the lookup is performing
      function validation_in_progress() {
        $('#status').html("<img src='images/loading.gif' height='16'/>");
      }



      // if email successfull validated
      function validation_success(data) {
        $('#status').html(get_suggestion_str(data['is_valid'], data['did_you_mean']));
      }



      // if email is invalid
      function validation_error(error_message) {
        $('#status').html(error_message);
      }



      // suggest a valid email

 submitHandler: function(form) {
      function get_suggestion_str(is_valid, alternate) {
        if (alternate) {
          form.preventDefault();
          return '<span class="warning">Did you mean <em>' + alternate + '</em>?</span>';
        } else if (is_valid) {
          form.submit();
          //return '<span class="success">Address is valid.</span>';
        } else {
          form.preventDefault();     
          return '<span class="error">Address is invalid.</span>';
        }
      }
}

// 尝试使用 Submithandler 的另一个版本。我不确定我是否应该使用验证。：

$(function() {
  $("#icpsignup").validate({
 submitHandler: function('icpsignup') {
      function get_suggestion_str(is_valid, alternate) {
        if (alternate) {
          icpsignup.preventDefault();
          return '<span class="warning">Did you mean <em>' + alternate + '</em>?</span>';
        } else if (is_valid) {
          icpsignup.submit();
          //return '<span class="success">Address is valid.</span>';
        } else {
          icpsignup.preventDefault();     
          return '<span class="error">Address is invalid.</span>';
        }
      }}
    })
})


    </script>

Answer 1

更新：更完整的答案：

注意：假设您将使用 jQuery 1.4.3 或更高版本

---

SUBMIT 事件在用户尝试提交 FORM 时发送到元素：

• 它只能附加到<form> 元素。

• 可以通过单击显式提交表单：

  • <input type="submit">,
  • <input type="image">，或
  • <button type="submit">,
    或

  • 当某些表单元素具有焦点时按Enter。

    ---

    注意： *取决于浏览器，Enter 可能仅在以下情况下导致表单提交：
    • 表单只有一个文本字段，或者

    • 仅当存在提交按钮时。

      ---

      因此，您的代码不应依赖此键的特定行为，除非问题是通过观察 keypress 事件 来强制按下Enter 键是字符代码 13。
      • Here is information 关于如何使用来自 jQuery.com 的 .keypress() 处理程序
      • Here is a chart 比较所有 ASCII 字符/键码、HTML 转义码以及它们所代表的键/字符。

      ---

您可以在 jQuery.com 网站.submit() page HERE 获得更多详细信息。

---

在您的场景（以及大多数场景）中，我会使用<input type="submit"> 按钮并捕获 SUBMIT 事件。

在提交处理程序 回调函数中：

$( "form#icpsignup" ).submit(function( evt ){
  //...
  $('#fields_email').mailgun_validator({
    api_key: 'pubkey-8s-e-ovj0nbi32xw5eeyibrmv-lkq2e2', // replace this with your Mailgun public API key
    in_progress: validation_in_progress,
    success: validation_success,
    error: validation_error,
  });
  //...
}

您需要验证您的<form>（即在一个或多个input 字段上使用任何代码、语句等）。然后...

• 成功 - 使用return true 声明
• 失败 - 使用evt.preventDefault();，其中evt 是传递给提交处理程序的参数。

.

下面是一个详细的例子：

---

<!doctype html> 
<html lang="en">

  <head>   
    <meta charset="utf-8">  
    <title>submit demo</title>   
    <style>   
      p {
        margin: 0;
        color: blue;
      }
      div,p {
        margin-left: 10px;   
      }   
      span {
        color: red;   
      }   
    </style>   
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
  </head> 

  <body>  
    <p>Type 'correct' to validate.</p> 
    <form action="javascript:alert('success!');"
      <div>
        <input type="text">
        <input type="submit">   
      </div> 
    </form> 

    <script> 

      // "function( evt )" is an anonymous function.  It *is* your handler
      $( "form" ).submit(function( evt ) {   // evt is the *event* object. 
                                             // name it whatever you'd like. 
        if ( $( "input:first" ).val() === "correct" ) {  
          $( "span" ).text( "Validated..." ).show();
          return true;   
        }
        $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
        evt.preventDefault(); 
      }); 
    </script>

  </body>
</html>