With the jquery version older than 3.2.1, messages pop up not under the form field, but in the upper left...
Is there any word for a place full of confusion?
Time to Settle Down!
Why does it sometimes sound good to play a grace note as a lead in to a note in a melody?
How come Sam didn't become Lord of Horn Hill?
How to play a character with a disability or mental disorder without being offensive?
Amount of permutations on an NxNxN Rubik's Cube
Do wooden building fires get hotter than 600°C?
SF book about people trapped in a series of worlds they imagine
What initially awakened the Balrog?
How does light 'choose' between wave and particle behaviour?
Illegal assignment from sObject to Id
Is it possible for SQL statements to execute concurrently within a single session in SQL Server?
What is "gratricide"?
As a beginner, should I get a Squier Strat with a SSS config or a HSS?
Can a new player join a group only when a new campaign starts?
Find 108 by using 3,4,6
How do living politicians protect their readily obtainable signatures from misuse?
Why is it faster to reheat something than it is to cook it?
Is there a kind of relay only consumes power when switching?
Has negative voting ever been officially implemented in elections, or seriously proposed, or even studied?
What's the meaning of "fortified infraction restraint"?
Why do early math courses focus on the cross sections of a cone and not on other 3D objects?
How do I use the new nonlinear finite element in Mathematica 12 for this equation?
How does the math work when buying airline miles?
With the jquery version older than 3.2.1, messages pop up not under the form field, but in the upper left corner of the screen. How to fix?
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 00:00UTC (8:00pm US/Eastern)
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
There is a form, if you enter an error in the field below this field, an error or informational message pops up.
Used by:
jquery and notify
All this works correctly up to version 3.2.1 of jquery inclusive.
With the latest 2 versions of jquery - 3.3.1 and 3.4.0, messages pop up not under the form field, but in the upper left corner of the screen.
Help me fix it!
But the working form with jquery is 3.2.1. Commented out the connection to the latest versions of 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>
javascript jquery
asked 11 hours ago
ozoroozoro
61
New contributor
ozoro is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
1
There is a form, if you enter an error in the field below this field, an error or informational message pops up.
Used by:
jquery and notify
All this works correctly up to version 3.2.1 of jquery inclusive.
With the latest 2 versions of jquery - 3.3.1 and 3.4.0, messages pop up not under the form field, but in the upper left corner of the screen.
Help me fix it!
But the working form with jquery is 3.2.1. Commented out the connection to the latest versions of 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>
javascript jquery
asked 11 hours ago
ozoroozoro
61
New contributor
ozoro is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
1
1
1
There is a form, if you enter an error in the field below this field, an error or informational message pops up.
Used by:
jquery and notify
All this works correctly up to version 3.2.1 of jquery inclusive.
With the latest 2 versions of jquery - 3.3.1 and 3.4.0, messages pop up not under the form field, but in the upper left corner of the screen.
Help me fix it!
But the working form with jquery is 3.2.1. Commented out the connection to the latest versions of 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>
javascript jquery
asked 11 hours ago
ozoroozoro
61
New contributor
ozoro is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
There is a form, if you enter an error in the field below this field, an error or informational message pops up.
Used by:
jquery and notify
All this works correctly up to version 3.2.1 of jquery inclusive.
With the latest 2 versions of jquery - 3.3.1 and 3.4.0, messages pop up not under the form field, but in the upper left corner of the screen.
Help me fix it!
But the working form with jquery is 3.2.1. Commented out the connection to the latest versions of 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>
javascript jquery
javascript jquery
asked 11 hours ago
ozoroozoro
61
New contributor
ozoro is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 11 hours ago
ozoroozoro
61
New contributor
ozoro is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 10 hours ago
ozoro
asked 11 hours ago
ozoroozoro
61
New contributor
ozoro is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 11 hours ago
ozoroozoro
61
asked 11 hours ago
ozoroozoro
61
61
New contributor
ozoro is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
ozoro is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
ozoro is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "3"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
ozoro is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsuperuser.com%2fquestions%2f1427070%2fwith-the-jquery-version-older-than-3-2-1-messages-pop-up-not-under-the-form-fie%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
ozoro is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
ozoro is a new contributor. Be nice, and check out our Code of Conduct.
ozoro is a new contributor. Be nice, and check out our Code of Conduct.
ozoro is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Super User!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsuperuser.com%2fquestions%2f1427070%2fwith-the-jquery-version-older-than-3-2-1-messages-pop-up-not-under-the-form-fie%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
