Проверка формы Javascript работает только в Firefox - PullRequest
Новая
       42

Проверка формы Javascript работает только в Firefox

3 голосов
/ 28 мая 2010

Я относительно новичок в Javascript, поэтому я надеюсь, что это простая ошибка. Я строю общую функцию проверки формы, которая вызывается в onSubmit формы. Функция просматривает все дочерние элементы формы, ищет определенные классы и анализирует содержимое соответствующих полей. Если он находит что-то пропущенное или ошибочное, он отображает соответствующее сообщение об ошибке div и возвращает false, тем самым предотвращая отправку формы на страницу php.

Он хорошо работает в Firefox 3.6.3, но в любом другом браузере, который я тестировал (Safari 4.0.4, Chrome 4.1, IE8), он, похоже, игнорирует onSubmit и сразу переходит на страницу обработки php.

HTML-КОД: 

    <form name='myForm' id='myForm' action='process_form.php' method='post' onSubmit="return validateRequired('myForm')">

   <fieldset class="required radioset">
    <label for='selection1'>
     <input type='radio' name='selection' id='selection1' value='1'/>
     Option 1
    </label>
    <label for='selection2'>
     <input type='radio' name='selection' id='selection2' value='2'/>
     Option 2
    </label>
    <label for='selection3'>
     <input type='radio' name='selection' id='selection3' value='3'/>
     Option 3
    </label>
    <label for='selection4'>
     <input type='radio' name='selection' id='selection4' value='4'/>
     Option 4
    </label>
    <div class='errorBox' style='visibility:hidden'>
     Please make a selection
    </div>
   </fieldset>

   <fieldset class="required checkset">
    <label>
     Choice 1
     <input type='checkbox' name='choices' id='choice1' value='1'/>
    </label>
    <label>
     Choice 2
     <input type='checkbox' name='choices' id='choice2' value='2'/>
    </label>
    <label>
     Choice 3
     <input type='checkbox' name='choices' id='choice3' value='3'/>
    </label>
    <label>
     Choice 4
     <input type='checkbox' name='choices' id='choice4' value='4'/>
    </label>
    <div class='errorBox' style='visibility:hidden'>
     Please choose at least one
    </div>
   </fieldset>


   <fieldset class="required textfield" >
    <label for='textinput1'>
     Required Text:
     <input type='text' name='textinput1' id='textinput1' size='40'/>
    </label>
    <div class='errorBox' style='visibility:hidden'>
     Please enter some text
    </div>
   </fieldset>

   <fieldset class="required email textfield">
    <label for='email'>
     Required Email:
     <input type='text' name='email' id='email' size='40'/>
    </label>
    <div class='errorBox' style='visibility:hidden'>
     The email address you have entered is invalid
    </div>
   </fieldset>


   <div>
    <input type='submit' value='submit'>
    <input type='reset' value='reset'>
   </div>

  </form>

КОД JAVASCRIPT: 

    function validateRequired(id){

 var form = document.getElementById(id);
 var errors = 0;
 var returnVal = true;
 for(i = 0; i < form.elements.length; i++){
  var elem = form.elements[i];
  if(hasClass(elem,"required")){

   /*RADIO BUTTON or CHECK BOX SET*/
   if(hasClass(elem,"radioset") || hasClass(elem,"checkset")){
    var inputs = elem.getElementsByTagName("input");
    var check = false;
    for(j = 0; j < inputs.length; j++){
     if(inputs[j].checked){
      check = true;
     }
    }
    if(check == false){
     errors += 1;
     showError(elem);
    } else {
     hideError(elem);
    }
   }

   /*TEXT FIELD*/
   else if(hasClass(elem,"textfield")){
    var input = elem.getElementsByTagName("input");
    if(input[0].value == ""){
     errors += 1;
     showError(elem);
    } else {
     hideError(elem);

     /*EMAIL ADDRESS*/
     if(hasClass(elem,"email")){
      if(isValidEmail(input[0].value) == false){
       errors += 1;
       showError(elem);
      } else {
       hideError(elem);
      }
     }
    }
   }
  }
 }
 if(errors > 0){
  returnVal = false;
 } else {
  returnVal = true;
 }
 return returnVal;}

