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

编辑:哦，顺便说一句，这个验证实际上适用于头等舱。但不适用于任何其他动态创建的任务(类)。

另一个编辑

好吧...我遇到的问题是将这个循环嵌套在我的提交函数中。请参阅下面的我的提交功能。提交时，我需要验证所有“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") 中的所有项目，并在您想停止迭代时从每个函数返回 false。

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