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

时间:2014-03-15 06:32:49

标签: javascript jquery html forms

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

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

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

  3. 问题:

    • 表单提交正在运行,但即使表单未验证并且提交"模式也会显示。按下按钮。

    我正在使用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
        }
    });
    

5 个答案:

答案 0 :(得分: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;
})

答案 1 :(得分: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"}
    });
});

答案 2 :(得分:0)

如果submitHandler正在处理您的表单提交,而form参数是事件对象,那么您只需要这样做:

form.stopPropagation();

卡尔..

答案 3 :(得分:0)

onclick事件使用单个按钮而非提交按钮,当在javascript中验证表单时,使用以下内容提交:

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

答案 4 :(得分:0)

好的,请仔细查看您的代码:

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