javascript - 单击 "submit"按钮时如何才能不发生某些事情

Question

我正在构建一个应该做两件事的表单:

1. 如果输入电子邮件，请通过隐藏的 iframe 将数据提交到 Mailchimp，然后打开代码中包含的模式。

2. 如果表单中的值不正确或没有值，则应该在字段中显示错误，例如“请输入您的电子邮件”或“无效的电子邮件”。

与此相关的问题:

• 表单提交正常，但即使表单未验证且按下“提交”按钮，模式也会显示。

我正在使用http://jqueryvalidation.org/插件，所以这就是我的 JS 的基础。

HTML:

<form action="http://Verseux.us3.list-manage2.com/subscribe/post" id="myform1" class="myform1" method="POST" name="form" target="hidden-form">

        <!-- edit form styles: rounded corners, seperation between field and label -->
        <div class="row" id="form">
          <div class="small-11 medium-8 large-7 small-centered columns">
            <div class="row collapse">
              <div class="form-field columns">
                <input type="hidden" name="u" value="64f283b6044970e25fc1a2fc7">
                <input type="hidden" name="id" value="3674d50bfa">
                <input type="email" autocapitalize="off" autocorrect="off" name="email" id="MERGE0" placeholder="Get early access to VERSEUX">
              </div>
              <div class="form-button columns">
                <input class="button postfix md-trigger" onclick="validate()" data-modal="modal-16" type="submit" name="submit" value="Sign Up">
                <input class="button postfix1 md-trigger" data-modal="modal-16" type="submit" name="submit" value="Go">
              </div>
            </div>
          </div>
        </div>
      </form>
      <IFRAME style="display:none" name="hidden-form"></IFRAME>  
      <div class="row" id="sub-text">
        <div class="small-10 medium-10 small-centered columns end">
          <h2 id="welcome-2">
            JULY TWENTY-FOURTH
          </h2>
        </div>
      </div>
    </div>

JS:

$(document).ready(function () {

$('#myform').validate({ // initialize the plugin
    rules: {
        email: {
            required: true,
            email: true,
            minlength: 5
        },
    });
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

Answer 1

示例中的代码不正确。我已经对其进行了一些修复，现在它可以按照您想要的方式工作:

删除了 html 中的 onclick

<form action="localhost" id="myform1" class="myform1" method="POST" name="form" target="hidden-form">
    <!-- edit form styles: rounded corners, seperation between field and label -->
    <div class="row" id="form">
      <div class="small-11 medium-8 large-7 small-centered columns">
        <div class="row collapse">
          <div class="form-field columns">
            <input type="hidden" name="u" value="64f283b6044970e25fc1a2fc7">
            <input type="hidden" name="id" value="3674d50bfa">
            <input type="email" autocapitalize="off" autocorrect="off" name="email" id="MERGE0" placeholder="Get early access to VERSEUX">
          </div>
          <div class="form-button columns">
            <input class="button postfix md-trigger" data-modal="modal-16" type="submit" name="submit" value="Sign Up">
            <input class="button postfix1 md-trigger" data-modal="modal-16" type="submit" name="submit" value="Go">
          </div>
        </div>
      </div>
    </div>
  </form>
  <IFRAME style="display:none" name="hidden-form"></IFRAME>  
  <div class="row" id="sub-text">
    <div class="small-10 medium-10 small-centered columns end">
      <h2 id="welcome-2">
        JULY TWENTY-FOURTH
      </h2>
    </div>
  </div>
</div>

在 JS 中添加消息和正确的表单 ID:

$(document).ready(function () {
    $('#myform1').validate({ // initialize the plugin
        rules: {
            email: {
                required: true,
                email: true,
                minlength: 5
            },
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        },
        messages:{ email: "please eneter valid email"}
    });
});