Проверка формы Javascript не работает
Я пишу скрипт проверки формы в JavaScript. Когда форма отправлена, я хочу, чтобы она была проверена перед переходом на следующую страницу.
Эта страница вызывается с другой страницы с использованием Perl Interchange. Проверка выполняется для трех полей в форме.
Обновление: вот полный код:
<FORM ACTION="[process]" name="outofstock_form" METHOD=POST onsubmit="return validate_outofstockform();" >
<INPUT TYPE=hidden NAME="mv_todo" VALUE="return">
<INPUT TYPE=hidden NAME="mv_nextpage" VALUE="outofstock_wish_submit">
<INPUT TYPE=hidden VALUE="[perl scratch session]$which_search;[/perl]" NAME="search_key">
<script type=javascript>
function validate_outofstockform() {
var m = document.forms["outofstock_form"]["email"].value
var e = document.outofstock_form.email.value
var f = document.forms["outofstock_form"]["name"].value
var p = documnet.forms["outofstock_form"]["wish_product"].value
var atpos = e.indexOf("@");
var dotpos = e.lastIndexOf(".");
if (document.outofstock_form.email.value == "") {
alert("The Email field is required.");
return false;
}
if (document.outofstock_form.name.value == "") {
alert("The Name field is required.");
return false;
}
if (document.outofstock_form.wish_product.value == "") {
alert("The Product field is required.");
return false;
}
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= e.length) {
alert("Please enter a valid e-mail address");
return false;
}
if (f == null || f == "" || f == "First Name") {
alert("Please enter your first name");
return false;
}
if (p == null || p == "" || p == "Product") {
alert("Please enter your first name");
return false;
}
return false;
}
</script>
<br/>
*Fields in bold are required.<br/>
<table cellpadding="1" cellspacing="5" width="360px" border="0">
<tr>
<td><b>Name:</b></td>
<td>
<input type="text" id="name" name="name" size="40">
</td>
</tr>
<tr>
<td><b>E-mail:</b></td>
<td>
<input type="text" id="email" name="email" size="40">
</td>
</tr>
<tr>
<td>Phone:</td>
<td>
<input type="text" name="phone" size="40">
</td>
</tr>
<tr>
<td> State/ Province:</td>
<td>[include pages/ord/widget_state.html]</td>
</tr>
<tr>
<td > Zip/Postal Code:</td>
<td><INPUT TYPE="text" NAME="zip" VALUE="" size="40" maxlength="10"></td>
</tr>
<br/>
<tr>
<td valign="bottom">Country:</td>
<td>[include pages/ord/widget_country_s.html]</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Salesperson:</td>
<td align=left colspan=2>
<SELECT NAME="salesrep" class="field">
<OPTION VALUE="WEB">(Optional)
[query list=1 prefix=s sql="SELECT id AS username, real_name AS disp_name, everest_id AS int_id FROM employee WHERE sales_ddown = 'Y' AND everest_id != '' ORDER BY real_name"]
<OPTION VALUE="[s-param int_id]"[calc]'[value salesrep]' eq '[s-param int_id]' ? 'selected' : '';[/calc]>[s-param disp_name]
[/query]
</SELECT>
</td>
<INPUT TYPE=hidden NAME="salesperson" VALUE="[s-param username]">
[perl values scratch]
$Scratch->{salesperson} = q{[s-param username]};
[perl]
<tr>
<td colspan="2">
Provide us with the product you are looking for, or the brand and product type
of interest and we will inform you if we find a match.
</td>
<td></td>
</tr>
<tr>
<td><b>Product:</b></td>
<td>
<input type="text" id="wish_product" name="wish_product" size="40" value="">
</td>
</tr>
<tr>
<td>Item Description:</td>
<td>
<textarea name="wish_descrip" rows="2" cols="40"></textarea>
</td>
</tr>
<tr>
<tr>
<td>Brand/Manufacturer Preference:</td>
<td><input type="text" name="wish_man" size="40"></td>
</tr>
<tr>
<td>Product Category :</td>
<td>
<select name="wish_cat">
<option value="" selected>Any Category</option>
[include pages/CATLIST.html]
</select>
</td>
</tr>
<tr>
<td>Is this for a business?:</td>
<td>
<input type="radio" name="option" value="Yes"> Yes
<input type="radio" name="option" value="No"> No<br>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"><font size="0px">
We do not sell, rent or otherwise share your information with anyone.<br/>
</font>
</td>
<td></td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="Submit" value="Submit" class="button">
</td>
</tr>
</table>
</form>
3 ответа
Сделайте ваш JavaScript действительным (удалите деталь несколькими черточками) и верните его false чтобы избежать отправки формы.
Вы отладили свой код?
Используйте такие инструменты, как Firebug для отладки ваших скриптов. Поместите точку останова в первую строку вашей функции проверки, а затем отладьте ее шаг за шагом. Вы в конечном итоге доберетесь до линии, которая вызывает ваши проблемы.
Предложение о том, как улучшить ваш валидатор
Но кроме отладки я бы сделал проверку по-другому. Вместо того, чтобы проверять каждый аспект отдельных полей, я бы просто добавил пользовательский атрибут к тем входным данным, которые требуют проверки, и просто проверил, совпадают ли они или нет. Если что-то не получается, сообщите вашему пользователю о недопустимом поле...
<input name="SomeName"
validation-expression=".+"
display-name="Required text field"
type="text" />
Использование таких библиотек, как jQuery, было бы еще более полезным при работе с такими данными, потому что было бы намного проще перечислять эти элементы и работать с их данными... Я, конечно, горячо рекомендую вам в любом случае использовать jQuery, потому что это сделает ваш код намного более удобным. кросс-браузер. Это простая библиотека с короткой кривой обучения, но огромными преимуществами.
Но использование этих специальных атрибутов сделает вашу функцию валидатора универсальной, чтобы ее можно было использовать с любым элементом и на любой странице. Все, что вам нужно сделать, это добавить определенные атрибуты проверки к вашим элементам.
Просто предложение конечно.
Трудно сказать, что именно является причиной проблемы, потому что в вашем коде есть несколько ошибок.
Пара указателей:
- Вы ссылаетесь
document.outofstock_formимя формыfrm, <//code table>недопустимый HTML. Удалите его или замените HTML-комментарием (например:<!-- table code: -->).- Для проверки правильности ввода формы чаще используется регулярное выражение (поиск здесь на SO).
- Если вы отправляете входные данные на сервер, также выполните проверку на сервере. Никогда не доверяйте вводу из браузера.
- Вы никогда не открываете
<tr>(предположительно ошибка копирования-вставки).
И наконец, но самое главное:
- Всегда сначала смотрите на консоль ошибок JavaScript вашего браузера. Это должно быть отправной точкой при отладке кода JavaScript. Это может помочь вам найти проблему, а если нет, то может помочь другим помочь вам.
- Прочитайте, как спросить.