Сообщение с подтверждением для отправки формы после проверки в JavaScript - PullRequest
Новая
       9

Сообщение с подтверждением для отправки формы после проверки в JavaScript

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

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

Я создал форму в HTML и хочу проверить ее в Javascript.

Что я сделал такfar:

, если поля пусты и пользователь нажимает кнопку «Отправить», вокруг поля появится красная рамка.Граница исчезает, если пользователи что-то пишут в поле.

Что я хочу сделать:

если нет ошибок проверки и отправлена ​​форма, я хотел бы, чтобы появилось подтверждающее сообщениенад формой.Первоначально сообщение должно быть скрыто, и в нем должно быть что-то вроде: «Спасибо, что связались с нами (и имя, введенное пользователем в форме)»

Я также хочу напечатать каждую информацию из полей вводав консоли после отправки.

Как я могу сделать это, используя только ванильный Javascript? 

function formValidation() {
  if (document.myForm.fname.value == "") {
    document.getElementById("first-name").style.border = "2px solid red";
    return false;
  } else {
    document.getElementById("first-name").style.border = "";
  };

  if (document.myForm.lname.value == "") {
    document.getElementById("last-name").style.border = "2px solid red";
    return false;
  } else {
    document.getElementById("last-name").style.border = "";
  };

  var checkMale = document.getElementById("gender-m").checked;
  var checkFemale = document.getElementById("gender-f").checked;

  if (checkMale == false && checkFemale == false) {
    alert("Please select gender");
    return false;
  };

  if (document.myForm.texta.value == "") {
    document.getElementById("area").style.border = "2px solid red";
    return false;
  } else {
    document.getElementById("area").style.border = "";
  };
  return true;

}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/style.css">
  <title>My Form</title>
</head>

<body>
  <form id="my-form" name="myForm" action="#" onsubmit="event.preventDefault(); formValidation();">
    <div id="msg">Thank you for contacting us, </div>
    <input type="text" name="fname" id="first-name" placeholder="First Name"> <br>
    <input type="text" name="lname" id="last-name" placeholder="Last Name"> <br>
    <label for="gender">Gender:</label> <br>
    <input type="radio" name="gender" id="gender-m"> Male <br>
    <input type="radio" name="gender" id="gender-f"> Female <br>
    <textarea name="texta" id="area" cols="30" rows="10"></textarea> <br>
    <button type="submit">Submit</button>
  </form>

  <script src="index.js"></script>
</body>

</html>

1 Ответ

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

Вы можете сделать это так: 

function formValidation() {
  if (document.myForm.fname.value == "") {
    document.getElementById("first-name").style.border = "2px solid red";
    return false;
  } else {
    document.getElementById("first-name").style.border = "";
  };

  if (document.myForm.lname.value == "") {
    document.getElementById("last-name").style.border = "2px solid red";
    return false;
  } else {
    document.getElementById("last-name").style.border = "";
  };

  var checkMale = document.getElementById("gender-m").checked;
  var checkFemale = document.getElementById("gender-f").checked;

  if (checkMale == false && checkFemale == false) {
    alert("Please select gender");
    return false;
  };

  if (document.myForm.texta.value == "") {
    document.getElementById("area").style.border = "2px solid red";
    return false;
  } else {
    document.getElementById("area").style.border = "";
  };
  var success = true;
  if(success){
var data = document.getElementById("first-name").value+','+document.getElementById("last-name").value;
  console.log(data);
	 var html = '';
  html +='Thank you for contacting us,'+document.getElementById("first-name").value;
  document.getElementById("msg").innerHTML = html;
}

}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/style.css">
  <title>My Form</title>
</head>

<body>
  <form id="my-form" name="myForm" action="#" onsubmit="event.preventDefault(); formValidation();">
    <div id="msg"></div>
    <input type="text" name="fname" id="first-name" placeholder="First Name"> <br>
    <input type="text" name="lname" id="last-name" placeholder="Last Name"> <br>
    <label for="gender">Gender:</label> <br>
    <input type="radio" name="gender" id="gender-m"> Male <br>
    <input type="radio" name="gender" id="gender-f"> Female <br>
    <textarea name="texta" id="area" cols="30" rows="10"></textarea> <br>
    <button type="submit">Submit</button>
  </form>

  <script src="index.js"></script>
</body>

</html>

Когда все в функции formValidation () проверено, тогда код установит флаг success = true.Если значение success равно true, мы можем установить сообщение об успешной отправке формы.

...