有一个表格，如果你在这个字段下面的字段中输入错误，就会弹出错误或信息消息。
使用者： jQuery的和通知
所有这些都正常工作最高版本为 jquery 3.2.1（含）。
使用最新的 2 个版本jquery-3.3.1 和 3.4.0，消息不是在表单字段下方弹出，而是在屏幕的左上角弹出。
帮我修复它！
但是 jquery 的工作版本是 3.2.1。注释掉了与 jquery 最新版本的连接。
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Базовый шаблон</title>
<meta name="description" content="">
<style>
body {
background-color:rgb(0, 0, 0);
}
form {
display:block;
width:450px;
height:auto;
margin:50px auto;
padding:10px;
border-radius:15px;
background-color:rgb(84, 84, 84);
font-size:16px;
font-family:'Arial';
color:rgb(255, 255, 255)
}
table {
margin:0 auto;
}
table td {
vertical-align: top;
}
table td.lbl {
padding-top:12px;
}
#title {
display:block;
margin:0;
padding: 20px;
text-align:center;
font-size:20px;
color:rgb(0, 184, 246);
}
.textbox {
width:200px;
height:auto;
margin-left:10px;
padding:10px;
border:none;
border-radius:10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
background-color:rgb(190, 190, 190);
font-size:16px;
color:rgb(63, 63, 63);
}
.errtextbox {
box-shadow: 0 0 10px rgb(255,0,0);
}
.help {
width:190px;
display:block;
margin-bottom:25px;
padding-left:25px;
font-size:12px;
color:rgb(140, 140, 140);
}
#info {
height:100px;
resize:none;
}
#send {
display:block;
margin:0 auto 10px;
padding:7px;
border:none;
border-radius:10px;
background-color:rgb(0, 128, 174);
font-size:16px;
color:rgb(255, 255, 255);
}
</style>
</head>
<body>
<form action="/reg" method="POST" id="regForm">
<lable id="title">Запрос на регистрацию</lable>
<table>
<tboby>
<tr>
<td class="lbl">Имя:</td>
<td><input type="text" name="name" id="name" class="textbox"/>
</tr>
<tr>
<td></td>
<td><lable class="help">От 2 до 25 символов</lable></td>
</tr>
<tr>
<td class="lbl">E-mail:</td>
<td><input type="text" name="mail" id="mail" class="textbox"/>
</tr>
<tr>
<td></td>
<td><lable class="help">только @mail.com</lable></td>
</tr>
<tr>
<td class="lbl">Пароль:</td>
<td><input type="password" name="password1" id="password1" class="textbox"/>
</tr>
<tr>
<td></td>
<td><lable class="help">от 5 до 10 символов</lable></td>
</tr>
<tr>
<td class="lbl">Полтвердить:</td>
<td><input type="password" name="password2" id="password2" class="textbox"/>
</tr>
<tr>
<td></td>
<td><lable class="help">должен совпадать с паролем</lable></td>
</tr>
<tr>
<td class="lbl">Информация:</td>
<td><textarea maxlength="250" name="info" id="info" class="textbox"></textarea>
</tr>
<tr>
<td></td>
<td><lable class="help">в свободной форме, максисум 250 символов</lable></td>
</tr>
</tbody>
</table>
<input type="button" id="send" value="Отправить заявку"/>
</form>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/notifyjs/notifyjs/master/dist/notify.js"></script>
<script>
/* Изначально форма не заполнена и по этому считаем что все возможные ошибки есть */
/* Initially, the form is not filled out and therefore we believe that all possible errors are */
var errorNull = true, errorMail = true, errorPass = true;
/* Для удобства и уменьшения размера кода выносим функцию проверки поля на null в отдельную переменную */
/* For convenience and reduce the size of the code, we move the field check function to null into a separate variable */
var checkNull = function(){
$(this).val($(this).val().trim());
if ($(this).val() =="") {
/* Выводим сообщение об ошибке под элементом.
This в данном случае это элемент, который инициировал вызов функции */
/* Display an error message under the item.
"this" in this case is the element that initiated the function call */
$(this).notify("Поле нужно заполнить", "error");
$(this).addClass("errtextbox");
errorNull = true;
} else {
errorNull = false;
$(this).removeClass("errtextbox");
}
};
/* Проверяем значения полей Имя и Информация на null в момент когда они теряют фокус */
/* Check the values of the Name and Information fields to null when they lose focus */
$("#name").focusout(checkNull);
$("#info").focusout(checkNull);
/* Проверка поля Имя на соответствие длинны */
/* Checking the Name field for matching length */
$("#name").keyup(function(){
var value = $(this).val();
if (value.length > 24 || value.length < 2){
$(this).notify("От 2 до 25 символов", "info");
$(this).val(value.slice(0,24));
}
});
/* Проверяем корректность E-mail */
/* Check the correctness of the E-mail */
$("#mail").focusout(function(){
var value = $(this).val().trim();
/* Для этого используем регулярное выражение */
/* For this we use a regular expression */
if (value.search(/^[a-z0-9]{3,}@mail\.com$/i) != 0) {
$(this).notify("E-mail введён не корректно", "error");
$(this).addClass("errtextbox");
errorMail = true;
} else {
$(this).removeClass("errtextbox");
errorMail = false;
}
});
/* Проверяем длину пароля */
/* Check the password length */
$("#password1").focusout(function(){
var value = $(this).val();
if (value.length <= 4) {
$(this).notify("Минимум 5 символов", "error");
$(this).addClass("errtextbox");
errorPass = true;
} else {
if (value.length > 9) {
$(this).notify("Миксимум 10 символов", "error");
$(this).addClass("errtextbox");
errorPass = true;
} else {
errorPass = false;
$(this).removeClass("errtextbox");
}
}
});
/* Проверяем соответствие пароля и подтверждения */
/* We check the compliance of the password and confirmation */
$("#password2").focusout(function(){
var value = $(this).val();
if (value != $("#password1").val()) {
$(this).notify("Пароль не совпадает", "error");
$(this).addClass("errtextbox");
errorPass = true;
} else {
errorPass = false;
$(this).removeClass("errtextbox");
}
});
/* В результате клика по кнопке отправить если ошибок заполнения нет то форма отправляется иначе получаем сообщение об ошибке */
/* As a result of clicking on the send button, if there are no errors, then the form is sent, otherwise we get an error message */
$("#send").click(function(){
if (!(errorNull || errorMail || errorPass)) {
$("#regForm").submit();
} else {
$(this).notify("Форма пустая или заполнена не корректно", "error");
}
});
</script>
</body>
</html>