HTMLInputElement.onclick 处未定义 submitHandler

Question

我的脚本可以运行，但我仍然有这个错误 submitHandler 未定义在 HTMLInputElement.onclick

这是表格

<form id="myform" method="get" action="" class="form-inline pt-5 mt-5 mt-md-0">
                    <div class="group mx-auto">
                        <input name="name" id="name" class="form-input" type="text" required>
                        <span class="highlight"></span>
                        <span class="bar"></span>
                        <label class="label">Имя</label>
                    </div>
                    <div class="group mx-auto">
                        <input name="tel" id="tel" class="form-input" type="text" required>
                        <span class="highlight"></span>
                        <span class="bar"></span>
                        <label class="label">Телефон</label>
                    </div>
                    <input type="submit" onclick="submitHandler(myform)" class="btn btn-danger mx-auto submit">
                </form>

这是我的简单 jquery 验证脚本

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            name: {
                required: true,
            },
            tel: {
                required: true,
            }
        },
        submitHandler:function(form){
            form.submit();
            console.log("----------------------------------");
            console.log($('#name').val());
            console.log($('#tel').val());
            console.log("----------------------------------");
        }
    });

});

请帮忙！我需要摆脱这个错误

Answer 1

您没有定义在输入点击时调用的函数 submitHandler() onclick="submitHandler(myform)"。例如。您可以点击以下按钮提交您的表格：

$('#myform').submit()

完整代码为：

<form id="myform" method="get" action="" class="form-inline pt-5 mt-5 mt-md-0">
                    <div class="group mx-auto">
                        <input name="name" id="name" class="form-input" type="text" required>
                        <span class="highlight"></span>
                        <span class="bar"></span>
                        <label class="label">Имя</label>
                    </div>
                    <div class="group mx-auto">
                        <input name="tel" id="tel" class="form-input" type="text" required>
                        <span class="highlight"></span>
                        <span class="bar"></span>
                        <label class="label">Телефон</label>
                    </div>
                    <input type="submit" onclick="$('#myform').submit()" class="btn btn-danger mx-auto submit">
                </form>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script>
<script>
$(document).ready(function () {

    $('#myform').validate({
        rules: {
            name: {
                required: true,
            },
            tel: {
                required: true,
            }
        },
        submitHandler: function(form){
            form.submit();
            console.log("----------------------------------");
            console.log($('#name').val());
            console.log($('#tel').val());
            console.log("----------------------------------");
        }
    });

});
</script>

Answer 2

i have this error submitHandler is not defined at HTMLInputElement.onclick

那是因为您正在尝试使用内联 onclick 处理程序来调用内置于插件中并且 由插件自动处理的函数。

您正在使用 jQuery，这消除了对任何内联处理程序的需要； jQuery Validate 插件会自动捕获表单提交按钮的点击。

删除内联 onclick 处理程序，一切都会按预期工作。

<input type="submit" class="btn btn-danger mx-auto submit">

工作演示：jsfiddle.net/zt86jwqo

HTMLInputElement.onclick 处未定义 submitHandler

submitHandler is not defined at HTMLInputElement.onclick

javascript

jquery

submit

jquery-validate