Проверка табличной формы без отправки - PullRequest
Новая
       3

Проверка табличной формы без отправки

1 голос
/ 14 ноября 2011

В APEX 3.2 я хочу иметь возможность запускать проверки JavaScript для проверки введенных данных и отображения соответствующего сообщения над каждой строкой в ​​табличной форме.

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

Оцените любые идеи или предложения.

Спасибо.

1 Ответ

1 голос
/ 14 ноября 2011

Хорошо, некоторые проверки javascript в табличных формах немного сложны, и вам нужно знать, что вы делаете.

Прежде всего, вам нужно знать идентификаторы или имена элементов, которые вы хотите проверить.Как вы, возможно, знаете, элементы в табличных формах хранятся в массивах в apex при отправке и доступны через apex_application.g_f01/g_f02/... Это отражено в HTML-коде, и сгенерированные элементы также имеют атрибут name, установленный в столбце, к которому они принадлежат.к.Идентификатор также содержит столбец плюс индекс строки.Однако, предупреждение, этот идентификатор генерируется только так, когда элемент создается «неявно», то есть вы не написали свой запрос с помощью вызовов apex_item (apex_item.textbox(...)).

Другое, но это только те поля, для которыхсостояние сохранено, будет определен столбец массива.Элемент, который будет отображаться только как «только для отображения», не будет генерироваться с тегом ввода и будет просто храниться в виде текста в теге td.

Все, когда вы это знаете,Следующие шаги должны быть достаточно простыми.Посмотрите на исходный код страницы и запишите элементы, на которые вы хотите ориентироваться.Например, я выбрал поле вакансии. 

<tr class="highlight-row">
<td headers="CHECK$01" class="data"><label for="f01_0003" class="hideMeButHearMe">Select Row</label><input type="checkbox" name="f01" value="3" class="row-selector" id="f01_0003" /></td>
<td headers="EMPNO_DISPLAY" class="data">7782</td>
<td headers="ENAME" class="data"><label for="f03_0003" class="hideMeButHearMe">Ename</label><input type="text" name="f03" size="12" maxlength="2000" value="CLARK"  id="f03_0003" /></td>
<td headers="JOB" class="data"><label for="f04_0003" class="hideMeButHearMe">Job</label><input type="text" name="f04" size="12" maxlength="2000" value="MANAGER"  id="f04_0003" /></td>
<td headers="HIREDATE" class="data"><label for="f05_0003" class="hideMeButHearMe">Hiredate</label><span style="white-space: nowrap;"><input type="text"  id="f05_0003" name="f05" maxlength="2000" size="12" value="09-JUN-81" autocomplete="off"></span></td>
<td headers="SAL" class="data">
   <label for="f06_0003" class="hideMeButHearMe">Sal</label><input type="text" name="f06" size="16" maxlength="2000" value="2450"  id="f06_0003" />
   <input type="hidden" name="f02" value="7782"  id="f02_0003" />
   <input type="hidden" id="fcs_0003" name="fcs" value="19BD045E01D6BA148B4DEF9DDC8B21B7">
   <input type="hidden" id="frowid_0003" name="frowid" value="AAuDjIABFAAAACTAAC" />
   <input type="hidden" id="fcud_0003" name="fcud" value="U" />
</td>
</tr>

В разделе javascript на странице я добавил следующие 2 функции.

validate_job выполняет проверку только одного поля, элемента elJob.Проверка, которую я использовал, очень проста, вам нужно определить, насколько сложным она вам нужна.

Если вы хотите сослаться здесь на другие поля в той же строке, вы можете сделать несколько вещей: извлечь rowindexиз удостоверения личности, если у вас есть.Если он не содержит его, получите родительский TR, а затем используйте .children("input[name='f##'"), чтобы получить элемент ввода в той же строке.Или, если вам нужно значение элемента, который вообще не сохраняет состояние, вам нужно получить элемент TR, а затем найти TD, который содержит необходимый элемент, через атрибут headers, который содержит имя столбца. 

function validate_job(elJob){
   var sJob = $v(elJob).toUpperCase();
   $(elJob).val(sJob);

   //do your validations for the field job here
   if(sJob=="MANAGER"){
      $(elJob).css({"border-color":"red"});
      alert("invalid value!");
      //depends what you want to do now:
      //keep the focus on this element? Set a flag an error occured? Store the error?      
      return false;
   } else {
      $(elJob).css({"border-color":""});
      alert("value ok");                
        };
};

Вызовите bind_validations onload.Если вы разрешаете создавать строки, привяжите событие click к кнопке addrow и вызовите bind_validations. 

function bind_validations(){
   //f01 : row selector
   //f03 : ename
   //f04 : job
   //f05 : hiredate
   //f06 : sal

    //each input element with attribute name with value f04
   //blur event is when the user leaves the field, fe tab out, or even click apply changes
   //much like how when-validate-item behaved in forms
   $("input[name='f04']").blur(function(){validate_job(this);});
};

Просто правильное предупреждение.До сих пор я использовал проверки javascript в некоторых приложениях, но я знал, что они будут использоваться только небольшим количеством людей, а затем только внутренне.Это было только одно поле с некоторыми проверками.Я сделал перефокусировку курсора на поле, когда проверка не удалась, чтобы они не могли перейти к следующей записи и изменить это.Либо было указано правильное значение, либо они перезагрузили страницу или отменили действие.Настроив таким образом, они также не могут нажимать «Применить изменения», поскольку событие размытия также будет запускаться, проверяя поле.

Когда ваша аудитория становится больше, она становится немного более сомнительной: что я отключил JavaScript?Что если они найдут способ обойти?Wizzkids?

Мне все еще нравится немедленная обратная связь, но в более критической среде я бы также использовал проверки на стороне сервера.Для этого вам понадобится проверка типа «функция, возвращающая текст ошибки».Посмотрите эту страницу для примера или эту для некоторых полезных советов (по крайней мере, до 4.0!).Кроме того: apex 4.1 действительно значительно улучшает проверку табличных форм!;)

...