Некорректная обработка двух форм на странице
Доброго времени суток!
Целый день бьюсь и не могу понять - почему для двух разных форм ВСЕГДА вызывается только один обработчик??!! Подскажите, в чем ошибка??? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ru-RU" xmlns:og="http://ogp.me/ns#" itemscope itemtype="http://schema.org/Article"> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div> <!-- form 1 --> <form action="javascript: alert('call')" method="POST" id="call_form" name="form1"> <table> <tr><td style=" padding: 3px;">Name</td><td style=" padding: 3px;"><input name="fio" type="text"></td></tr> <tr><td style=" padding: 3px;">Phone<span style="color: red;">*</span></td><td style=" padding: 3px;"><input id="phoneMain" name="phone" type="text"></td></tr> <tr><td style=" padding: 3px;">E-mail<span style="color: red;">*</span></td><td style=" padding: 3px;"><input id="mailMain" name="leadmail" type="text"></td></tr> <tr><td style=" padding: 3px;"> </td><td style="padding: 3px;"><input class="inpb" type="submit" name="send" value="Send!"></td></tr> </table> </form> </div> <hr /> <!-- Form 2 --> <div> <form action="javascript: alert('hidden')" method="POST" id="hidden_form" name="form2"> <table> <tr><td style=" padding: 3px;">Name</td><td style=" padding: 3px;"><input name="fio" type="text"></td></tr> <tr><td style=" padding: 3px;">Phone<span style="color: red;">*</span></td><td style=" padding: 3px;"><input id="phoneHidden" name="phone" type="text"></td></tr> <tr><td style=" padding: 3px;">E-mail<span style="color: red;">*</span></td><td style=" padding: 3px;"><input id="mailHidden" name="leadmail" type="text"></td></tr> <tr><td style=" padding: 3px;"> </td><td style="padding: 3px;"><input class="inpb" type="submit" name="send" value="Send!"></td></tr> </table> </form> </div> <script type="text/javascript"> function isEmailValid(email) { return (/^([a-z0-9_\-]+\.)*[a-z0-9_\-]+@([a-z0-9][a-z0-9\-]*[a-z0-9]\.)+[a-z]{2,4}$/i).test(email); } // Always works this one $('#call_form').submit(function () { var email = $('#mailMain').val(); if (!isEmailValid(email)) { alert( 'NOT VALID: ' + email ); } else { alert('valid'); } }); $('#hidden_form').submit(function () { var email = $('#mailHidden').val(); if (!isEmailValid(email)) { alert( 'NOT VALID: ' + email ); } else { alert('valid'); } }); </script> </body> </html> |
У меня - разные (Проверил в ИЕ6-7, Опера FF и Хром
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ru-RU" xmlns:og="http://ogp.me/ns#" itemscope itemtype="http://schema.org/Article"> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div> <!-- form 1 --> <form action="javascript: alert('call')" method="POST" id="call_form" name="form1"> <table> <tr><td style=" padding: 3px;">Name</td><td style=" padding: 3px;"><input name="fio" type="text"></td></tr> <tr><td style=" padding: 3px;">Phone<span style="color: red;">*</span></td><td style=" padding: 3px;"><input id="phoneMain" name="phone" type="text"></td></tr> <tr><td style=" padding: 3px;">E-mail<span style="color: red;">*</span></td><td style=" padding: 3px;"><input id="mailMain" name="leadmail" type="text"></td></tr> <tr><td style=" padding: 3px;"> </td><td style="padding: 3px;"><input class="inpb" type="submit" name="send" value="Send!"></td></tr> </table> </form> </div> <hr /> <!-- Form 2 --> <div> <form action="javascript: alert('hidden')" method="POST" id="hidden_form" name="form2"> <table> <tr><td style=" padding: 3px;">Name</td><td style=" padding: 3px;"><input name="fio" type="text"></td></tr> <tr><td style=" padding: 3px;">Phone<span style="color: red;">*</span></td><td style=" padding: 3px;"><input id="phoneHidden" name="phone" type="text"></td></tr> <tr><td style=" padding: 3px;">E-mail<span style="color: red;">*</span></td><td style=" padding: 3px;"><input id="mailHidden" name="leadmail" type="text"></td></tr> <tr><td style=" padding: 3px;"> </td><td style="padding: 3px;"><input class="inpb" type="submit" name="send" value="Send!"></td></tr> </table> </form> </div> <script type="text/javascript"> function isEmailValid(email) { return (/^([a-z0-9_\-]+\.)*[a-z0-9_\-]+@([a-z0-9][a-z0-9\-]*[a-z0-9]\.)+[a-z]{2,4}$/i).test(email); } // Always works this one $('#call_form').submit(function () {alert('#call_form') var email = $('#mailMain').val(); if (!isEmailValid(email)) { alert( 'NOT VALID: ' + email ); } else { alert('valid'); } }); $('#hidden_form').submit(function () {alert('#hidden_form') var email = $('#mailHidden').val(); if (!isEmailValid(email)) { alert( 'NOT VALID: ' + email ); } else { alert('valid'); } }); </script> </body> </html> |
Цитата:
|
хром
|
и опера тоже глючит, а эксплорер нормально
|
bnr17,
Просите проверить приятелей с иных компутеров |
Разобрался, у меня в исходнике в одном из input-ов не было закрывающего уголка >. Только поправил все заработало. Спасибо за помощь!
|
Часовой пояс GMT +3, время: 06:11. |