Я знаю, что это большой код, но любая помощь будет признательна. Так как он работает нормально в одном браузере, я не уверен, как начать отладку. Спасибо Andrew

Ответы [ 6 ]

1 голос
/ 28 мая 2010

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

var node_list = document.getElementsByTagName('input');
for (var i = 0; i < node_list.length; i++) {
    var node = node_list[i];

    if (node.getAttribute('type') == 'text') {
        // do something here with a <input type="text" .../>
        alert(node.value);
    }
}

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

1 голос
/ 28 мая 2010 
for(i = 0; i < form.elements.length; i++){
    var elem = form.elements[i];
    if(hasClass(elem,"required")){

Проблема в том, что ваши required и другие классы помещены в элемент <fieldset>.

Элементы набора полей включены в коллекцию form.elements для IE, Firefox и Opera, но не для браузеров WebKit (Chrome, Safari). Именно в этих браузерах ваша форма не работает для меня.

Всегда было странно, что <fieldset> был включен в коллекцию elements. Спецификация DOM Level 2 HTML гласит, что в коллекции должны присутствовать только «элементы управления формой», и согласно определению HTML4 , которое, по-видимому, не включает наборы полей, не имеющие имени элемента управления или значение.

Возможно, вы могли бы изменить свой код, чтобы вместо него использовать getElementsByTagName: 

var fieldsets= form.getElementsByTagName('fieldset');
for (var i= 0; i<fieldsets.length; i++) {
    var elem= fieldsets[i];
0 голосов
/ 28 мая 2010

Вернемся к основам на секунду: вы говорите, что "кажется, игнорирует отправку". Это оставляет три возможности, о которых я могу думать:

  1. Ваша функция никогда не вызывается
  2. Это называется, и бомбардировка на полпути из-за ошибки
  3. Это называется, и не делает то, что вы думаете, всегда возвращая истину

Из вашего вопроса не ясно, что это такое, поэтому на вашем месте я бы начал отлаживать это, поставив предупреждение в начале функции, чтобы увидеть, вызывает ли его вообще IE, - затем переместил бы это предупреждение и запустил снова проверьте и посмотрите, где оно перестает появляться (любая ошибка должна быть выше этой точки).

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

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

0 голосов
/ 28 мая 2010

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

В вашем конкретном случае, если вы знаете, что вы установили один, когда обслуживаете страницу, вам не нужна проверка "обязательно"; пользователь не может переключить переключатели в состояние, в котором ни одна из них не выбрана. Выберите разумное значение по умолчанию, сделайте его первым и выберите его. Упростите свою жизнь:)

Из W3C:

http://www.w3.org/TR/html401/interact/forms.html#radio

Если нет переключателя в наборе обмена то же имя элемента управления изначально "on", поведение пользовательского агента для выбора какой элемент управления изначально включен не определено. Заметка. Так как существующий реализации обрабатывают этот случай иначе, текущая спецификация отличается от RFC 1866 ([RFC1866] раздел 8.1.2.4), в котором говорится: 

At all times, exactly one of the radio 
buttons in a set is checked. If
none of the <INPUT> elements of a set
of radio buttons specifies `CHECKED',
then the user agent must check the
first radio button of the set
initially.

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

0 голосов
/ 28 мая 2010

стараться не использовать if (ошибки> 0) ... просто в каждом условии (для неправильного ввода) положить return false; и в конце перед последней поставленной скобкой верните true; и лучше использовать: 

onSubmit="return validateRequired(this)"

и в этих строках нет необходимости (если вы удалите ошибки var) 

 var form = document.getElementById(id);
 var errors = 0;
 var returnVal = true;
0 голосов
/ 28 мая 2010

Если у вас есть какая-либо ошибка JavaScript, функция не вернет false, и, следовательно, будет запущено поведение по умолчанию для отправки данных.

Попробуйте сначала запустить код через [http://www.javascriptlint.com/online_lint.php][1], а затем отладчик.

...