单击“提交”按钮时，如何才能使某些事情不发生

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

HTML5可以为您验证电子邮件字段

<form>
    <input type="email" id="emailform" placeholder="Enter your email">
    <input type="submit" value="Submit">
</form>

用户提交时显示错误。

如果你想通过js这样做。 只需获取input元素的值并返回false。

if ($('#emailform').val() == ""){
return false;
})

Answer 2

您的示例中的代码不正确。 我已经修改了一下，现在它可以按你的意愿工作：

在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"}
    });
});

Answer 3

如果submitHandler正在处理您的表单提交，并且form参数是事件对象，那么您只需要执行以下操作：

form.stopPropagation();

卡尔..

Answer 4

onclick事件使用单个按钮而不是提交按钮，当在javascript中验证表单时，使用以下内容提交它：

document.forms["form"].submit();

Answer 5

那么，仔细看看你的代码：

... }); // You are closing the validation method and submitHandler is not part of any object's config?
    submitHandler: function (form) { ...