Валидация формы JavaScript работает только в Firefox
https://stackoverflow.com/questions/2931356
-
05-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я относительно новый 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;}
Я знаю, что это много кода, чтобы посмотреть, но любая помощь будет оценена. Поскольку он отлично работает в одном браузере, я не уверен, как начать отладку. Спасибо Эндрю
Решение
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 коллекция. То Дом Уровень 2 HTML Спецификация утверждает, что в коллекции должны присутствовать только «элементы управления формой», а Определение HTML4 Это, кажется, не включаетлейты, которые не имеют права контроля или значения.
Вы можете изменить свой код для использования getElementsByTagName вместо этого подобрать поля:
var fieldsets= form.getElementsByTagName('fieldset');
for (var i= 0; i<fieldsets.length; i++) {
var elem= fieldsets[i];
Другие советы
Я бы не использовал 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 есть проблемы, получая классы из некоторых элементов, которые имеют несколько классов, связанных с ними. Несмотря на это, это удобная функция.
Если у вас есть какая-либо ошибка JavaScript, функция не будет возвращать false, и поэтому поведение по умолчанию будет запущено данные.
Попробуйте запустить свой код через [http://www.javascriptlint.com/online_lint.php][1 Во-первых, затем отладчик.
Постарайтесь не использовать, если (ошибки> 0) ... просто в каждом состоянии (для неправильного ввода) поместите возврат false; и в конце до последнего кронштейна вернуть истину; И лучше использовать:
onSubmit="return validateRequired(this)"
И в этой строках нет необходимости (если вы удалите ошибки var)
var form = document.getElementById(id);
var errors = 0;
var returnVal = true;
Не причиной вашей проблемы, я уверен, но лучше не служить набору радиопередачи без одного из них.
В вашем конкретном случае, если вы знаете, что вы устанавливаете один, когда вы обслуживаете страницу, вам не нужен «обязательна» проверки; Там нет никакого способа, чтобы пользователь не мог получить радиопередачу в состояние, где никто не выбран. Выберите разумный по умолчанию, сделайте его первым вариантом и сделайте его выбранным. Упростите свою жизнь :)
Из W3C:
http://www.w3.org/tr/html401/interact/forms.html#radio.
Если переключатель в установленном наборе совместно используется одно и то же имя контроля, является первоначально «включенным», поведение агента пользователя для выбора какого элемента управления, первоначально «на» не определено. Примечание. Поскольку существующие реализации обрабатывают это дело по-разному, текущая спецификация отличается от 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.Поскольку поведение агента пользователя отличается, авторы должны обеспечить, чтобы в каждом наборе радиопередачи, которые один изначально «включен».
Вернуться к основам на секунду: вы говорите, что «кажется, игнорируют onsUbmit». Это оставляет три возможности, о которых я могу думать:
- Ваша функция никогда не вызывается
- Это называется и бомбается втулки благодаря ошибке
- Это называется, и не делает то, что вы думаете, всегда возвращается
Из вашего вопроса неясно, что это не ясно, поэтому, если бы я был тобой, я бы начну отладовать это, поместив предупреждение в начале функции, чтобы увидеть, то есть ли IE вызывает это вообще - затем переместить это предупреждение и снова запустить проверку и посмотрите, где он останавливается, появляется (любая ошибка должна быть выше этой точки).
Я также хотел бы предусматривать возвращаемую стоимость с места, которое его называли, чтобы увидеть, что возвращалось. Если это всегда правда, то ваш код работает, но не делает то, что вы думаете, что это делает.
Оттуда вы, по крайней мере, более четким понимаете, что происходит, если не точный блок кода для изучения.
