jquery while循环。寻找所有类

Question

我有一个程序，我正在创建，动态地创建任务输入。我的问题是，我试图在表单提交上创建一些验证来检查任何可能是错误的。

我遇到了一个问题，通过类循环。我认为主要问题是“如果”验证。

下面是代码，我现在所拥有的：

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++; 
} 

编辑：哦，这个验证实际工作的第一类一样。但不适用于任何其他动态创建的任务（类）。

ANOTHER编辑

...好吧，我有被嵌套这个循环中，我提交功能的问题。请参阅下面的提交函数。提交时，我需要验证所有的“taskNameInput”类。

$("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

当你在循环中使用$(".taskNameInput")，你每次都得到相同的第一个对象。你或许应该使用.each()遍历所有项目中$(".taskNameInput")并返回从每个功能时错误要停止迭代。

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

要在您提交功能，利用这一点，你可能想先让它在提交的功能，可以调用本地函数。然后，在你提交功能，你可以把它和它的返回值行为：

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

Answer 2

米奇，

首先，你为什么不使用jQuery的每一个通过的投入，它的清洁循环。

其次，你可能会使用jQuery选择错误的找到输入的值，如果你有使用类taskNameInput多个输入。它可能有助于发布你的html代码，所以我们可以看到你是如何构建你的类和ID。

$('.taskNameInput').each(function(){ 


    var $this = $(this); 

    if($this.val()=="Task Name" || $this.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>"); 
    } 

});