Validating Dyamic Text Boxes

[Xtremer360]

I'm getting a JavaScript error and I know its because of my each function that I'm using for validating the user input and I'm wondering what I'm doing wrong. Can anyone explain what I'm doing wrong?

 

$(document).ready(function() {
    $('div.message-error').hide();
    $('div.message-success').hide();
    
    $("#dateExpires").datepicker({
        showOn: "button",
	buttonImage: "img/calendar.gif",
	buttonImageOnly: true
    });
    
    $('#numAnswers').change(function() {
        var numAnswers = $("select#numAnswers").val();
        var answerCount = $("fieldset.answerLeg div").size();
         
        if (numAnswers > answerCount) {
            var numDiff = numAnswers - answerCount;
            for ( var answerNum = 0; answerNum < numDiff; answerNum++) {
                var answerLabel = answerNum + answerCount + 1
                $('<div class="field required answers"><label for="answer'+ answerLabel  +'">Answer #'+ answerLabel +'</label><input type="text" class="text" name="answer'+ answerLabel +'" id="answer'+ answerLabel +'" title="Answer '+ answerLabel +'"/><span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span></div>').appendTo('.answerLeg');    
            }
        }else {
            var numDiff = answerCount - numAnswers;
            $('.answers').slice(-numDiff).remove();
        }
        
    });
    
    $("#pollForm").validate({ 
        $("fieldset.answerLeg div.answers input.text").each(function(){
            rules: {
                    required: true
            },
            messages: {
                    "Please enter an answer for the poll!"
            }                   
        });  
        rules: {
            question: {
                required: true
            },
            dateExpires: {
                required: true
            },
            statusID: {
                required: true
            },
            numAnswers: {
                required: true
            }
        },
        messages: {
            question: "Please enter a question for the poll!",
            dateExpires: "Please enter the date the poll expires!",
            statusID: "Please enter the poll's status!",
            numAnswers: "Please enter how many answers for the poll!"
        },
        submitHandler: function(form) {
            var userID = $("input#userID").val();
            var question = $("input#question").val();
            var dateExpires = $("input#dateExpires").val();
            var statusID = $("select#statusID").val();
            var numAnswers = $("select#numAnswers").val();
            var dataString = 'userID=' + userID + '&question=' + question + '&dateExpires=' + dateExpires + '&statusID=' + statusID + '&numAnswers=' + numAnswers + '&submitPoll=True';
            $.ajax({
                type: "POST",
                url: "processes/polls.php",
                data: dataString,
                success: function(myNewVar) { 
                    if (myNewVar == 'good') {
                        $('div.message-error').hide();
                        $("div.message-success").html("<h6>Operation successful</h6><p>" + question + " was saved successfully.</p>");
                        $("div.message-success").show().delay(10000).hide("slow");
                        $(':input','#pollForm')
                        .not(':submit, :hidden')
                        .val('');   
                    } else {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + question + " already exists in the database.</p>");
                        $("div.message-error").show();    
                    }
                }
            });
            return false;    
         }
    });
});

[Xtremer360]

Here's the complete code for that js page and I'm still getting an error and not sure why.

 

$(document).ready(function() {
    $('div.message-error').hide();
    $('div.message-success').hide();
   
    $("#dateExpires").datepicker({
        showOn: "button",
        buttonImage: "img/calendar.gif",
        buttonImageOnly: true
    });
   
    $('#numAnswers').change(function() {
        var numAnswers = $("select#numAnswers").val();
        var answerCount = $("fieldset.answerLeg div").size();
        var numDiff = numAnswers - answerCount;
        
        if (numAnswers > answerCount) {
            for ( var answerNum = 0; answerNum < numDiff; answerNum++) {
                var answerLabel = answerNum + answerCount + 1;
                $('<div class="field required answers"><label for="answer'+ answerLabel  +'">Answer #'+ answerLabel +'</label><input type="text" class="text" name="answer'+ answerLabel +'" id="answer'+ answerLabel +'" title="Answer '+ answerLabel +'"/><span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span></div>').appendTo('.answerLeg');   
            }
        }else {
            $('.answers').slice(-numDiff).remove();
        }
       
    });
   
    $("#pollForm").validate({
        $("fieldset.answerLeg div.answers input.text").rules('add', {
            required: true,
            messages: {
                required: "Please enter an answer for the poll!"
            }
        });
        rules: {
            question: {
                required: true
            },
            dateExpires: {
                required: true
            },
            statusID: {
                required: true
            },
            numAnswers: {
                required: true
            }
        },
        messages: {
            question: "Please enter a question for the poll!",
            dateExpires: "Please enter the date the poll expires!",
            statusID: "Please enter the poll's status!",
            numAnswers: "Please enter how many answers for the poll!"
        },
        submitHandler: function(form) {
            var userID = $("input#userID").val();
            var question = $("input#question").val();
            var dateExpires = $("input#dateExpires").val();
            var statusID = $("select#statusID").val();
            var numAnswers = $("select#numAnswers").val();
            var dataString = 'userID=' + userID + '&question=' + question + '&dateExpires=' + dateExpires + '&statusID=' + statusID + '&numAnswers=' + numAnswers + '&submitPoll=True';
            $.ajax({
                type: "POST",
                url: "processes/polls.php",
                data: dataString,
                success: function(myNewVar) {
                    if (myNewVar == 'good') {
                        $('div.message-error').hide();
                        $("div.message-success").html("<h6>Operation successful</h6><p>" + question + " was saved successfully.</p>");
                        $("div.message-success").show().delay(10000).hide("slow");
                        $(':input','#pollForm')
                        .not(':submit, :hidden')
                        .val('');  
                    } else {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + question + " already exists in the database.</p>");
                        $("div.message-error").show();   
                    }
                }
            });
            return false;   
         }
    });
});

