jquery验证。。。验证方法不工作但未引发错误

我有一个弹出窗口notifyDa，该弹出窗口还显示3种不同的情况。。 这很好。我面临的问题是验证。 验证方法不起作用。 除了“必需”字段验证之外，我还有一个场景，其中有两个下拉列表，如果选择了其中一个，则可以提交表单

我的弹出代码是

function notifyDa(daValueForUser) {
        var ctx = '${contextPath}';
        var queryUrl = ctx + "/excessList.htm?getDaList=true";

        var html = "<form id='notifyForm'><table><tr><td align='center' colspan='2'> Excess Notification </td></tr>";
        $.ajax({
            url : queryUrl,
            type : "POST",
            dataType : "text",
            success : function(result) {
                result = jQuery.parseJSON(result);  // as dataType is Text
                var items = result;

    if(daValueForUser>=4) {
                    html = html + "<tr><td>Select DA Holder</td><td><select id='daList'><option>select</option>";
                    for ( var i = 0; i < items.length; i++ ) {
                        html = html + "<option value='"+items[i]+"'>"+items[i]+"</option>";
                    }
                }
    if (daValueForUser<=3) { 
                    html = html + "<tr><td>Select DA4 Holder</td><td><select id='daList1'>";
                    for ( var i = 0; i < items.length; i++) {
                        html = html + "<option value='"+items[i]+"'>"
                                + items[i] + "</option>";
                    }
                    html = html + "</select></td></tr><tr><td>Select DA4 Holder</td><td><select id='daList2'>";
                    for ( var i = 0; i < items.length; i++) {
                        html = html + "<option value='"+items[i]+"'>"
                                + items[i] + "</option>";
                    }
                }
                html = html+"</select></td></tr><tr><td>Comments:</td><td><input name='comments'></td></tr>" +  
                    "<tr><td></td><td> <table><tr><td align='right'><button type='button' onclick='javascript:sendNotifyDetails();'>Send</button></td><td align='left'><button type='button' onclick='javascript:closeNotifyDaPopup();'>Cancel</button></td></tr></table></td></tr></table></form>";

                $('#notifyDiv').empty();
                $('#notifyDiv').html(html);

                $("#pop").click(function() {
                    $("#notifyDiv").fadeIn(1000);
                    if (!$("#notifyDiv").is(':visible')) {
                        return;
                    }
                });

                $("#notifyDiv").css({
                    left : ($(window).width() - $('#notifyDiv').width()) / 2,
                    top : ($(window).width() - $('#notifyDiv').width()) / 7,
                    position : 'absolute'
                });

                $('#daList1').change(function(e) {
                    index = this.selectedIndex;
                    $('#daList2 option').prop('disabled', false); // enable all options
                    if (index != 0) {
                        $('#daList2').get(0).selectedIndex = 0; // so you don't disable the option after it's selected
                        $('#daList2 option:eq(' + index + ')').prop('disabled', true);
                    }
                });
            },
            error : function() {

            }
        });

    }

---

它正在输入验证方法，但未显示错误消息。 我将错误元素指定为span，并在选项之前插入。 现在我把代码改为

function notifyDa(daValueForUser) {
        var ctx = '${contextPath}';
        var queryUrl = ctx + "/excessList.htm?getDaList=true";
        //daValueForUser=3
        var html = "<form id='notifyForm'><span class='errorMessage'></span><div id='error'></div><table><tr><td align='center' colspan='2'> Excess Notification </td></tr>";
        $.ajax({
            url : queryUrl,
            type : "POST",
            dataType : "text",
            success : function(result) {
                result = jQuery.parseJSON(result);  // as dataType is Text
                var items = result;

                if(daValueForUser>=4) {
                    html = html + "<tr><td>Select DA Holder</td><td><select id='daList'><option>select</option>";
                    for ( var i = 0; i < items.length; i++ ) {
                        html = html + "<option value='"+items[i]+"'>"+items[i]+"</option>";
                    }
                }
                if (daValueForUser<=3) { 
                    html = html + "<tr><td>Select DA4 Holder</td><td><select id='daList1'>";
                    for ( var i = 0; i < items.length; i++) {
                        html = html + "<option value='"+items[i]+"'>"
                                + items[i] + "</option>";
                    }
                    html = html + "</select></td></tr><tr><td>Select DA4 Holder</td><td><select id='daList2'>";
                    for ( var i = 0; i < items.length; i++) {
                        html = html + "<option value='"+items[i]+"'>"
                                + items[i] + "</option>";
                    }
                }
                html = html+"</select></td></tr><tr><td>Comments:</td><td><input name='comments'></td></tr>" +  
                    "<tr><td></td><td> <table><tr><td align='right'><input type='submit' value='Send'/></td><td align='left'><button type='button' onclick='javascript:closeNotifyDaPopup();'>Cancel</button></td></tr></table></td></tr></table></form>";

                $('#notifyDiv').empty();
                $('#notifyDiv').html(html);

                $("#notifyForm").validate({
                    submitHandler: function() { alert("Submitted!");},
                    errorElement: "span",
                    errorPlacement: function(error, element) {
                        error.insertBefore($("#error"));
                    },
                    rules: {
                        daList: "required",
                        comments: "required"
                    },
                    messages: {
                        daList:  "Enter DA Holder",
                        comments: "comments required"
                    }
                });

                $("#notifyDiv").fadeIn(1000);



                $("#notifyDiv").css({
                    left : ($(window).width() - $('#notifyDiv').width()) / 2,
                    top : ($(window).width() - $('#notifyDiv').width()) / 7,
                    position : 'absolute'
                });

                $('#daList1').change(function(e) {
                    index = this.selectedIndex;
                    $('#daList2 option').prop('disabled', false); // enable all options
                    if (index != 0) {
                        $('#daList2').get(0).selectedIndex = 0; // so you don't disable the option after it's selected
                        $('#daList2 option:eq(' + index + ')').prop('disabled', true);
                    }
                }); 
            },
            error : function() {

            }
        });

    }

函数notifyDa（daValueForUser）{
var ctx='${contextPath}'；
var queryUrl=ctx+“/excessList.htm？getDaList=true”；
//daValueForUser=3
var html=“超额通知”；
$.ajax({
url:queryUrl，
类型：“POST”，
数据类型：“文本”，
成功：功能（结果）{
result=jQuery.parseJSON（result）；//因为数据类型是文本
var项目=结果；
if（daValueForUser>=4）{
html=html+“选择数据持有者选择”；
对于（变量i=0；i$（“#notifyForm”）。请在关闭事件发生之前进行验证

因此，使用此代码创建表单后：

$('#notifyDiv').html(html);

在这之后，您应该调用validate：

    $("#notifyForm").validate({
        submitHandler: function() { alert("Submitted!");},
        rules: {
            daList: "required",
            comments: "required"
        },
        errorElement: "div",
        messages: {
            daList:  "Select a DA Holder",
            comments: "Enter comments"
        }
    });

然后，将按钮更改为提交按钮，如下所示：

旧的：

<button type='button' onclick='javascript:sendNotifyDetails();'>Send</button>

发送

新的：



这将自动触发验证，如果表单有效，将调用您的submitHandler。
.validate（）
是插件的初始化，而不是测试表单的方法。
.validate（）
只应在首次构造表单后立即调用。请参见下面Ryley的回答。这可能是一个完全不同的问题，我的解决方案似乎工作正常：我复制了您的整个代码，只运行了该代码……即使在这样的情况下，也不会显示错误消息
<button type='button' onclick='javascript:sendNotifyDetails();'>Send</button>

<input type="submit" value="Send"/>