Валидация формы при помощи jquery
В этом уроке мы выполним практическую работу — валидацию формы с использованием jquery и twitter bootstrap (для красивого, понятного динамического ui). В качестве домашнего задания рекомендую вам провести валидацию формы другим способом. Например, реализовать «живую валидацию» — т.е скрипт будет проверять значение полей при вводе текста (см. метод keypress). Свои работы отправляйте на электронную почту — abzalov90@gmail.com
Код урока
<!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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var validName = false;
var validEmail = false;
$("form").submit(function(event){
event.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) {
$("form").unbind('submit').submit();
}
});
});
</script>
</body>
</html>
0 Комментариев