1

我有一个弹出式 notifyDa 并且弹出式显示 3 个不同的条件。这工作正常。我面临的问题是验证。验证方法不起作用。而且除了“必填”字段验证之外，我还有一个场景，其中有 2 个下拉列表，如果选择了其中一个，则可以提交表单。

我的弹出代码是

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() {

            }
        });

    }

我的验证代码是

    function sendNotifyDetails(){
        alert("Inside close");

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

}

它正在输入验证方法但不显示错误消息。我将错误元素作为 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() {

            }
        });

    }
4

1 回答 1

2

您需要$('#notifyForm').validate在关闭事件发生之前调用。

因此，一旦您使用此代码创建了表单：

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

新的：

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

这将自动触发验证，如果表单有效，您的 submitHandler 将被调用。

于 2013-04-18T16:21:40.163 回答