Question

我的脚本正在运行，但仍然出现此错误在HTMLInputElement.onclick上未定义 submitHandler

这是表格

<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

我在HTMLInputElement.onclick上未定义此错误commitHandler

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

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

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

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

工作演示：jsfiddle.net/zt86jwqo

Answer 2

您没有定义在输入时单击onclick =“ submitHandler（myform）”调用的函数commitHandler（）。例如。您可以点击以下形式提交表单：

$('#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>

在HTMLInputElement.onclick上未定义SubmitHandler

2 个答案: