CODEWITHSUNDEEP
javascripthtmlforms
ahlie94
ahlie94

Reputation: 171

Form Field Submission

I have my HTML and JS, how would I use this form in my JS so if one of the fields are not entered, the form doesnt submit and shows me my original please enter all fields error

Form:

 <form id="myForm" action="http://www.eecs.yorku.ca/~mbrown/EECS1012/testForm.php" method="get">

HTML:

    <!doctype html>
    <html lang="en">
    <head>
      <title> Forms </title>
      <style>
        span {
          padding-left: 10px;
          display: block;
          float: left;
          width: 20%;
        }
        button { margin-left: 10px; }
        body {
          width: 80%; margin: auto; font-family: sans-serif;
          border: 1px solid black;
        }
      </style>
      <meta charset="utf-8">
      <script src="prototype.js"></script>
      <script src="forms.js"></script>
    </head>
    <body>
      <h1> Keyboard  Events and Form Submit </h1>
<!-- Form -->
      <form id="myForm" action="http://www.eecs.yorku.ca/~mbrown/EECS1012/testForm.php" method="get">
      <p> <span>Name:</span> <input id="input1" value="" placeholder="Enter Name" name="Name"></p>
      <p> <span>Id:</span> <input id="input2" value=""
      placeholder="Enter ID" name="ID"></p>
      <p> <span>Email:</span> <input id="input3" value="" placeholder="Enter Email" name="Email"></p>
      <p>
      <button id="submitButton" type="button"  onclick="submit()"> Submit </button>
      <button id="resetButton" type="button"  onclick="reset()"> Reset </button>
      </p>
      <p style="color:red" id="ErrorMessage"> </p>

    </body>
    </html>

JS:

function reset(){
  document.getElementById('input1').value = "";
  document.getElementById('input2').value = "";
  document.getElementById('input3').value = "";
  document.getElementById('ErrorMessage').innerHTML = "";
}

function submit(){
  var inp1 = document.getElementById('input1').value;
  var inp2 = document.getElementById('input2').value;
  var inp3 = document.getElementById('input3').value;
  if(inp1 == "" || inp2 == "" || inp3 == "")
  {
  document.getElementById('ErrorMessage').innerHTML = "Please enter all fields";
  }
  else{
  //do your code here
  document.getElementById('ErrorMessage').innerHTML = "";
  }
}

Upvotes: 0

Views: 60

Answers (4)

ewwink
ewwink

Reputation: 19184

change your function name submit() to another because it conflict with builtin JS function, doing onclick="submit()" is same with this.form.submit() or document.getElementById('myForm').submit();

function reset() {
  document.getElementById('input1').value = "";
  document.getElementById('input2').value = "";
  document.getElementById('input3').value = "";
  document.getElementById('ErrorMessage').innerHTML = "";
}

function checkSubmit() {
  var inp1 = document.getElementById('input1').value;
  var inp2 = document.getElementById('input2').value;
  var inp3 = document.getElementById('input3').value;
  if (inp1 == "" || inp2 == "" || inp3 == "") {
    document.getElementById('ErrorMessage').innerHTML = "Please enter all fields";
  } else {
    //do your code here
    document.getElementById('ErrorMessage').innerHTML = "submitting form";
    document.getElementById('myForm').submit();
  }

}
span {
  padding-left: 10px;
  display: block;
  float: left;
  width: 20%;
}

button {
  margin-left: 10px;
}

body {
  width: 80%;
  margin: auto;
  font-family: sans-serif;
  border: 1px solid black;
}
<h1> Keyboard Events and Form Submit </h1>
<!-- Form -->
<form id="myForm" action="https://www.eecs.yorku.ca/~mbrown/EECS1012/testForm.php" method="get">
  <p> <span>Name:</span> <input id="input1" value="" placeholder="Enter Name" name="Name"></p>
  <p> <span>Id:</span> <input id="input2" value="" placeholder="Enter ID" name="ID"></p>
  <p> <span>Email:</span> <input id="input3" value="" placeholder="Enter Email" name="Email"></p>
  <p>
    <button id="submitButton" type="button" onclick="checkSubmit()"> Submit </button>
    <button id="resetButton" type="button" onclick="reset()"> Reset </button>
  </p>
  <p style="color:red" id="ErrorMessage"> </p>
</form>

Upvotes: 1

zfrisch
zfrisch

Reputation: 8670

Upon button click of the submission button you can iterate over all the input fields, determine whether or not they have the attribute required and then determine whether or not their value is an empty string (!field.value)

We put this in a try/catch block so that if a field is required and does not have a value, we can break out of the forEach loop by throwing an error and displaying the message Please Enter All Required Fields

let submit = document.querySelector("button");

submit.addEventListener("click", submitFn);

function submitFn() {
  try {
    document.querySelectorAll("form input").forEach(function(field) {
      if (field.hasAttribute("required") && !field.value) {
        throw error("not all fields filled in");
      }
    });
    alert("all required fields filled in!")
  } catch {
    alert("please enter all required fields");
  }
}
<form>
  <label>first name </label><input required/>
  <br/>
  <label>last name</label><input required/>
  <br/>
   <label>email ( not required )</label><input />
  <hr>
  <button type="button">submit</button>
</form>

Note: It would be better code if you changed the type of the submit button to submit and changed the event from the above code from click to submit, but I've no idea if there was a reason for your markup or not so I leave that to your discretion.

Upvotes: 1

Reza Saadati
Reza Saadati

Reputation: 5439

You could simply use document.getElementById('myForm').addEventListener('submit', () => submit());

But you need to change <button id="submitButton" type="button" onclick="submit()"> Submit </button> to <button id="submitButton" type="submit"> Submit </button> (as Barmar said) and you also need to close your <form> tag.

Upvotes: 1

phnkha
phnkha

Reputation: 7892

Change button type to "submit" and do validation in onsubmit event handler:

<form onsubmit="return validateMethod()" />

Move all your validation logics into validateMethod, return false if the validation is failed.

Below is an example but I think you should use a jquery lib for this:

function validateMethod(){
  var inp1 = document.getElementById('input1').value;
  var inp2 = document.getElementById('input2').value;
  var inp3 = document.getElementById('input3').value;
  if(!inp1 || !inp2 || !inp3)
  {
     document.getElementById('ErrorMessage').innerHTML = "Please enter all fields";
     return false;
  }
  else{
      //do your code here
      document.getElementById('ErrorMessage').innerHTML = "";
      return true;
  }
}

Upvotes: 1

Related Questions