Хочу сделать валидацию и отправку формы на чистом css+js, по получаю ошибки

202
06 сентября 2018, 08:20

Есть форма отправки. Пытаюсь сделать валидацию и иммитацию отправки формы (со страницы не должно перебрасываться, а просто над кнопкой отправить выводится текст "отправка") с помощью чистого js не используя сторонних библиотек, но что-то пока совсем запутался. Что не так: Фидл

  1. валидация полей, кроме текстовой области отрабатывает не верно. При вводе первого символа в текстовых полях тут же появляется зеленая иконка, а не по окончанию ввода пользователем и проверки введенных данных.
  2. функция submit не срабатывает вообще - почему?
  3. после нажатия на кнопку перезагружается страница. Как это можно предотвратить и выводить в простом лейбле надпись отправлено?

var textarea = document.getElementById('form-control'); 
textarea.addEventListener('input', function(e) { 
 
  if (this.value != '') { 
    document.getElementById("circle-ok").style.display = "block"; 
  } else { 
    document.getElementById("circle-ok").style.display = "none"; 
  } 
}); 
 
var textarea = document.getElementById('form-control'); 
textarea.addEventListener('input', function(e) { 
 
  if (this.value != '') { 
    document.getElementById("circle-ok").style.display = "block"; 
  } else { 
    document.getElementById("circle-ok").style.display = "none"; 
  } 
}); 
 
document.getElementById("form").onsubmit = function(event) { 
  if (whatever == true) { 
    event.preventDefault(); 
    document.getElementById("submitting").innerHTML = "Submitting..."; 
  } 
};
form input, 
form textarea { 
  box-sizing: border-box; 
  width: 100%; 
  background: transparent; 
  border: 1px solid #8e908f; 
  font-size: 20px; 
  color: #fff; 
} 
 
form p { 
  position: relative; 
} 
 
form p i { 
  position: absolute; 
  right: 5px; 
  top: 5px; 
  display: none; 
} 
 
form p .fa-check-circle:before { 
  color: green; 
} 
 
form input:invalid:not(:placeholder-shown)+i { 
  display: block; 
} 
 
form input:valid:not(:placeholder-shown)+i { 
  display: block; 
} 
 
#screen-3 form input { 
  height: 100px; 
} 
 
form input[type="submit"] { 
  border: none; 
  background-color: #bb9300; 
  color: #000; 
  text-transform: uppercase; 
  font-weight: bold; 
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; 
} 
 
form input[type="submit"]:hover { 
  background-color: #ffc300; 
  cursor: pointer; 
  -webkit-transition: opacity 300ms ease-out; 
  transition: opacity 300ms ease-out; 
}
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" /> 
<form name="sentMessage" id="form" action="#"> 
  <p><input type="text" placeholder="Name" name="name"><i class="fas fa-check-circle"></i></p> 
  <p><input type="email" placeholder="Email" name="email"><i class="fas fa-check-circle"></i></p> 
  <p><input type="tel" placeholder="Phone" name="phone"><i class="fas fa-check-circle"></i></p> 
  <p><textarea placeholder="Message" name="message" id="form-control" rows="3"></textarea><i class="fas fa-check-circle" id="circle-ok"></i></p> 
  <label id="submitting"></label> 
  <input type="submit" value="Send Message" /> 
</form>

Answer 1

Убери условие

if (whatever == true) {

whatever - неопределенная переменная и она == undefined, а undefined == false, поэтому и через if ты не проходишь

Answer 2

Лови валидацию на джаваскрипте :D :D :D :D :D :D :D :D :D 

// SELECTING ALL TEXT ELEMENTS 
var username = document.forms['vform']['username']; 
var email = document.forms['vform']['email']; 
var password = document.forms['vform']['password']; 
var password_confirm = document.forms['vform']['password_confirm']; 
// SELECTING ALL ERROR DISPLAY ELEMENTS 
var name_error = document.getElementById('name_error'); 
var email_error = document.getElementById('email_error'); 
var password_error = document.getElementById('password_error'); 
// SETTING ALL EVENT LISTENERS 
username.addEventListener('blur', nameVerify, true); 
email.addEventListener('blur', emailVerify, true); 
password.addEventListener('blur', passwordVerify, true); 
// validation function 
function Validate() { 
  // validate username 
  if (username.value == "") { 
    username.style.border = "1px solid red"; 
    document.getElementById('username_div').style.color = "red"; 
    name_error.textContent = "Username is required"; 
    username.focus(); 
    return false; 
  } 
  // validate username 
  if (username.value.length < 3) { 
    username.style.border = "1px solid red"; 
    document.getElementById('username_div').style.color = "red"; 
    name_error.textContent = "Username must be at least 3 characters"; 
    username.focus(); 
    return false; 
  } 
  // validate email 
  if (email.value == "") { 
    email.style.border = "1px solid red"; 
    document.getElementById('email_div').style.color = "red"; 
    email_error.textContent = "Email is required"; 
    email.focus(); 
    return false; 
  } 
  // validate password 
  if (password.value == "") { 
    password.style.border = "1px solid red"; 
    document.getElementById('password_div').style.color = "red"; 
    password_confirm.style.border = "1px solid red"; 
    password_error.textContent = "Password is required"; 
    password.focus(); 
    return false; 
  } 
  // check if the two passwords match 
  if (password.value != password_confirm.value) { 
    password.style.border = "1px solid red"; 
    document.getElementById('pass_confirm_div').style.color = "red"; 
    password_confirm.style.border = "1px solid red"; 
    password_error.innerHTML = "The two passwords do not match"; 
    return false; 
  } 
} 
// event handler functions 
function nameVerify() { 
  if (username.value != "") { 
   username.style.border = "1px solid #5e6e66"; 
   document.getElementById('username_div').style.color = "#5e6e66"; 
   name_error.innerHTML = ""; 
   return true; 
  } 
} 
function emailVerify() { 
  if (email.value != "") { 
  	email.style.border = "1px solid #5e6e66"; 
  	document.getElementById('email_div').style.color = "#5e6e66"; 
  	email_error.innerHTML = ""; 
  	return true; 
  } 
} 
function passwordVerify() { 
  if (password.value != "") { 
  	password.style.border = "1px solid #5e6e66"; 
  	document.getElementById('pass_confirm_div').style.color = "#5e6e66"; 
  	document.getElementById('password_div').style.color = "#5e6e66"; 
  	password_error.innerHTML = ""; 
  	return true; 
  } 
  if (password.value === password_confirm.value) { 
  	password.style.border = "1px solid #5e6e66"; 
  	document.getElementById('pass_confirm_div').style.color = "#5e6e66"; 
  	password_error.innerHTML = ""; 
  	return true; 
  } 
}
#wrapper { 
  width: 30%; 
  margin: 50px auto; 
  padding: 50px; 
  background: #D7FBFF; 
} 
form { 
  margin: 30px auto; 
} 
.textInput { 
  border: none; 
  height: 28px; 
  margin: 2px; 
  border: 1px solid #6B7363; 
  font-size: 1.2em; 
  padding: 5px; 
  width: 95%; 
} 
.textInput:focus { 
  outline: none; 
} 
.btn { 
  width: 98.6%; 
  border: none; 
  margin-top: 5px; 
  color: white; 
  background-color: #3b5998; 
  border-radius: 5px; 
  padding: 12px; 
}
<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Form validation with JavaScript</title> 
</head> 
<body> 
  <div id="wrapper"> 
   <form method="POST" action="index.php" onsubmit="return Validate()" name="vform" > 
   	<div id="username_div"> 
   	  <label>Username</label> <br> 
   	  <input type="text" name="username" class="textInput"> 
   	  <div id="name_error"></div> 
   	</div> 
   	<div id="email_div"> 
   	  <label>Email</label> <br> 
   	  <input type="email" name="email" class="textInput"> 
   	  <div id="email_error"></div> 
   	</div> 
   	<div id="password_div"> 
   	  <label>Password</label> <br> 
   	  <input type="password" name="password" class="textInput"> 
   	</div> 
   	<div id="pass_confirm_div"> 
   	   <label>Password confirm</label> <br> 
   	   <input type="password" name="password_confirm" class="textInput"> 
   	   <div id="password_error"></div> 
   	</div> 
   	<div> 
   	<input type="submit" name="register" value="Register" class="btn"> 
   	</div> 
   </form> 
  </div> 
</body> 
</html>

Answer 3

Вот вариант валидации с помощью Regional Expression,можешь переделать под твой код,а так же для правильной работы в место метода test() использовать методы search() или match()`

let input = document.getElementsByTagName('input');
const name= /(?=^.{3,20}$)^[A-Z][a-zA-Z0-9]*[._-]?[a-zA-Z0-9]+$/g;
const surname = /(?=^.{4,20}$)^[A-Z][a-zA-Z0-9]*[._-]?[a-zA-Z0-9]+$/g;
const email = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
const pass = /^([a-z]|[A-Z]|[0-9]){6,10}$/gm;
function getValue() {
    if (name.test(input[0].value) === false){
        alert('');
    }
    if (surname.test(input[1].value) === false){
        alert('')
    }
    if (email.test(input[2].value) === false){
        alert('');
    }
    if (pass.test(input[3].value) === false){
        alert('');
    }
}
input[4].addEventListener('click',getValue,false);
console.log(input[0].value,input[1].value,input[2].value,input[3].value);

`

Answer 4

Вот к какому рабочему варианту пришел сам, может быть кому-либо пригодится тоже

function InputName(value) { 
  if (value != '') { 
    document.getElementById("circle-ok-1").style.display = "block"; 
  } else { 
    document.getElementById("circle-ok-1").style.display = "none"; 
  } 
} 
 
function InputEmail(value) { 
  let email = value; 
  if (email.length > 0 && (email.match(/.+?\@.+/g) || []).length !== 1) { 
    document.getElementById("circle-ok-2").style.display = "none"; 
  } else { 
    document.getElementById("circle-ok-2").style.display = "block"; 
  } 
} 
 
function InputPhone(value) { 
  let regExp = /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]*$/g; 
  var phone = value.match(regExp); 
  if (phone) { 
    document.getElementById("circle-ok-3").style.display = "block"; 
  } else { 
    document.getElementById("circle-ok-3").style.display = "none"; 
  } 
} 
 
function Textarea(value) { 
  if (value != '') { 
    document.getElementById("circle-ok-4").style.display = "block"; 
  } else { 
    document.getElementById("circle-ok-4").style.display = "none"; 
  } 
} 
 
function sendForm() { 
  document.getElementById("sending").style.opacity = 1; 
}
form { 
  width: 1100px; 
  max-width: 100%; 
} 
 
form input, 
form textarea { 
  box-sizing: border-box; 
  width: 100%; 
  background: transparent; 
  border: 1px solid #8e908f; 
  padding: 10px; 
  font-size: 20px; 
} 
 
form p { 
  position: relative; 
} 
 
form p i.fas { 
  position: absolute; 
  right: 15px; 
  top: 15px; 
  display: none; 
} 
 
form p .fa-check-circle:before { 
  color: green; 
} 
 
form textarea { 
  height: 100px; 
} 
 
form input:focus, 
form textarea:focus { 
  outline-color: #ffc300; 
} 
 
form input { 
  height: 50px; 
} 
 
form input[type="submit"] { 
  border: none; 
  background-color: #bb9300; 
  color: #000; 
  text-transform: uppercase; 
  font-weight: bold; 
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; 
} 
 
form input[type="submit"]:hover { 
  background-color: #ffc300; 
  cursor: pointer; 
  -webkit-transition: opacity 300ms ease-out; 
  transition: opacity 300ms ease-out; 
} 
 
form ::placeholder { 
  color: #8e908f; 
} 
 
#sending { 
  display: block; 
  text-align: center; 
  padding: 15px; 
  font-size: 16px; 
  color: #8e908f; 
  opacity: 0; 
}
<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet"/> 
<form method="POST" name="f" id="form" action="" onsubmit="return false;"> 
  <p><input type="text" placeholder="Name" name="name" oninput="InputName(this.value)"><i class="fas fa-check-circle" id="circle-ok-1"></i></p> 
  <p><input type="email" placeholder="Email" name="email" oninput="InputEmail(this.value)"><i class="fas fa-check-circle" id="circle-ok-2"></i></p> 
  <p><input type="tel" placeholder="Phone" name="phone" oninput="InputPhone(this.value)"><i class="fas fa-check-circle" id="circle-ok-3"></i></p> 
  <p><textarea placeholder="Message" name="message" id="form-control" rows="3" oninput="Textarea(this.value)"></textarea><i class="fas fa-check-circle" id="circle-ok-4"></i></p> 
  <label id="sending">Sending...</label> 
  <input type="submit" value="Send Message" onclick="sendForm(); return false;" /> 
</form>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Как прописать в коде, какую спецификацию javascript я использую?
javascript

Как прописать в коде, какую спецификацию javascript я использую?

Использую node js на сервере (с помощью) PassengerУстановил версию 9

 222
Проверка формы на кол-во символов JS [закрыт]
javascript

Проверка формы на кол-во символов JS [закрыт]

Есть форма с логином и паролемПоле с паролем закрыто и должно открыться после ввода 5 символов в поле с логином, а кнопка входа открыться после...

 177
Angular: Как деструктизировать код в конструкторе модели данных?
javascript

Angular: Как деструктизировать код в конструкторе модели данных?

 217
Не подключется javascript
javascript

Не подключется javascript

Не подключается javascript, вот как его подключил(в конце тега body)(использую pug) script(src="https://cdnjscloudflare

 261