<!DOCTYPE html>
<html>
<head>
<title>Валидация форм</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<style>
.minibox {
clear: both;
padding: 8px 0;
overflow: hidden;
position: relative;
}
.form-input{
position: relative;
}
.myForm {
padding: 20px;
font-family: Arial;
font-size: 13px;
display: inline-block;
background-color: black;
}
.error-message {
color: red;
position: absolute;
left: 0;
height: 10px;
font-size: 16px;
top: 20px;
}
.error {
border-color: red;
}
label {
padding-top: 6px;
line-height: 10px;
float: left;
color: #b6daff;
margin-right: 7px;
width: 120px;
}
input,select,textarea {
display: inline-block;
width: 250px;
height: 18px;
padding: 4px;
line-height: 18px;
color: #efefef;
border: 1px solid #a4a4a4;
background-color: #202223;
transition: border linear 0.2s, box-shadow linear 0.2s;
border-radius: 4px;
}
select {
width: 200px;
height: auto;
}
textarea {
height: auto;
}
button {
display: inline-block;
width: auto;
height: auto;
background-color: #3d6182;
background-repeat: repeat-x;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border: 1px solid #19252f;
padding: 8px 17px 9px;
color: white;
cursor: pointer;
border-radius: 4px;
box-shadow: inset 0 1px 0 silver, 0 1px 2px gold;
transition: 0.1s linear all;
}
button[type=reset] {
border: 1px solid #161616;
background-color: blue;
}
input[type=checkbox],input[type=radio] {
width: auto;
height: auto;
margin-left: 0;
padding: 0;
line-height: normal;
float: left;
border: none;
}
input[type=file] {
background-color: #37393c;
height: 27px;
border: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 6px;
float: left;
}
ul li {
display: block;
width: 100%;
clear: both;
margin: 0;
}
ul li label {
float: none;
padding: 0;
width: auto;
margin: 0 0 0 8px;
color: #efefef;
}
</style>
<body>
<form class="myForm" name="myForm" novalidate>
<div class ="minibox">
<label>Имя</label>
<input type="text" class="form-input" name="name" required>
<div class='error-message'></div>
</div>
<div class ="minibox">
<label>Фамилия</label>
<input type="text" class="form-input" name="name" required>
<div class='error-message'></div>
</div>
<div class ="minibox">
<label>Пол</label>
<select class="form-input" required>
<option class="gender" name="options" value="default"></option>
<option class="gender" name="options">Мужской</option>
<option class="gender" name="options">Женский</option>
<option class="gender" name="options">Средний</option>
<div class='error-message'></div>
</select>
</div>
<div class ="minibox">
<label>Какой вид транспорта вы предпочитаете?</label>
<ul>
<li>
<label><input type="checkbox" class="transport" name ="transport" >Авто</label>
</li>
<li>
<label><input type="checkbox" class="transport" name ="transport">Велосипед</label>
</li>
<li>
<label><input type="checkbox" class="transport" name ="transport">Городской</label>
</li>
<li>
<label><input type="checkbox" class="transport" name ="transport">Каршеринг</label>
</li>
</ul>
</div>
<div class ="minibox">
<label>Сколько вам лет?</label>
<ul>
<li>
<label><input type="radio" name="age" >до 18</label>
</li>
<li>
<label><input type="radio" name="age">от 18 до 36</label>
</li>
<li>
<label><input type="radio" name="age">Больше 36</label>
</li>
</ul>
</div>
<div class ="minibox">
<label>Ваше фото</label>
<input type="file">
</div>
<div class ="minibox">
<label>О себе</label>
<textarea
class="form-input"
cols=""
rows="5"
name='about'
id="about"
type="text"
></textarea>
</div>
<div class ="minibox">
<label>Кнопка</label>
<button type="submit">Отправить</button>
<button type="reset">Сбросить</button>
</div>
</form>
<script src="script.js"></script>
</body>
</html>
const form = document.forms['myForm'];
const inputs = document.querySelectorAll('.form-input');
let gender = document.querySelectorAll('.gender');
const select = document.querySelector('select')[0];
const validationSchema = {
name: {
regexp: /^[a-zA-Z0-9-\s]+$/gi,
message: 'Incorrect',
},
about: {
regexp: /^[a-zA-Z0-9-\s!?]+$/gi,
message: 'Please use only alphabetic symbols and numbers',
},
options: {
regexp: /^[a-zA-Z0-9-\s!?]+$/gi,
message: 'Incorrect'
},
}
//Валидация при отправке.
form.addEventListener('submit', (event) => {
event.preventDefault();
const inputErrors = [];
const inputValues = {};
inputs.forEach((input) => {
const isValid = validateFormControl(input);
if (!isValid) {
inputErrors.push(input);
}
inputValues[input.name] = input.value;
});
if (inputErrors.length) {
return;
}
})
//Валидация при заполнении.
inputs.forEach((input) => {
input.addEventListener('blur', validateFormControl);
});
function validateFormControl(event) {
const input = event.target || event;
if (!input.required) {
return true;
}
const error = validationSchema[input.name].message;
const regExp = validationSchema[input.name].regexp;
const isValid = input.value.match(regExp);
if (!isValid) {
input.nextElementSibling.innerHTML = error;
input.classList.add('error');
return false;
} else {
input.nextElementSibling.innerHTML = '';
input.classList.remove('error');
return true;
}
if(select.value = 'default'){
input.nextElementSibling.innerHTML = error;
input.classList.add('error');
console.log(1);
return false;
}
}
/*function genderselect(ugender)
{
if(ugender.value == "Default")
{
alert('Select your country from the list');
ucountry.focus();
return false;
}
else
{
return true;
}
}*/
|
