Javascript jqueryvalidator不会验证表单，除非输入中填写了必需的值并发送了一次

我试图在使用JQuery validator发送表单之前验证表单，但问题是表单不会得到验证，除非我按一次submit（按要求的长度），然后表单开始验证。即使我点击submit，但没有用最小长度填充输入，它也不会验证。 这是我的html：

 <form class="newRegister-formBox basketForm" id="confirmPhoneNumberForm" autocomplete="off">
                    <input autocomplete="off" type="text" name="code" id="code" class="form-control persianDigitInput" placeholder="">    
                <div class="newRegister-button">
                    <button type="button" id="send-confirm-phone-number-code" class="animateBtn greenAnimateBtn" >
                        <i class="fa fa-check"></i>
                        confirm
                    </button>
                </div>
    </form>

确认

这是我的JS代码，我使用的是主干JS。我已经定义了按钮的onclick事件来校准此函数：

   sendConfirmPhoneNumberCode: function() {

        var self = this;
        var $form = $("#confirmPhoneNumberForm");

        $("<input />").attr("type", "hidden")
            .attr("name", "PhoneNumber")
            .attr("value", $("input[name='PhoneNumber']").val())
            .appendTo($form);

          $("#confirmPhoneNumberForm").validate({
            rules: {
                code: {
                    required: true,
                    minlength: 4
                }
            },
            messages: {
                code: {
                    required: $utils.messages.user.required_ConfirmPhoneNumberCode,
                    minlength: $utils.messages.user.minlength_ConfirmPhoneNumberCode
                }
            }
        });

sendConfirmPhoneNumberCode:function（）{
var self=这个；
var$form=$（“#confirmPhoneNumberForm”）；
$（“”）.attr（“类型”，“隐藏”）
.attr（“姓名”、“电话号码”）
.attr（“value”，$（“输入[name='PhoneNumber']”）val（）
.附录（$表格）；
$（“#confirmPhoneNumberForm”）。验证({
规则：{
代码：{
要求：正确，
最小长度：4
}
},
信息：{
代码：{
必需：$utils.messages.user.required\u ConfirmPhoneNumberCode，
minlength:$utils.messages.user.minlength\u ConfirmPhoneNumberCode
}
}
});

在调用验证时打开验证。不要在

单击事件处理程序中调用它，而是在开始时调用它。
如果这解决了您的问题，请单击投票按钮下方的勾号接受它。