Доброго времени суток!
Целый день бьюсь и не могу понять - почему для двух разных форм ВСЕГДА вызывается только один обработчик??!! Подскажите, в чем ошибка???
<!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>
