JQuery验证仅适用于调试模式

Question

我有一个空表单和一个下拉列表，每次点击时，不同的元素将附加到表单。我调用JQuery validate()一次初始化验证器，并在每次使用rules.add()填写表单时定义验证规则。

如果我在表单中键入内容，将其删除，然后单击“提交”，则所需的验证工作正常。但是，如果我不提供任何输入并立即单击“提交”，则表单不会显示错误消息，指出输入是必需的。它仅在我在Chrome中设置断点时才有效。

我错过了什么吗？

ASPX页面

<div id="divMenuQuery">
    <div id="divQueryDDL"></div>
    <div id="divQueryControls">
        <form id="formQuery" />
    </div>
    <input type="button" id="btnExecuteQuery" runat="server" value="Execute" />
</div>

JS - 以下示例仅适用于文本框，但适用于所有HTML控件（DDL，Listbox，...）

function _init() {
    $form = $("#formQuery");
    _createDDL(); // creates DDL and registers event handler below
}

function _onChangeDDL() {
    var selectedTheme = $(this).val;
    $form.validate();
    $.each(selectedTheme.Controls, function (index, control) {
        _buildControl(index, control);
    }
}

function _buildControl(control) {
    switch (control.Type) {
        case Gon.Control.textBox:
            _createTextBox(control);
            break;
        default:
            break;
    }
}

function _createTextBox(control) {
    var $textBox = $("<input>");
    $textBox.attr({
        id: control.UniqueID,
        name: control.UniqueID,
        value: ""
    }).appendTo($form);

    $textBox.rules("add", {
        required: true,
        messages: {
            required: "This field is required"
        }
    });
}

function _onClickExecute() {
    var numErrors = $form.validate().numberOfInvalids(); // always gives 0
    var formNodes = $form.serializeArray();
    if (numErrors == 0 && $form.valid()) { // .valid() always gives true
        _showQueryResults(formNodes);
    }
}

以下是呈现的HTML页面：