由于按钮的利益冲突，表单不会提交

Question

我的网站有一个与 MailChimp 链接的简单表单。问题是表单的提交按钮有利益冲突，具体来说，有 javascript 电子邮件字段验证代码要求按钮在按钮代码中写入 type="submit"。但是如果我包含 type=submit，它会阻止我的表单提交到 MailChimp。

这是2种形式的按钮代码。第一个是允许 javascript 错误验证工作但提交给 MailChimp 不工作的表单（注意类型）

<button class='buttonmain' type="submit" >Submit Form</button>

第二个表单没有 type="submit"，因此 js 验证不起作用，但它会提交给 MailChimp：

<button class='buttonmain'>Submit Form</button>

这是完整的表格

<form id="form-signup_v1"
      name="form-signup_v1"
      method="POST"
      action="http://mysite.us10.list-manage.com/subscribe/post"
    >
    <!-- MailChimp Code -->
<input type="hidden" name="u" value="g02362223cdaf329adf5">
<input type="hidden" name="id" value="32da65235dba0">

      <div class="errorstyle">
    <div class="field">
        <div class="ui left labeled input">

            <input id="MERGE0"
                   name="MERGE0"
                   placeholder="My Email Address"
                   type="text"
                   data-validation="[EMAIL]">

            <div class="ui corner label">
                <i class="asterisk icon">*</i>
            </div>
        </div>
    </div>
</div>


<button class='buttonmain' type="submit" >Submit</button>


</form>

这是验证电子邮件字段的脚本。注意它如何调用 "submit".

<script>

    $('#form-signup_v1').validate({
        submit: {
            settings: {
                inputContainer: '.field'
            },
            callback: {
                onBeforeSubmit: function (node) {

                    myBeforeSubmitFunction(':D', ':)', node);

                },
                onSubmit: function (node) {

                    console.log('#' + node.id + ' has a submit override.');

                    //node.submit();

                }
            }
        },
        debug: true
    });

    function myBeforeSubmitFunction(a, b, node) {

        console.log(a, b);

        $(node).find('input:not([type="submit"]), select, textarea').attr('readonly', 'true');
        $(node).append('<div class="ui active loader"></div>');

    }

    $('#prefill-signup_v1').on('click', function () {

        var form = $(this).closest('form');

        form.find('#signup_v1-name').val('John Doe');
        form.find('#signup_v1-username').val('RocketJoe');
        form.find('#signup_v1-password').val('test123');
        form.find('#signup_v1-password-confirm').val('test123');
        form.find('#signup_v1-email').val('test@test.test');
        form.find('#signup_v1-email-confirm').val('test@test.test');

    });

</script>

如何合并我一开始贴的2个按钮代码表单，使表单通过js验证并提交给MC？

非常感谢！

Answer 1

我自己解决了这个问题：

更改脚本以包含：

 function myBeforeSubmitFunction(a, b, node) {
   document.getElementById("form-signup_v1").submit();

由于按钮的利益冲突，表单不会提交

Form won't submit due to button's conflicting interests

html

javascript

forms

mailchimp