JQuery пока цикл. Ищите все классы

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

Answer 2

Mitch,

Во-первых, почему вы не используете каждый Jquery для циклического прохождения входов, его очиститель.

Во-вторых, вы можете использовать селектор jquery неправильно, чтобы найти значениевход, если у вас есть несколько входов, которые используют класс taskNameInput.Это также может помочь опубликовать ваш HTML-код, чтобы мы могли видеть, как вы структурировали свои классы и идентификаторы.

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

});