Проверить форму обязательных полей на основе класса? - PullRequest
Новая
       3

Проверить форму обязательных полей на основе класса?

1 голос
/ 25 июля 2011

Что такое сценарий JavaScript, который при отправке получает все элементы формы с class="required" и, если они пустые, отображает окно с предупреждением «Вы должны заполнить то-то и то-то»?

Я думал о if - else, и в разделе if мы получили бы while, который проходит по всем элементам class=required, а else отправит форму.

Ответы [ 2 ]

4 голосов
/ 25 июля 2011

В интернете есть много библиотек JavaScript, которые делают именно это.

Попробуйте вот что:валидатор, потому что форма валидации-это-месиво /

Или попробуйте поиск Google для проверки формы JavaScript.

2 голосов
/ 25 июля 2011

Довольно просто зацикливаться на элементах формы и проверять, что у людей с определенным классом есть значение, которое соответствует определенным критериям: 

<form name="f0" onsubmit="return validate(this);">
  <input name="inp0" class="required" >
  <input name="inp2" class="required" >
  <input type="submit">
</form>

<script type="text/javascript">

var validate = (function() {
  var reClass = /(^|\s)required(\s|$)/;  // Field is required
  var reValue = /^\s*$/;                 // Match all whitespace

  return function (form) {
    var elements = form.elements;
    var el;

    for (var i=0, iLen=elements.length; i<iLen; i++) {
      el = elements[i];

      if (reClass.test(el.className) && reValue.test(el.value)) {
        // Required field has no value or only whitespace
        // Advise user to fix
        alert('please fix ' + el.name);
        return false;
      }
    }
  }
}());

</script>

Выше приведен только пример, чтобы показать стратегию.

Использование предупреждения менее чем оптимально, обычно область выделяется рядом с необходимыми полями, чтобы можно было писать сообщения об ошибках, чтобы направить внимание пользователя на недопустимые поля.Вы также можете установить все сообщения об ошибках за один раз, а затем возвратить, а не по одному за раз.

Редактировать - обновить несколько ошибок

У элемента, смежного с каждым элементом управления, нужно проверить с помощьюидентификатор, как у элемента, поэтому, если вход называется firstName , элемент ошибки может иметь идентификатор firstName-err .При обнаружении ошибки легко получить связанный элемент и поместить в него сообщение.

Чтобы сделать все сразу, используйте флаг, чтобы запомнить, есть ли какие-либо ошибки, скажите «isValid», который по умолчанию имеет значение true.Если вы обнаружите какие-либо ошибки, установите значение false.Затем верните его в конце.

Используя приведенный выше пример, HTML может выглядеть так: 

  <input name="firstName" class="required" >
  <span id="firstName-err" class="errMsg"></span>

Ошибки для firstName будут записаны в firstName-err .

В сценарии, если обнаружена ошибка: 

// At the top
var isValid = true;
var errEl;
... 

  // When entering the for loop
  el = elements[i];
  errEl = document.getElementById(el.name + '-err');

    // when error found
    isValid = false;
    if (errEl) errEl.innerHTML = '... error message ...';

    // else if error not found
    // remove message whether there is one or not
    if (errEl) errEl.innerHTML = '';

 ...

// At the end
return isValid;

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

...