Есть задание - сделать валидацию форм (не менее двух), должно быть две кнопки - одна для обработки первой формы, вторая - для другой. Для начала решила попробовать сделать хотя бы для одной формы. Но, есть проблемы.
Если какое-либо из полей не заполнено или же не удовлетворяет условию - они должны подсветиться, и форма не отправится, но сейчас при нажатии на кнопку отправки сразу же происходит отправка формы, функция проверки не срабатывает и форма сразу же отправляется на сервер:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<form action="">
<div class="form-group has-feedback nameBlock">
<label class="control-label" for="name">Ваше имя</label>
<input type="text" class="form-control" id="name" aria-describedby="inputSuccess2Status">
</div>
<div class="form-group has-feedback emailBlock">
<label class="control-label" for="email">Ваш email</label>
<input type="email" class="form-control" id="email" aria-describedby="inputSuccess2Status">
</div>
<button class="btn btn-success btn-lg" type="submit">Отправить</button>
</form>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
var validName = false;
var validEmail = false;
var Send = function() {
Send.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
if (name == "") {
$("#name").parent().removeClass("has-success").addClass("has-error");
$(".nameBlock").append("<span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span>");
$(".nameBlock .glyphicon-ok").remove();
validName = false;
} else {
$("#name").parent().removeClass("has-error").addClass("has-success");
$(".nameBlock").append("<span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span>");
$(".nameBlock .glyphicon-remove").remove();
validName = true;
}
if (email == "") {
$("#email").parent().removeClass("has-success").addClass("has-error");
$(".emailBlock").append("<span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span>");
$(".emailBlock .glyphicon-ok").remove();
validEmail = false;
} else {
$("#email").parent().removeClass("has-error").addClass("has-success");
$(".emailBlock").append("<span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span>");
$(".emailBlock .glyphicon-remove").remove();
validEmail = true;
}
if (validName == true && validEmail == true) {
alert("ОК!")
$("form").unbind('submit').submit();
}
}
});
$("form").submit(function(Send) {
Send();
});
</script>
</body>
</html>
Какая здесь ошибка и почему функция не срабатывает? Можно ли в одной функции проверять сразу несколько форм (обязательное условие задания, обе формы должна обрабатывать одна функция!)?