Проверка формы с помощью jQuery Подтвердить плагин

Question

после долгого исследования в Интернете. Я собираюсь сдаться, допустим, вы - моя последняя надежда. Моя проблема: я использую форму расписания для своей компании. Эта форма динамична, потому что через день вы можете выполнять несколько действий. Поля (включены в PHP страницы) являются:

• день (текстовое поле)
• Часы (выпадающие)
• Notes (текстовое поле, где работник может писать заметки в течение дня)

Все перечисленные поля находятся в строке, заключенной в поле. В верхней части набора полей я надел кнопку, щелкнув по ней, я добавлю еще одну строку с данными, указанными ранее. Теперь, перед отправкой бакэнда, я хочу, конечно, поставить некоторые правила проверки которых является следующим:

• поле DAY должно быть требуется (это мой ключ в БД и я добавил плагин DatePicker)
• сумма часов весь день не может превышать 8 часов

Я пытался использовать Jquery Validate, но кажется, у меня есть две проблемы:

• Он не может справиться с каким-то массивы данных, идущих на e script php, который будет записывать в БД (например, представленные дни будут поступать в бэкэнд в массиве, я решил это, потому что количество дней, которое может быть записано, неизвестно до отправки)
• Он добавляет управляет только в первом ряду

Я попытался (как я читал в других сообщениях) добавить правила после создания новой строки, но в этом случае он работает с другими полями, только если я поставлю курсор внутри, я оставляю поле пустым, а затем я выхожу за пределы этого поля.

Прилагаю мой код, любая помощь будет оценена!

приветствия из Италии.

<script type="text/javascript"> 
$(document).ready(function() { 

    var i = 0; 

    //fadeout selected item and remove 
    $('.remove').live('click', function() { 
     $(this).parent().fadeOut(300, function(){ 
     $(this).empty(); 
     return false; 
     }); 
    }); 


    $('a#add').click(function() { 
     i++; 
     var options = '<p>Day <input type="text" id = "Day'+i+'" class = "Day" name="day[]"> </select> hours<select id = "hours'+i+'" class = "hours" name="hours[]"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option></select> Notes <input type="text" id="Note'+i+'" class = "Note" name="note[]"><a href="#" class="remove"><img src="images\\remove.png" height="20" width="20"></img></a></p>'; 
     $(options).fadeIn("slow").appendTo('#extender'); 


    }); 

    $('.Day').live('click', function() { 
    $(this).datepicker('destroy').datepicker({ 
     changeMonth: false, 
     changeYear: false, 
     stepMonths: false, 
     dateFormat: "dd-mm-yy", 
     showOn:'focus'}).focus(); 
    }); 

}); 
</script> 

это где динамические поля добавляются

<form name="rec_abs" method="post" action = "rec_on_db.php"> 

<fieldset> 
<legend>Timesheet</legend> 
<div id="extender"></div> 
<p><a href="#" id="add"><img src="images\add.png" alt="" border=3 height=20 width=20></img></a> </p> 
</fieldset> 

</form> 
<input type="submit" value="Send your timesheet"></input><br> 

Answer 1

Что касается того, что ваши элементы только апробированные при изменении их, вы можете попробовать использовать onsubmit вариант плагина:

$("form[name='rec_abs']").validate({ 
    onsubmit:true 
}); 

Когда дело доходит до проверки нескольких полей, я бы предложил добавить правило класса к вашей проверке с помощью метода addClassRule.

Определить ваше правило следующим образом:

$.validator.addClassRules("my-day", { 
    required: true 
}); 

Затем добавьте my-day класс однодневных элементов.

Что касается суммы часов, посмотрите на метод addMethod. Он позволяет вам определять пользовательские правила проверки.Вот пример, который проверяет, является ли телефонный номер в формате +XXXXXX (X это число, + не является обязательным):

$.validator.addMethod("phone", function(value, element) { 
    // no phone number is a good phone number (the field is optional) 
     if (value.length == 0) { return true; } 
    // use a regexp to test the if the value is in the '+XXXXXX..' form 
     return /^\+?(\d){5}\d+/i.test(value); 
    }, 'Invalid phone number'); 

мне удалось получить мою проверку, чтобы работать на ajax загруженного содержимого перед тем, сохраняя при этом мой сценарий в отдельном файле с использованием правил классов и пользовательских методов.

Answer 2

Спасибо за ответ Sir Celsius. Теперь с первой модификацией, которую вы предложили, я могу подтвердить свою форму в submit. Между прочим, есть нечто большее. Я изменил код, генерирующий динамическую форму, следующим образом:

$('a#add').click(function() { 
     i++; 
     var options = ' .... html of the row as before ...'; 

    $(options).fadeIn("slow").appendTo('#extender'); 


    $('#Day'+i).rules('add', { 
     required: true, 
     messages: { 
     required: "" 
     } 
    }); 

    $('#Hours'+i).rules('add', { 
     required: true, 
     messages: { 
     required: "" 
     } 
    }); 


    }); 

С этими строками я добавляю правила в только что созданные части документа. Я поставил счетчик, чтобы каждая ячейка имела свой собственный идентификатор, имя класса остается тем же. Для моей цели я должен помещать данные в массивы, каждый тип данных имеет свой собственный вектор. Вот проблема. Если все поля имеют разные идентификаторы (ОК для HTML), тот же класс (ОК для HTML), НО ТОГО ИМЯ (ОК для HTML, но не для проверки JQuery), проверка выполняется только в первой строке! Для достижения цели я сделал модификацию query.validate.js положить этот код:

checkForm: function() { 
    this.prepareForm(); 
    for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) { 
     if (this.findByName(elements[i].name).length != undefined && this.findByName(elements[i].name).length > 1) { 
     for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) { 
      this.check(this.findByName(elements[i].name)[cnt]); 
     } 
     } else { 
     this.check(elements[i]); 
     } 
    } 
    return this.valid(); 
    } 

заменяющей «стандартной» форму

checkForm: function() { 
this.prepareForm(); 
for (var i = 0, elements = (this.currentElements = this.elements()); elements[ i ]; i++)  {  
this.check(elements[ i ]); 
} 
return this.valid(); 
} 

как было предложено на ссылке Jquery Validation validate form-array. Теперь валидация работает отлично. Я буду работать во второй части проверки (сумма часов), и я дам вам знать! Большое вам спасибо на данный момент!