I am encountering a problem with validating my form using JavaScript

Question

I am encountering a problem with validating my form using JavaScript

I've been working on a project where I'm developing a website using JavaScript, HTML, and CSS to search for movies and purchase tickets. While the basic functionalities are working fine, I'm encountering some challenges with form validation.

Here's how the site functions:

Users search for a movie title and poster image, which is retrieved from the omdb API
Users input their details in a form (name, email, ticket quantity)
Users click "order tickets" and see a thank you message, along with the order history being displayed

If a user fails to enter their name, email, or ticket quantity, the order should not be added to the history. Additionally, even if the page reloads unexpectedly, the order history should persist.

To ensure users provide the necessary information, I have included the required attribute in each field as shown below:

<section id="Order-Form" style="display: none;">
  <h2>Order your tickets</h2>
  <ul>
      <li>
          <label for="User">Please enter your name:</label>
          <input type="text" id="User" value="" required>
      </li>
      <li>
          <label for="Email">Please enter your E-mail address:</label>
          <input type="email" id="Email" value="" required>
      </li>
      <li>
          <label for="Ticket-Amount">Amount of tickets: (You can order a maximum of 8 tickets)</label>
          <input type="number" id="Ticket-Amount" value="" min="1" max="8" required>
      </li>

Below is the code snippet for my page

...

My goal is to enforce completion of the "user, email, and ticket amount" fields while limiting ticket orders to a maximum of 8. I suspect that the lack of logic in the function hookupEventHandlers() may be causing this issue. Can someone assist me in integrating more validation logic into it?

javascript html css

Answer 1

Answer №1

It appears that there are a few issues that need to be addressed.

Concerns with Click Events

Having three click events attached to the same button is not ideal.

document.getElementById("Place-Order").addEventListener("click", processForm);
document.getElementById("Place-Order").addEventListener("click", displayThankYouMessage);
document.getElementById("Place-Order").addEventListener("click", showOrderHistory);

Instead of multiple click event listeners, consider having one function like processForm handle the actions sequentially.

function processForm(){
  // logic implementation...
  
  if(isValid){
    displayThankYouMessage();
    showOrderHistory();
  }
}

If you absolutely require all three functions to be executed simultaneously on button click, it's better to combine them under a single event handler:

document.getElementById("Place-Order").addEventListener("click", ()=>{
  processForm();
  displayThankYouMessage();
  showOrderHistory()
});

Optimizing Form Usage

The <form> element should be utilized properly. Use the native form submit event for field validation without the need for JavaScript handling.

<form>
  <input type="text" required>
  
  <button type="submit">Submit that form!</button>
</form>

Add an event listener for the form's submit event instead of binding to the button's click event for automatic validation upon submission.

document.getElementById("My-Form").addEventListener("submit", (submitEvent)=>{
  console.log(submitEvent)
});

<form id="My-Form">
  <h2>Order your tickets</h2>
  <ul>
    <li>
        <label for="User">Please enter your name:</label>
        <input type="text" id="User" value="" required>
    </li>
    <li>
        <label for="Email">Please enter your E-mail address:</label>
        <input type="email" id="Email" value="" required>
    </li>
    <li>
        <label for="Ticket-Amount">Amount of tickets: (You can order a maximum of 8 tickets</label>
        <input type="number" id="Ticket-Amount" value="" min="1" max="8" required>
    </li>
  </ul>
  
  <button type="submit">Submit that form!</button>
</form>

The browser's built-in validation features cover required fields, email validation, and number input constraints automatically. Custom validations can be implemented as needed, but those details could be addressed separately.

Answer 2

It appears that there are a few issues that need to be addressed.

Concerns with Click Events

Having three click events attached to the same button is not ideal.

document.getElementById("Place-Order").addEventListener("click", processForm);
document.getElementById("Place-Order").addEventListener("click", displayThankYouMessage);
document.getElementById("Place-Order").addEventListener("click", showOrderHistory);

Instead of multiple click event listeners, consider having one function like processForm handle the actions sequentially.

function processForm(){
  // logic implementation...
  
  if(isValid){
    displayThankYouMessage();
    showOrderHistory();
  }
}

If you absolutely require all three functions to be executed simultaneously on button click, it's better to combine them under a single event handler:

document.getElementById("Place-Order").addEventListener("click", ()=>{
  processForm();
  displayThankYouMessage();
  showOrderHistory()
});

Optimizing Form Usage

The <form> element should be utilized properly. Use the native form submit event for field validation without the need for JavaScript handling.

<form>
  <input type="text" required>
  
  <button type="submit">Submit that form!</button>
</form>

Add an event listener for the form's submit event instead of binding to the button's click event for automatic validation upon submission.

document.getElementById("My-Form").addEventListener("submit", (submitEvent)=>{
  console.log(submitEvent)
});

<form id="My-Form">
  <h2>Order your tickets</h2>
  <ul>
    <li>
        <label for="User">Please enter your name:</label>
        <input type="text" id="User" value="" required>
    </li>
    <li>
        <label for="Email">Please enter your E-mail address:</label>
        <input type="email" id="Email" value="" required>
    </li>
    <li>
        <label for="Ticket-Amount">Amount of tickets: (You can order a maximum of 8 tickets</label>
        <input type="number" id="Ticket-Amount" value="" min="1" max="8" required>
    </li>
  </ul>
  
  <button type="submit">Submit that form!</button>
</form>

The browser's built-in validation features cover required fields, email validation, and number input constraints automatically. Custom validations can be implemented as needed, but those details could be addressed separately.

I am encountering a problem with validating my form using JavaScript

Answer №1

Concerns with Click Events

Optimizing Form Usage

Similar questions

Ensure that containers of varying sizes are arranged properly using Bootstrap

Enhance every ajax post request using jQuery

`Next.js project experiencing issues with scroll trigger functionality`

Utilizing HTML5 to target and conceal an entire column dynamically with the help of JavaScript/jQuery

Do you believe that using bower to install HTML5Boilerplate is a beneficial decision?

"Function.click operates successfully when no arguments are given, but encounters issues when arguments are supplied

Guide on programmatically redirecting a user to a different route

Angular dependency injection function

Using jQuery UI Tabs to Dynamically Select a Tab Based on a Link

Is there a way for app.use to identify and match requests that begin with the same path?

Invoking Ajax within a for loop

Retrieve values from the same row using JQuery

Navigation links transforming hues unpredictably

Ways to center items in a row-oriented collection

A guide to personalizing the woocommerce 'best-selling items' widget

When opening a dialog at the bottom of the page, the window will automatically scroll to the top

Guide to using get() and res.sendFile() function to redirect webpages

Service in AngularJS designed specifically for storing and managing SEO metadata

How can I trigger a function again when an anchor link is clicked and received via Ajax?

The image area mapping is displaying infinity instead of a specific numerical value