Question

我的网站有一个与MailChimp链接的简单表单。问题是表单的提交按钮具有冲突的兴趣，特别是那里的javascript电子邮件字段验证代码要求按钮在按钮代码中写入type="submit"。但如果我加入type=submit，则会阻止我的表单提交给MailChimp。

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

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

第二种形式没有类型=＆＃34;提交＆＃34;所以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>

以及验证电子邮件字段的脚本。请注意它如何调用＆＃34;提交＆＃34;。

<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验证表单IS并提交给MC？

非常感谢！

Answer 1

我自己解决了这个问题：

更改脚本以包含：

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

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

1 个答案: