Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.05.2021, 14:44
Новичок на форуме
Отправить личное сообщение для Ramosok Посмотреть профиль Найти все сообщения от Ramosok
 
Регистрация: 13.05.2021
Сообщений: 7

Валидация форм.
Код:
<!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;
}
}*/

Добрый день, помогите сделать валидацию формы. Размер загружаемого файла 1 мб, разширение jpeg.
Ответить с цитированием
  #2 (permalink)  
Старый 23.05.2021, 15:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ramosok,
js - строка 67 - ==
Ответить с цитированием
  #3 (permalink)  
Старый 23.05.2021, 18:03
Новичок на форуме
Отправить личное сообщение для Ramosok Посмотреть профиль Найти все сообщения от Ramosok
 
Регистрация: 13.05.2021
Сообщений: 7

там и чекбоксы не коректно работают.... и файл не могу проволедировать.
Ответить с цитированием
  #4 (permalink)  
Старый 23.05.2021, 18:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ramosok,
https://stackoverflow.com/questions/...ize-validation

https://www.geeksforgeeks.org/valida...script-jquery/
Ответить с цитированием
  #5 (permalink)  
Старый 23.05.2021, 18:32
Новичок на форуме
Отправить личное сообщение для Ramosok Посмотреть профиль Найти все сообщения от Ramosok
 
Регистрация: 13.05.2021
Сообщений: 7

Спасибо, почитаю.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Валидация форм не работает Noahcore jQuery 0 01.05.2017 17:24
Отправка данных из двух форм на один url Sanu0074 jQuery 1 04.08.2015 17:12
Валидация: unobtrusive и обычная валидация. Как скрестить? dux1 Элементы интерфейса 2 27.07.2015 08:31
Валидация форм на заполнение Junior Events/DOM/Window 1 07.03.2015 18:12
валидация форм FanAizu Общие вопросы Javascript 1 26.08.2013 20:12