What is the proper way to connect my JavaScript code to my HTML form?

Question

What is the proper way to connect my JavaScript code to my HTML form?

My JavaScript function is not working properly when I try to submit a form on my website.

<form onsubmit="validateRegistration()">

    <p>
     // Email registration
    <input type="text" id="e-mail" placeholder="Email" />
  </p><p>
    // Password registration
    <input type="text" id="pswd" placeholder="Password" />
  </p>
    <br>
    <input type="submit" class="submit">
  </form>

I have made multiple attempts to link the JavaScript code with the HTML form, but whenever I click the submit button, none of the error alerts are displayed as expected.

// HTML
<form onsubmit="validateRegistration()">

    <p>
    <input type="text" id="e-mail" placeholder="Email" />
  </p><p>
    <input type="text" id="pswd" placeholder="Password" />
  </p>
    <br>
    <input type="submit" class="submit">
  </form>

// JavaScript 
// Main Function
function validateRegistration(){
  var email = document.getElementById('e-mail').value;
  var password = document.getElementById('pswd').value;

  var emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

  var emailResult = emailRegex.test(email);

  if(emailResult == false){
    alert("Please enter a valid email address");
    return false;
  }

  var lowerCaseLetters = /[a-z]/g;
  if(!password.match(lowerCaseLetters)) {
    alert("Password must contain at least one lowercase letter!");
    return false;
  }

  var upperCaseLetters = /[A-Z]/g;
  if(!password.match(upperCaseLetters)){
    alert("Password must contain at least one uppercase letter!");
    return false;
  }

  
  var numbers = /[0-9]/g;
  if(!password.match(numbers)){
    alert("Password must contain at least one number!");
    return false;
  }

  var specialCharacters = /[!@#$%^&*(),.?":{}|<>]/g;
  if(!password.match(specialCharacters)){
    alert("Password must contain at least one special character!");
    return false;
  }

  if(password.length < 8){
    alert("Password must be at least 8 characters long");
    return false;
  }
}

I am expecting the JavaScript code to display error messages when an invalid password is submitted and to show a "Thank you" message when both a valid email and password are submitted correctly.

javascript

Answer 1

Answer №1

Oluwafemi suggested putting an event listener on the 'submit' event instead, which could be more efficient. Placing the event on the submit button allows you to halt it during the click event without triggering the form submission. By updating your code in this way, troubleshooting may be easier in the future.

Adjusting your code is a simple task. First, update your form structure as shown below:

<form id="form">
    <p>
    <input type="text" id="e-mail" placeholder="Email" />
  </p>
  <p>
    <input type="text" id="pswd" placeholder="Password" />
  </p>
  <br />
    <input id="submitButton" type="submit" class="submit">
  </form>

Add the following code after your javascript function:

document.querySelector("#submitButton").addEventListener("click", function(event) {
         event.preventDefault;

         validateReg()
}, false);

This snippet prevents the form submission and performs the necessary validation checks. For further details, refer to the Mozilla developer site.

To handle successful validations, include

document.getElementById('form').submit();

in any return statement set to true.

The updated code sets the submit button as default functionality, with failing checks returning false:

//Javascript 
//Main Function
function validateReg() {

  var email = document.getElementById('e-mail').value;
  var password = document.getElementById('pswd').value;

  var emailRGEX = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

  var emailResult = emailRGEX.test(email);

  //validate Email
  if(emailResult == false){
    alert("Please enter a valid email address");
    return false;
  }

  //validate lower case
  var lowerCaseLetters = /[a-z]/g;
  if(password.match(lowerCaseLetters) == null) {
    alert("Password needs a lower case!");
    return false;
  }

  //validate upper case
  var upperCaseLetters = /[A-Z]/g;
  if(password.match(upperCaseLetters) == null){
    alert("Password needs an upper case!");
    return false;
  }

  //validate numbers
  var numbers = /[0-9]/g;
  if(password.match(numbers) == null){
    alert("Password needs a number!");
    return false;
  }

  //validate special characters
  var special = /[!@#$%^&*(),.?":{}|<>]/g;
  if(password.match(special) == null){
    alert("Password needs a special character!");
    return false;
  }

  if(password.length < 8){
    return false;
  }

  document.getElementById('form').submit();
}

Answer 2

Oluwafemi suggested putting an event listener on the 'submit' event instead, which could be more efficient. Placing the event on the submit button allows you to halt it during the click event without triggering the form submission. By updating your code in this way, troubleshooting may be easier in the future.

Adjusting your code is a simple task. First, update your form structure as shown below:

<form id="form">
    <p>
    <input type="text" id="e-mail" placeholder="Email" />
  </p>
  <p>
    <input type="text" id="pswd" placeholder="Password" />
  </p>
  <br />
    <input id="submitButton" type="submit" class="submit">
  </form>

Add the following code after your javascript function:

document.querySelector("#submitButton").addEventListener("click", function(event) {
         event.preventDefault;

         validateReg()
}, false);

This snippet prevents the form submission and performs the necessary validation checks. For further details, refer to the Mozilla developer site.

To handle successful validations, include

document.getElementById('form').submit();

in any return statement set to true.

The updated code sets the submit button as default functionality, with failing checks returning false:

//Javascript 
//Main Function
function validateReg() {

  var email = document.getElementById('e-mail').value;
  var password = document.getElementById('pswd').value;

  var emailRGEX = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

  var emailResult = emailRGEX.test(email);

  //validate Email
  if(emailResult == false){
    alert("Please enter a valid email address");
    return false;
  }

  //validate lower case
  var lowerCaseLetters = /[a-z]/g;
  if(password.match(lowerCaseLetters) == null) {
    alert("Password needs a lower case!");
    return false;
  }

  //validate upper case
  var upperCaseLetters = /[A-Z]/g;
  if(password.match(upperCaseLetters) == null){
    alert("Password needs an upper case!");
    return false;
  }

  //validate numbers
  var numbers = /[0-9]/g;
  if(password.match(numbers) == null){
    alert("Password needs a number!");
    return false;
  }

  //validate special characters
  var special = /[!@#$%^&*(),.?":{}|<>]/g;
  if(password.match(special) == null){
    alert("Password needs a special character!");
    return false;
  }

  if(password.length < 8){
    return false;
  }

  document.getElementById('form').submit();
}

Answer 3

Answer №2

An effective approach is to include an event listener in your JavaScript file that listens for the 'submit' event before executing your function.

Additionally, make sure to link your JavaScript file within a script tag in your HTML document. This should be successful provided your logic is accurate.

Answer 4

An effective approach is to include an event listener in your JavaScript file that listens for the 'submit' event before executing your function.

Additionally, make sure to link your JavaScript file within a script tag in your HTML document. This should be successful provided your logic is accurate.

What is the proper way to connect my JavaScript code to my HTML form?

Answer №1

Answer №2

Similar questions

Sending data from a Node.js backend to a React.js frontend using res.send

Steps for performing position by position sorting within an array of arrays of numbers using the Lodash library

Error: Property 'barcodeScanner' is not readable

Vue js parent-child communication using event bus fails to function

The function 'create' is not a recognized property within the 'Completions' type

After my jQuery functions are executed, my CSS rules are loaded

Updating Cart Array in Angular 4 when Adding a New Item

The index.html file is failing to load/render when using app.js

When utilizing the built-in filter in Angular 2 ag-grid, the Clear Filter button efficiently removes any text from the filter box without needing to refresh the

JSON failing to show all values sent as a string

Alternate routing based on conditions in Angular

Dealing with multi-line strings in Javascript

What is the best way to trigger a refresh callback on Angular datatable pagination after updating the data

The output of PHP is not being captured by Ajax

"Deploying code to Heroku using Node.js: A guide to adding git commits directly on

Updating and Preserving Content in Angular

A guide on invoking a function within a nested or local function

Create dynamic connections between animated sprites using Three.js

"Activate the parent window by navigating using the accesskey assigned to the href

Sequelize encountered an error: getaddrinfo ENOTFOUND (even though the address is correct)