[Zane]

I'm still getting an error and not sure why.

What error? That's a lot of code to analyze without knowing the particular error.

[Xtremer360]

I put this code into jshint.com and got these errrors:

 

The code check failed.

Errors:

    *

 

      Line 28 $("fieldset.answerLeg div.answers input.text").rules('add', {

 

      Expected ':' and instead saw '('.

    *

 

      Line 28 $("fieldset.answerLeg div.answers input.text").rules('add', {

 

      Expected '}' to match '{' from line 27 and instead saw ')'.

    *

 

      Line 33 });

 

      Expected ')' and instead saw ';'.

    *

 

      Line 33 });

 

      Missing semicolon.

    *

 

      Line 34 rules: {

 

      Label 'rules' on { statement.

    *

 

      Line 34 rules: {

 

      Expected to see a statement and instead saw a block.

    *

 

      Line 34

 

      Stopping, unable to continue. (40% scanned).

EDIT: there are such things as quote tags.

 

[Zane]

I'm not dissing the integrity of jshint or jslint, but that's not exactly the best practice of getting your error messages.  Both sites are merely a community driven error message maker according to their standards (which are probably pretty informative; you should probably just read them and fix what it says).  In other words, it's all biased opinions on the best way to correct an error, without actually being told an actual BROWSER error, which is the most important piece of information you need to get a solution.

 

If you have Firefox, install Firebug so you can see the actual Javascript error.  Most of the time that ability is built into the browser, but I've become so used to Firebug I forgot where it is. 

 

Well, there is another way. 

I believe you can type

javascript:

into the address bar in IE... but I'm not certain right now.. (too lazy to check)

[Xtremer360]

The only issue with this code is that it only validates for the first input box.

 

$('#numAnswers').change(function() {
        var numAnswers = $("select#numAnswers").val();
        var answerCount = $("fieldset.answerLeg div").size();
         
        if (numAnswers > answerCount) {
            var numDiff = numAnswers - answerCount;
            for ( var answerNum = 0; answerNum < numDiff; answerNum++) {
                var answerLabel = answerNum + answerCount + 1
                $('<div class="field required answers"><label for="answer'+ answerLabel  +'">Answer #'+ answerLabel +'</label><input type="text" class="text" name="answer'+ answerLabel +'" id="answer'+ answerLabel +'" title="Answer '+ answerLabel +'"/><span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span></div>').appendTo('.answerLeg');    
                
                $("fieldset.answerLeg div.answers input.text").rules('add', {
                    required: true,
                    messages: {
                        required: "Please enter an answer for the poll!"
                    }
                });                    
            }
        }else {
            var numDiff = answerCount - numAnswers;
            $('.answers').slice(-numDiff).remove();
        }
        
    });

[Xtremer360]

Works.

 

$('#numAnswers').change(function() {
        var numAnswers = $("select#numAnswers").val();
        var answerCount = $("fieldset.answerLeg div").size();
         
        if (numAnswers > answerCount) {
            var numDiff = numAnswers - answerCount;
            for ( var answerNum = 0; answerNum < numDiff; answerNum++) {
                var answerLabel = answerNum + answerCount + 1
                $('<div class="field required answers"><label for="answer'+ answerLabel  +'">Answer #'+ answerLabel +'</label><input type="text" class="text" name="answer'+ answerLabel +'" id="answer'+ answerLabel +'" title="Answer '+ answerLabel +'"/><span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span></div>').appendTo('.answerLeg');    
                
                $("#answer"+answerLabel).rules('add', {
                    required: true,
                    messages: {
                        required: "Please enter an answer for the poll!"
                    }
                });                    
            }
        }else {
            var numDiff = answerCount - numAnswers;
            $('.answers').slice(-numDiff).remove();
        }
        
    });