Stack Overflow на русском Asked by Ashh on November 15, 2021
Основной код(html,js):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validation Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<h3> Заполните форму</h3>
<form id="form" action="#">
<div class="inputBox">
<input type="text" name="" id="email"
placeholder="[email protected]" required
onkeydown="validationEmail()">
<span id="text"></span>
<input type="tel" id="tel" placeholder="+79951122131" required
onkeydown="validationTel()">
<span id="text1"></span>
<input type="text" id="name" placeholder="Иванов Александр Александрович" required>
<input type="submit" id="submit" value="Отправить" />
</div>
</form>
</div>
<script type="text/javascript">
function validationEmail()
{
var form = document.getElementById("form");
var email = document.getElementById("email").value;
var text = document.getElementById("text");
var pattern = /^[^ ]+@[^ ]+.[a-z]{2,3}$/;
if (email.match(pattern))
{
form.classList.add("valid");
form.classList.remove("invalid");
text.innerHTML = "Ваша почта подходит.";
text.style.color = "#00ff00";
}
else
{
form.classList.remove("valid");
form.classList.add("invalid");
text.innerHTML = "Пожалуйста введите правильную почту";
text.style.color = "#ff0000";
}
if (email == "")
{
form.classList.remove("valid");
form.classList.remove("invalid");
text.innerHTML = "";
text.style.color = "#00ff00";
}
}
function validationTel()
{
var form = document.getElementById("form");
var tel = document.getElementById("tel").value;
var text = document.getElementById("text");
var pattern = "(?d{3})?[-.]? *d{3}[-.]? *[-.]?d{4}";
if (tel.match(pattern))
{
form.classList.add("valid");
form.classList.remove("invalid");
text.innerHTML = "Ваша почта подходит.";
text.style.color = "#00ff00";
}
else
{
form.classList.remove("valid");
form.classList.add("invalid");
text.innerHTML = "Пожалуйста введите правильную почту";
text.style.color = "#ff0000";
}
if (tel == "")
{
form.classList.remove("valid");
form.classList.remove("invalid");
text.innerHTML = "";
text.style.color = "#00ff00";
}
}
</script>
</body>
</html>
css:
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #373737;
}
h3
{
position: relative;
font-size: 20px;
color: #f9f9f9;
letter-spacing: 500;
margin-bottom: 5px;
}
#form
{
position: relative;
}
#form #email, #tel, #name
{
width: 300px;
background: #292929;
outline: none;
border: none;
padding: 10px;
border-radius: 6px;
color: #fff;
font-style: 18px;
}
#submit
{
position: relative;
left:-50%;
top:50px;
background: #292929;
border: none;
color: white;
padding: 10px 22px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
#form #inputBox
{
position: relative;
}
#text
{
display: block;
color: #000;
font-weight: 300;
font-style: italic;
padding: 5px;
}
#text1
{
display: block;
color: #000;
font-weight: 300;
font-style: italic;
padding: 3px;
}
#form.invalid .inputBox:before
{
content: '';
position: absolute;
right: 125px;
top: 9px;
width: 24px;
height: 24px;
background: url(invalid.png);
background-size: cover;
z-index: 1000;
}
#form.valid .inputBox:before
{
content: '';
position: absolute;
right: 125px;
top: 9px;
width: 24px;
height: 24px;
background: url(valid.png);
background-size: cover;
z-index: 1000;
}
Я пользуюсь чужим кодом, чтобы разобраться как это правильно делать и у меня не получается перенести логику из validationEmail в validationTel и в дальнейшем validationName итд. Я хочу грамотно писать такой код, так что я бы очень был благодарен любому совету и комментарию, спасибо за ваше время!
Весь код сейчас захостен на https://validation-testing.firebaseapp.com/ для визуализации.
В принципе, у вас все правильно, просто неоптимально, и регулярка для телефона вызывает ошибку. Я бы для начала вынес повторяющиеся вещи в одно место. Будет гораздо короче и понятнее. А потом тщательно проверил регулярные выражения (в моем примере они каличные, чисто шоб было).
function validateInput(input_id, output_id, pattern_text, valid_message, invalid_message) {
var form = document.getElementById("form");
var data = document.getElementById(input_id).value;
var result = document.getElementById(output_id);
if (data.match(pattern_text)) {
form.classList.add("valid");
form.classList.remove("invalid");
result.innerHTML = valid_message;
result.style.color = "#00ff00";
} else {
form.classList.remove("valid");
form.classList.add("invalid");
result.innerHTML = invalid_message;
result.style.color = "#ff0000";
}
if (data == "") {
form.classList.remove("valid");
form.classList.remove("invalid");
result.innerHTML = "";
result.style.color = "#00ff00";
}
}
function validationEmail() {
var pattern = "[a-zZ-Z0-9.]*@[a-zZ-Z0-9.]*.[a-zZ-Z0-9.]{2,3}";
validateInput("email", "text", pattern, "Ваша почта подходит.", "Пожалуйста введите правильную почту");
}
function validationTel() {
var pattern = "\+[0-9]{11}";
validateInput("tel", "text1", pattern, "Телефон подходит.", "Пожалуйста введите правильный телефон.");
}
function validationName() {
var pattern = "[a-zA-Z]*";
validateInput("name", "text2", pattern, "Имя подходит.", "Пожалуйста введите правильное имя");
}span {
display: block;
}<div>
<h3> Заполните форму</h3>
<form id="form" action="#">
<div class="inputBox">
<input type="text" name="" id="email" placeholder="[email protected]" required onkeydown="validationEmail()">
<span id="text"></span>
<br>
<input type="tel" id="tel" placeholder="+79951122131" required onkeydown="validationTel()">
<span id="text1"></span>
<br>
<input type="text" id="name" placeholder="Иванов Александр Александрович" required onkeydown="validationName()">
<span id="text2"></span>
<br>
<input type="submit" id="submit" value="Отправить" />
</div>
</form>
</div>Answered by Инквизитор on November 15, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP