Javascript validation form not working with HTML

Question

I am required to complete an assignment that shows basic Javascript form processing. The objective is to have a "details.html" page which checks that all input fields are valid (e.g. Names are all text). I have tried to complete both documents but they just don't seem to be linking correctly:

Nothing is triggering the "validateForm()" function, and any input just passes through on submission, what have I done wrong?

function validateForm() {
  var firstname = document.getElementById("fName").value;
  var lastname = document.getElementById("lName").value;
  var email = document.getElementById("email").value;
  var address = document.getElementById("address").value;
  var postCode = document.getElementById("pCode").value;
  var accepted = document.getElementById("accept").checked;

  var allLetters = /^[a-zA-z]+$/i;
  var allNumbers = /^[0-9]+$/;
  var validEmail = /^(([^<>()\[\]\\.,;:\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,}))$/;
  var validAddress = new RegExp(allNumbers.source + "|" + allLetters.source);


  if (address.match(validAddress) && firstname.match(allLetters) && lastname.match(allLetters) && email.match(validEmail) && address != "" && postCode.match(allNumbers) && accepted) {
    return true;
  } else {
    window.alert("Error! Invalid input in form. Please try again.");
    return false;
  }
}

.header {
  background-color: tomato;
  color: white;
  padding: 2px;
}

.focusPage {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgrey;
  min-height: 600px;
  height: 600px;
  height: auto !important;
}

.userDetails {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  border: 2px solid black;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 20px;
  padding-bottom: 20px;
}

.inputs {
  float: right;
  direction: ltr;
  margin-right: 5px;
}

.acceptTerms {
  font-size: 15px;
  font-family: "Times New Roman", Times, serif;
}

p {
  font-size: 20px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.thePage {
  background-color: black;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="someName" content="someContent">
  <title> Home </title>
  <script type="text/javascript" src="myScripts.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body class="thePage">
  <div>
    <div class="focusPage">
      <div class="header">
        <h1>Welcome user!</h1>
      </div>
      <p>This form will allow you to enter your personal details for storage in our database.</p>
      <p>Be sure to read our <a href="agreement.html">User Agreement</a> before submitting your details</p>

      <ul class="userDetails">
        <form class="userForm" onsubmit="validateForm()" method="post">
          <li><label for="inputNames" required>First Name - </label>
            <label for="inputs"><input type="text" class="inputs" id="fname" name="fname"></label></li>

          <li><label for="inputNames">Last Name - </label>
            <label for="inputs" required><input type="text" class="inputs" id="lname" name="lname"></li>

            <li><label for="inputNames">Email - </label>
            <label for="inputs" required><input type="email" class="inputs" id="email" name="email"></li>

            <li><label for="inputNames">Address number - </label>
            <label for="inputs" required><input type="text" class="inputs" id="address" name="address"></li>

            <li><label for="inputNames">Post code - </label>
            <label for="inputs" required><input type="text" class="inputs" id="pCode" name="pCode"></li>

            <li><label for="inputNames">Additional Detail - </label></li>
          <textarea rows="5" cols="50" class="textfield" placeholder="Add detail here..."></textarea>

          <div class="agreement">
            <input type="checkbox"> <label class="acceptTerms" id="accept">I Accept the User Agreement</label>
          </div>
          <input type="submit" value="Submit">
        </form>
      </ul>
    </div>
  </div>
</body>

</html>

Divvya Mehta · Accepted Answer · 2018-08-12 08:23:52Z

JS: you have mentioned wrong IDs, remember they are case sensitive.

var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;

HTML: You have mentioned required in label tag which won't work, add it to input tag.

   <form class="userForm" onsubmit="validateForm()">
        <li><label for="inputNames" >First Name - </label>
        <label for="inputs"><input type="text" class="inputs" id="fname" name="fname" required></label></li>

        <li><label for="inputNames">Last Name - </label>
        <label for="inputs" ><input type="text" class="inputs" id="lname" name="lname" required></li>

        <li><label for="inputNames">Email - </label>
        <label for="inputs" ><input type="email" class="inputs" id="email" name="email" required></li>

        <li><label for="inputNames">Address number - </label>
        <label for="inputs" ><input type="text" class="inputs" id="address" name="address" required></li>

        <li><label for="inputNames">Post code - </label>
        <label for="inputs" ><input type="text" class="inputs" id="pCode" name="pCode" required></li>

        <li><label for="inputNames">Additional Detail - </label></li>
        <textarea rows="5" cols="50"  class="textfield" placeholder="Add detail here..."></textarea>

        <div class="agreement">
        <input type="checkbox" required> <label class="acceptTerms" id="accept">I Accept the User Agreement</label>
        </div>
        <input type="submit" value="Submit">
    </form>

Collectives™ on Stack Overflow

Javascript validation form not working with HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related