Как добавить отдельные элементы класса из списка узлов? - PullRequest
Новая
       1

Как добавить отдельные элементы класса из списка узлов?

0 голосов
/ 30 октября 2018

Прошу прощения за заголовок. Я не уверен, как лучше описать эту проблему в одной строке.

Я создаю форму. Эта форма будет проверена регулярными выражениями. Исходя из того, правильно это или нет, я хочу добавить класс animate, который будет затем запускать анимацию ключевого кадра CSS. Ошибка вызовет отметку времени, исправьте ее, отметив отметку.

Проблема однако. Все входные данные проверяются одновременно, в результате чего запускаются все анимации. Я поместил прослушиватель событий на каждый из входов, хотя я хочу, чтобы он работал только для this ввода.

В валидаторе имени вы видите цифры от 0: 3, которые представляют индексы анимации. Но с console.log я уже заметил, что он отправляет все числа, а не только те, которые я хочу привязать к определенному правилу (Regex).

Я попытался исправить это, проверив IndexOf входов, так как их номер индекса совпадает с их крестиком / галочкой. Но у меня не было большого успеха. Еще одна вещь, которую я мог бы сделать, это сделать animator() намного длиннее, специально ориентируясь на классы. Но если бы я хотел этого избежать, поскольку хотел бы, чтобы код был коротким.

Спасибо за ваше время:)!

Вы можете увидеть фрагмент здесь: 

html, body {
  height: 100%;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  color: #222;
  margin: 0;
  background-color: black;
}

.container {
	background-image: url('sunset.jpg');
	background-size: 100%,100%;
	width: 100vw;
	height: 100%;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.form {
	display: inline-flex;
}

input {
	margin-left: 10px;
	opacity: .8;
}

input[type=text] {
    background-color: white;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding-left: 15px;
    width: 250px;
    height: 35px;
    margin: 10px;
    position: relative;
    left: -40px;
    font-size: 18px;
    border-radius: 5px;


}

input[name=postalcode] {
	width: 100px;
}

.submit-btn {
	  height: 41px;
    position: relative;
    background-color: #F8FDFF;
    top: -3px;
    border-radius: 5px;
    left: -40px;
}

.form p {
	display: inline-table;
	color: white;
}

.fas {
  color: white;
  position: relative;
  left: -40px;
  opacity: 0;
}

.fa-check {
left: -20px;
}



.slide-in-right.animate {
	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
<!DOCTYPE html>
<html>
<head>
	
	<title>Buttons</title>
	<link href="style.css" rel="stylesheet">
	<link href="animation-library.css" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>

<div class="container">
	<div class="form">
		<form>
			<i class="form-display fas fa-check slide-in-right" id="promotioncode"></i>
			<i class="form-error fas fa-times slide-in-right"></i>
			<input id="name" type="text" name="name" placeholder='Name...'><br>
			<i class="form-display fas fa-check slide-in-right"></i>
			<i class="form-error fas fa-times slide-in-right"></i>
			<input id="mail" type="text" name="email" placeholder='E-mail...'><br>
			<i class="form-display fas fa-check slide-in-right"></i>
			<i class="form-error fas fa-times slide-in-right"></i>
			<input id="phone" type="text" name="adress" placeholder='Phone...'><br>
			<i class="form-display fas fa-check slide-in-right"></i>
			<i class="form-error fas fa-times slide-in-right"></i>
			<input id="postal" type="text" name="postalcode" placeholder='Postal...'><input type="button" value="Submit" name="submit" class="submit-btn">
			<br>
			<input type="checkbox" name="checkbox"><p>I want spam</p>
			<br>
			<input type="checkbox" name="checkbox"><p>I agree to the terms I haven't read<br>
		</form>
	</div>
</div>


<script type="text/javascript">
	
	

	//Regular Expressions 
	const nameRegX = /^$/;
	const mailRegX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	const phoneRegX = /^[0-9]{7}/;
	const postRegX = /^[0-9]{4}[a-zA-Z]{2}/;

	//If these are all true, form will be send
	var nameIsValid, mailIsValid, numberIsValid, postalIsValid
	nameIsValid = false;
	mailIsValid = false;
	numberIsValid = false;
	postalIsValid = false;

	

	//Eventlistener on all inpluts
	inputs = document.querySelectorAll("input");

		for (var i = 0; i < inputs.length; i++){
		inputs[i].onchange = function() {
    	var name, mail, number, postal;
		name = inputs[0].value;
		mail = inputs[1].value;
		number = inputs[2].value;
		postal = inputs[3].value;
		
		nameValidator(name, mail, number, postal);
		}
	}



	function nameValidator(name, mail, number, postal){
		validator(!name.match(nameRegX), nameIsValid, 0)
		validator(mail.match(mailRegX), mailIsValid, 1)
		validator(number.match(phoneRegX), numberIsValid, 2)
		validator(postal.match(postRegX), postalIsValid, 3)

		if (nameIsValid, mailIsValid, numberIsValid, postalIsValid === true){
			submit(true);
		} else {
			submit(false);
		}
	}

	//Animation Selectors
	var error = document.querySelectorAll(".form-error");
	var correct = document.querySelectorAll(".form-display");

	function validator(rule, isValid, index){
			
		if (rule){
			animator(index, "correct");
			isValid = true;
		} else {
			animator(index, "error");
		}
	}

	
	
	function animator(i, validity){
		var error = document.querySelectorAll(".form-error");
		var correct = document.querySelectorAll(".form-display");
		if (validity === "error"){
			error[i].classList.add("animate")
			correct[i].classList.remove("animate")
			

		} else {
			correct[i].classList.add("animate")
			error[i].classList.remove("animate")
		}

	}
	function submit (valid){
		if (valid === false){
			return false
			console.log("don't send");
		} else {
			return true
			console.log("send");
		}
	}

	



</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...