CODEWITHSUNDEEP
javascriptformsvalidation
Kiss Botond
Kiss Botond

Reputation: 13

Confirmation message for form submission after validations in JavaScript

I started learning javascript about 2 weeks ago so I'm really new. I've been messing arround with forms and I can't figure out some stuff.

I made a form in HTML and want to validate it in Javascript.

What I've done so far:

if the the fields are empty and the user presses submit a red border will appear arround the field. The border dissapperas if the users writes something in the field.

What I want to do:

if there are no validation errors and the form is submitted I would like for a confirmation message to appear above the form. The message should be hidden initially and it should say something like: "Thank you for contacting us,(and the first name the user entered in the form)"

I also want to print every information from the input fields in the console after submit.

How can I do this using only vanilla 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>

Upvotes: 1

Views: 891

Answers (1)

node_man
node_man

Reputation: 1449

You can do it like this :

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>

When everything in the formValidation() function is validated then the code will set a flag success = true. If the value of success is true we can set a form submission successful message.

Upvotes: 2

Related Questions