Question

我正在使用Runningcoder网站上的jQuery验证配置。

我已经设置了我的注册表单，它正在验证表单确定。我遇到的问题是当我单击表单上的提交时，没有任何反应。我正在使用的表格是：

<form id="form-signup_v2" name="form-signup_v2" method="post" class="validation-form-container" action="index.php">

<div class="field">
    <label for="signup_v2-firstname">First Name</label>
    <div class="ui left labeled input">
        <input id="signup_v2-firstname" name="signup_v2[firstname]" type="text" data-validation="[NOTEMPTY, NAME, L&gt;=2, TRIM]" data-toggle="popover" data-content="Firstname" data-validation-message="Please enter your firstname.">
        <div class="ui corner label">
            <i class="asterisk icon"></i>
        </div>

    </div>
</div>
<div class="field">
    <label for="signup_v2-lastname">Last Name</label>
    <div class="ui left labeled input">
        <input id="signup_v2-lastname" name="signup_v2[lastname]" type="text" data-validation="[NOTEMPTY, NAME, L&gt;=2, TRIM]" data-toggle="popover" data-content="Surname" data-validation-message="Please enter your surname.">
        <div class="ui corner label">
            <i class="asterisk icon"></i>
        </div>

    </div>
</div>
<div class="field">
    <label for="signup_v2-email">Email</label>
    <div class="ui left labeled input">

        <input id="signup_v2-email" name="signup_v2[email]" type="text" data-validation="[EMAIL]">

        <div class="ui corner label">
            <i class="asterisk icon"></i>
        </div>
    </div>
</div>
<div class="field">
    <label for="signup_v2-email-confirm">Confirm Email</label>
    <div class="ui left labeled input">

        <input id="signup_v2-email-confirm" name="signup_v2[email-confirm]" type="text" data-validation="[V==signup_v2[email]]" data-validation-message="Your email address does not match.">
        <div class="ui corner label">
            <i class="asterisk icon"></i>
        </div>
    </div>
</div>
<div class="field">
    <div class="ui checkbox">
        <input id="signup_v2-agree" name="signup_v2[agree]" data-validation="[NOTEMPTY]" data-validation-message="Please accept the terms and conditions." type="checkbox">
        <label class="checkbox" for="signup_v2-agree">I agree the <a href="#">terms and conditions</a></label>
    </div>
</div>

我在页面上的表单下方使用的脚本是：

<script>             
$.validate({
submit: {
    settings: {
        form: '#form-signup_v2',
        inputContainer: '.field',
        errorListClass: 'ui red pointing below label'
    },
    callback: {
        onSubmit: function (node, formData) {
            console.log('~~~~~~~~~')
            console.log(node)
            console.log(formData)
            console.log('~~~~~~~~~')
        }
    }
},
dynamic: {
    settings: {
        trigger: 'focusout'
    },
    callback: {
        onSuccess: function (node, input, keyCode) {
            if ($(input).val()) {
$(input).parent().find('.ui.corner.label').removeClass('red').addClass('green');
            }
        },
        onError: function (node, input, keyCode, error) {
            $(input).parent().find('.ui.corner.label').removeClass('green');
        }
    }
}
});             
</script>

希望这对那里的人来说很容易解决？！

提前致谢

Answer 1

根据documentation：

settings.callback.onSubmit

如果没有找到错误，将执行。


小心，使用此回调将覆盖原生HTML form.submit（）并阻止表单默认提交。

settings.callback.onSubmit仅拨打console.log。你在JavaScript控制台中看到了什么吗？如果将onSubmit替换为onBeforeSubmit，会发生什么？

Answer 2

感谢您的帮助szym。我发现有2个问题。

1）对于我正在做的事情，并不需要settings.callback.onSubmit，所以我从块中删除了它。

2）提交按钮不应具有提交的ID或名称属性。

使用jQuery进行内联表单验证

2 个答案: