Question

I have a program that I am creating that creates task inputs dynamically. My issue is that I am trying to create some validation on the form submission to check for anything that might be wrong.

I am running into an issue with looping through the classes. I think the main issue is the “if” validation.

Here is the code that I have right now:

function(){
//some validation for the tasks....Loop through page create an instance of the message. 
var numOfTaskName = $('.taskNameInput').length
alert(numOfTaskName);
var i=0;
while (i<=numOfTaskName)
{

        if($(".taskNameInput").val()=="Task Name" || $(".taskNameInput").val().length <1) 
        {
            $("#message").html("<div class='errors'>At least one task is required. This error will show if you have not entered at least one task or you have an extra task that is not needed on the task tab. Please add a task or delete the extra task.</div>");

            i++;
            return false;

        } i++;
} 

EDIT: Oh by the way this validation actually works for the first class. But not for any other dynamically created tasks(classes).

ANOTHER EDIT

Alright…the issue that I am having is nesting this loop in my submit function. Please see below for my submit function. On submit I need to validate all the “taskNameInput” classes.

$("form").submit(
function(){
        $.blockUI({ message: 'Processing...please wait.',

    css: { 
        border: 'none', 
        padding: '15px', 
        backgroundColor: '#000', 
        'border-radius': '10px',
        '-webkit-border-radius': '10px', 
        '-moz-border-radius': '10px', 
        opacity: .5, 
        color: '#fff' 
        }});

        $.post("projectSetupCB.php", 
        $("#newProject").serialize(), 

        function(list){
        $("#message").removeClass().html(list);
        $("html,body").animate({scrollTop:0},'slow');
        $.unblockUI()

        });


return false; 
 });

Answer 1

When you use $(".taskNameInput") in your loop, you’re getting the same first object every time. You should probably use .each() to iterate all the items in $(".taskNameInput") and return false from the each function when you want to stop the iteration.

function(){
$('.taskNameInput').each(function() {
    var o = $(this);
    if (o.val() == "Task Name" || o.val().length < 1) {
        $("#message").html("<div class='errors'>At least one task is required. This error will show if you have not entered at least one task or you have an extra task that is not needed on the task tab. Please add a task or delete the extra task.</div>");
        return(false);   // break out of .each() loop
    }
});

To use this in your submit function, you probably want to first make it a local function in the submit function that you can call. Then, in your submit function, you can call it and act on it’s return value:

$("form").submit(function() {

   // declare local function for validation
   function validateInputs() {
       var ok = true;
       $('.taskNameInput').each(function() {
           var o = $(this);
           if (o.val() == "Task Name" || o.val().length < 1) {
               $("#message").html("<div class='errors'>At least one task is required. This error will show if you have not entered at least one task or you have an extra task that is not needed on the task tab. Please add a task or delete the extra task.</div>");
               ok = false;      // set return flag
               return(false);   // break out of .each() loop
           }
       });
       return(ok);
   }

   // block the UI
   $.blockUI({ 
        message: 'Processing...please wait.',
        css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            'border-radius': '10px',
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff' 
        }
    });

    // now validate the input and return false if it doesn't validate
    if (!validateInputs()) {
        $.unblockUI();
        return(false);
    }

    // send our form data
    $.post("projectSetupCB.php", 
        $("#newProject").serialize(), 
        function(list) {
            $("#message").removeClass().html(list);
            $("html,body").animate({scrollTop:0},'slow');
            $.unblockUI();
        }
    );

    return(false);     // we already posted, don't let the form post itself
 });