jquery validation ... validate method not working but not throwing error

Question

I have a popup notifyDa and also the popup displays 3 different conditions.. This is working fine.The problem i am facing is in validation. validate method is not working. And also apart from "required" field validation, I have a scenario where there are 2 dropdowns and if either one is selected,the form can be submitted..

My code for popup is

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

            }
        });

    }

My code for validation is

    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"
            }
        });

}

It is entering validate method but not displaying error message. I gave error element as span and also insert before option. Now i changed the code to

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

            }
        });

    }

.validate() is the plugin's initialization, not a method to test the form. .validate() should only be called immediately after the form is first constructed. See Ryley's answer below. — Sparky
– Sparky, Commented Apr 19, 2013 at 15:20

Ryley · Accepted Answer · 2013-04-19 15:16:10Z

2

You need to call $('#notifyForm').validate before the close event happens.

So as soon as you've created the form with this code:

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

Right after that is where you should be calling validate:

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

Then, change your button to be a submit button like this:

Old:

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

New:

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

This will automatically trigger validation and if the form is valid, your submitHandler will be called.

edited Apr 19, 2013 at 15:16

answered Apr 18, 2013 at 16:21

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ryley Over a year ago

This is probably a different issue entirely, my solution seems to work fine: jsfiddle.net/ryleyb/5jTSc

user2265200 Over a year ago

I copied ur entire code and only ran that code...even then error message is not being displayed

Collectives™ on Stack Overflow

jquery validation ... validate method not working but not throwing error

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related