Валидация формы
Здравствуйте. Подскажите, пожалуйста, что в данном случае я делаю не так. Строки кода, которые не работают, я выделил комментариями.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>form</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<form class="form1">
email: <input class="val__input_fname" type="text" name="email" value="email" /> <br />
<input type="submit" />
</form>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
$(document).ready(function() {
(function() {
var
form = $("form.form1"),
input__fname = $('input.val__input_fname');
function validate(elem, pattern) {
var res = elem.val().search(pattern);
if ( res == -1 ) {
elem.addClass("invalid", function() {
$(this).removeClass("valid");
});
}
else {
elem.addClass("valid", function() {
$(this).removeClass("invalid");
});
}
}
function nameOnChange() {
var pattern = /\b[a-z0-9._]+@[a-z0-9.-]+\.[a-z]{2,4}\b/i;
validate(input__fname, pattern);
}
input__fname.on('change', function() {
nameOnChange();
});
function onsubmiHandler() {
var invalid = false;
input__fname.trigger('change'); // не работает
if ( input__fname.hasClass('invalid') ) {
invalid = true;
}
if ( invalid ) {
alert("Допущены ошибки при заполнении формы.");
return false; // не работает
}
}
form.on('submit', function() {
onsubmiHandler();
});
})();
});