Я не гуру, но если вкратце:
- Глобальные переменные - зло, забудьте о них;
- Если err нет, то он должен быть undefined или null а не пустой строкой;
- НазванияПеременныхВЯваскр иптеПишутсяКамелкейсом
По поводу ХТМЛ в яваскрипте - не надо так. При ошибке вызывайте модальное окно с ошибкой, если очень хочется именно в яваскрипте - учите шаблонизаторы. В нынешнем виде засовывать ХТМЛ в строку - лишено всякого смысла
В чем ошибка я хз, либо я плохо смотрю, либо в этих кусочках ее просто не видно. На скорую руку накатал пример валидации, если надо поменять что -то доки к плагину смотрите здесь:
https://jqueryvalidation.org
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<title>JS Bin</title>
</head>
<body>
<form action"/post.php" class="ajaxSend">
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" name="email" data-title="Заполните поле" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Имя</label>
<input type="text" class="form-control" name="name" data-title="Заполните поле" placeholder="Имя">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<style>
form{
width:300px;
}
</style>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
//validation
$(document).ready(function(){
function validateElement(el){
el.validate({
rules:{//правила для полей
email:{
required:true,
},
name:{
required:true
}
},
messages:{//сообщения при ошибке, оставляем пустыми
name:{
required:'Поле обязательно для заполнения',
},
email:{
required:'Поле обязательно для заполнения',
email: 'Неверный формат заполнения почты'
}
},
submitHandler: function (form) {
var $form = $(form);
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: $form.serialize(),
})
.fail(function (response) {
//действия на fail отправки
}).success(function (response) {
//действия на success отправки
}).always(function(){
//действия в обоих случаях
});
return false;
}
})
}
$('.ajaxSend').each(function() {
validateElement($(this));
});
})
</script>
</body>
</html>
