What is the best way to ensure a multi-page form is validated using HTML5 and JavaScript before progressing to the next page?

Currently, there are two functionalities at play. The submit button is not being recognized while the functionality in JS $(".next").click(function(){..} is working as expected.

HTML This section involves 4 fieldsets. I am attempting to validate each one before moving on to the next page but have been unsuccessful so far.

<div id="sellerregsetup" class="sellerregsetup">
            <!--alert line code-->
              <div class="alert alert-warning alert-dismissible fade show" role="alert">
                  Complete all steps below to start selling
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
              </div>
            <!--End alert line code-->
            <!--testing-->
            <div class="row justify-content-center ">
                <div class="col-md-12 text-center p-0 ">
                    <div class="card px-0 pt-4 pb-0 ">
                        <div class="row">
                            <div class="col-md-12 mx-0">
                                <form id="msform" action="/action_page.php" class="was-validated" >
                                    <ul id="progressbar">
                                        <li class="active" id="account"><strong>Account</strong></li>
                                        <li id="personal"><strong>Personal</strong></li>
                                        <li id="payment"><strong>Payment</strong></li>
                                        <li id="confirm"><strong>Finish</strong></li>
                                    </ul> <!-- fieldsets -->
                                  
                                  // Fieldset content here...

                                    <fieldset>
                                      // Additional fieldset content...
                                    </fieldset>
                                    
                                  // More fieldsets here...

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--testing-->
        </div>

Javascript I have attempted using 'onsubmit' instead of a click event, but it has not been successful. My Javascript skills are limited, and I would appreciate any assistance in identifying the issue or missing elements.



// Javascript code block here...

});

Answer №1

It seems that one of the issues you may be facing is that the form is being submitted before the JavaScript validation takes place. To address this, there are several methods that can help prevent this from occurring. One effective approach is to intercept the click event and stop it from proceeding further

$(".next").click(function(e){
    ...
    e.preventDefault();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use jQuery to showcase all the selected items in a list separated by commas

The code snippet below contains a variable called thatparticularsel which retrieves the value of the checkbox that is currently checked. The alltheselectedvalues variable will return values of all the checked checkboxes. For example, if 2 checkboxes were ...

Webpack bundling only a singular Typescript file rather than all of its dependencies

I'm currently facing a challenge while attempting to consolidate all the files in my Typescript project, along with their dependencies from node_modules, into a single file using Webpack. Despite trying multiple options, it seems that only the entry f ...

Using Thymeleaf to display <TR> elements according to specific conditions

Is there a cleaner way to show content only if one object is not null? No annotations found in this block of code. Here is the template: <div th:if="${currentSkills != null}"> <tr ><!-- Data File --> <td class="col_id"> ...

Filtering data dynamically in a nested array of objects using JavaScript

My task involves utilizing a dynamic array named var arr = ["key1","key2","key3"]. The goal is to filter an array of objects using this array. Here’s an example: var obj = [{"key1":{"key2":{"key3":5}}},{"key1":{"key2":{"key3":7}}},{"key1":{"key2":{"key3 ...

Having trouble with a malfunctioning part of the API in my NodeJS code. Any suggestions on how to resolve the issue

I'm currently working on developing a REST API in NodeJS for an online store. Here's a snippet of my code for handling POST requests: router.post('/', (req, res, next) => { const order = new Order({ _id: new mongoose.Typ ...

Exploring the wonders of ReactJs in the ComponentDidMount

I am encountering some issues with my app. Although I am not a Javascript expert, it seems like an easy fix to me. I need to make the following call: this.props.onNavStyleChange(NAV_STYLE_FIXED); to change the navigation when this page loads. However, I ...

The Importance of Node JS Callback Functions

Struggling to grasp the concept of callbacks? Check out this code snippet for authentication using MySQL. function authenticate(username, password, callback) { var query = "SELECT * from mydb.users where username='" + username + "'and BINARY ...

The process of inserting a CSS file into a CodeIgniter project

Hey there, I'm struggling to load a CSS file in Codeigniter. Can someone please guide me on how to do it? Below is an overview of the Codeigniter sample Directory Structure: views models controllers assets a) stylesheets b) javascript c) images Conf ...

Ways to examine the origin of an image based on the attributes of a React component that I have passed as a prop?

I'm facing an issue where I can't use the component's prop to set the src of an image that I imported from a file path in my component's JavaScript file. I have tried different syntaxes but none seem to be working. Here are the formats ...

What is the best way to update my lowdb database directly from the frontend in a next.js application?

As a hobby programmer with experience in React and Firebase, I have recently started using Next.js. I'm curious if I can utilize it as a JSON-based database for local applications on my Raspberry Pi. I have successfully set up LowDB to access data fro ...

What is the method for writing the following line in CSHTML server-side code?

<script> function a(id) { var table = document.getElementById(id); .... } </script> @{ //Is there a way to rewrite the line "var table = document.getElementById(id)" here within the ser ...

Gulp does not generate any files

Hey there, I'm brand new to using node.js and coding in general. I recently attempted to convert SCSS to CSS using gulp. My gulpfile.js seems to be correct, but when I try running "gulp styles" in the node.js command prompt, I receive the following ou ...

Incorporate real-time options into a select menu using ajax

I'm attempting to dynamically update options within a dropdown using PHP, jQuery, and AJAX. Firstly, I make an AJAX call when the initial control (taglist) undergoes a change: $('#taglist').change(function(){ $.post('../includes/ ...

Encountering the issue of "Cannot read properties of undefined" while attempting to pass data to a prop

Currently, I am developing a Vue application that heavily relies on charts. The issue lies in the fact that I am fetching data from the database individually for each chart component, resulting in multiple calls and a slower page load time. I am looking to ...

Is it possible to modify the CSS of a single class when hovering over a child class of a different and unrelated class?

I am struggling with CSS combinators, especially when dealing with nested div, ul, and li elements. My issue involves changing the CSS of a div with the class "H" when hovering over li elements with the class "G". Since all of this is contained within a s ...

Encountering a NPM error when trying to launch the server using ng serve

I encountered an error : ERROR in /opt/NodeJS/FutureDMS/src/app/app.module.ts (5,9): Module '"/opt/NodeJS/FutureDMS/src/app/app.routing"' has no exported member 'APP_ROUTE'. Within my code, I have utilized arrow function in the loadCh ...

Unresolved Issue: Jquery Modal Fails to Activate on Subsequent Click for Ajax-

When I make an Ajax call, I load HTML into a div. This HTML content contains a jQuery modal that opens when clicked. However, on the first click, the modal opens correctly. On subsequent clicks, I receive the following error in the console: Uncaught Type ...

Using "-webkit-overflow-scrolling: touch" can cause issues with the CSS 3D perspective rendering

Looking for a solution specifically for iOS Safari Using -webkit-overflow-scrolling: touch seems to disrupt the 3d perspective on iOS devices. Check out the demonstration on CodePen. HTML <div class="pers"> <div class="scroll"> <di ...

Ways to assign an identification attribute to HTML elements within innerHTML

Utilizing Ajax in conjunction with php $("#test1").click( .... function(data){ document.getElementById("test2").innerHTML=data; } ) php will return the data echo "<input type='text' id='test'>"; Seeking adv ...

Tips for accessing the most recent embedded document added using the push() method

I'm having difficulty determining the feasibility of this situation. While using the mongoose blog example to illustrate, my specific use case is a bit more complex: var Comments = new Schema({ title : String , body : String , date ...