jquery validate плагин - проверка формы со значениями из отдельной таблицы

Question

Я использую плагин jquery validate для проверки всех полей в моей форме, без проблем.

Однако мне нужно проверить форму по количеству строк в HTML-таблице, расположенной вне разметки формы.

Вот элементы, о которых идет речь:

1. form: id = "roadForm"
2. выбор ввода: id = "editRoad_ProjectClassification"
3. table: id = "dataExistingSegments"

Мое бизнес-правило выглядит примерно так:

1. Если значение select «editRoad_ProjectClassification» равно «NO TREATMENTS», то число строк в таблице «dataExistingSegments» должно быть равно нулю.
2. Если значение select «editRoad_ProjectClassification» не равно «NO TREATMENTS», то число строк в таблице «dataExistingSegments» должно быть больше нуля.

Я создал два пользовательских правила для валидатора следующим образом:

1. Чтобы убедиться, что в таблице нет строк, если "editRoad_ProjectClassification" равно "NO TREATMENTS".

   g$.validator.addMethod("roadWithNoTreatmentsHasNoSegments", function (value, element, params) {
   var pc = g$('#editRoad_ProjectClassification').val();
   var segmentCount = g$('#dataExistingSegments tbody tr').length;
   
   if (pc == 'NO TREATMENTS' && segmentCount > 0) {
       return this.optional(element) || false;
   }
   else {
       return this.optional(element) || true;
   }
   }, g$.format("Must have no segments if Project Classification is 'NO TREATMENTS'")
   );
   

2. Чтобы убедиться, что в таблице есть хотя бы одна строка, если «editRoad_ProjectClassification» не равно «NO TREATMENTS»

   g$.validator.addMethod("roadWithTreatmentsHasAtLeastOneSegment", function (value, element, params) {
   var pc = g$('#editRoad_ProjectClassification').val();
   var segmentCount = g$('#dataExistingSegments tbody tr').length;
   
   if (pc != 'NO TREATMENTS' && pc != '' && segmentCount == 0) {
       return this.optional(element) || false;
   }
   else {
       return this.optional(element) || true;
   }
   }, g$.format("Must have at least one segment if Project Classification is not 'NO TREATMENTS'")
   );
   

3. Затем для проверки формы у меня есть следующее:

   g$("#roadForm").validate({
   errorElement: "span",
   rules: {
       editRoad_Jurisdiction: "required",
       editRoad_TreatmentDate: {
           "required": true,
           date: true,
           roadDateIsValidForMultiYearPlan: true
       },
       editRoad_ProjectClassification: "required",
       editRoad_ImprovementType: "required",
       editRoad_SurfaceType: "required",
       editRoad_MultiYear: "required",
       editRoad_LifeExpectancy: {
           "required": true,
           digits: true
       },
       editRoad_MDOTJobID: {
           digits: true
       },
       editRoad_ProjectID: {
           maxlength: 50
       },
       dataExistingSegments: {
           "required": true,
           roadWithTreatmentsHasAtLeastOneSegment: true,
           roadWithNoTreatmentsHasNoSegments: true
       }
   },
   messages: {
       editRoad_Jurisdiction: "Please select an option",
       editRoad_TreatmentDate: {
           required: "Please select an date",
           date: "Please enter a properly formatted date"
       },
       editRoad_ProjectClassification: "Please select an option",
       editRoad_ImprovementType: "Please select an option",
       editRoad_SurfaceType: "Please select an option",
       editRoad_MultiYear: "Please select an option",
       editRoad_LifeExpectancy: {
           required: "Please enter a value",
           digits: "Must be a valid number"
       },
       editRoad_MDOTJobID: {
           digits: "Must be a valid number"
       },
       editRoad_ProjectID: {
           maxlength: "Cannot be more than 50 characters long"
       }
   }
   });
   

Это не работает, и я предполагаю, что это потому, что таблица "dataExistingSegments" не находится внутри формы. Но из-за способа разметки и CSS я не могу поместить эту таблицу в форму. Как я могу заставить это работать?

Answer 1

Ну, я понял это и подумал, что должен написать здесь для всех, кому, возможно, потребуется это сделать.

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

Затем я назначил правила проверки для этого ввода, а не для таблицы.И теперь проверка работает, и сообщение об ошибке отображается правильно.

Еще одна вещь, которую я экспериментировал с сокрытием ввода.Я надеялся, что ввод будет скрыт, но сообщение проверки все равно будет отображаться.Но, очевидно, плагин проверки jquery не применяет проверку к каким-либо скрытым полям в форме.Так что это не сработало.Ввод должен был быть видимым, поэтому я сделал его похожим на метку и отключил его (чтобы он работал как метка).

Answer 2

Есть способ применить проверки для скрытых полей в плагине проверки jquery.

Вам нужно только поставить, игнорировать: [] или вы можете определить элементы управления, которые вы не хотите проверять