Validation of a multi-step form ensures that each step is filled out

I'm completely new to Angular and I'm attempting to implement validation in my form. The form structure was not created by me and is as follows:

<div>
    <div ng-switch="step">
        <div ng-switch-when="1">
            <h1>Identity</h1>
            <form name="steponeForm" ng-submit="submitForm(steponeForm.$valid)" novalidate>
                <input type="submit" ng-click="next()" value="next" />
                <input ng-model="application.lastName" required type="text" placeholder="Last name" name="app-name" id="app-name" />
                <input ng-model="application.firstName" type="text" placeholder="First name" name="app-firstname" id="app-firstname" />
                ....
                <input type="submit" ng-click="next()" value="next" />
            </form>
        </div>
        <div ng-switch-when="2">
            <h1>Studies</h1>
            <form>
                <input type="submit" ng-click="previous()" value="previous" />
                <input type="submit" ng-click="next()" value="next" />
                <fieldset>
                    <legend>Lower secondary studies</legend>
                    <button id="moreLowerSecondaryStudies" more-studies>+</button>
                </fieldset>
                <fieldset>
                    <legend>Higher secondary studies</legend>
                    <button id="moreHigherSecondaryStudies" more-studies>+</button>
                </fieldset>
                ....
                <input type="submit" ng-click="previous()" value="previous" />
                <input type="submit" ng-click="next()" value="next" />
            </form>
        </div>
        <div ng-switch-when="3">
            <h1>Knowledge</h1>
            <form>
                <input type="submit" ng-click="previous()" value="previous" />
                <input type="submit" ng-click="next()" value="next" />
                <fieldset>
                    <label for="app-interests-personal">Other matters of personal interest</label>
                    <textarea id="app-interests-personal" ng-model="application.interestsPersonal">

                    </textarea>
                </fieldset>
                ....
                <input type="submit" ng-click="previous()" value="previous" />
                <input type="submit" ng-click="next()" value="next" />
            </form>
        </div>
        <div ng-switch-when="4">
            <h1>Professional experience</h1>
            <form>
                <input type="submit" ng-click="previous()" value="previous" />
                <input type="submit" ng-click="next()" value="next" />
                <fieldset>
                    <legend>Data with regard to your professional life, beginning with your last employer.</legend>
                    <button id="more-experience" more-experience>+</button>
                </fieldset>
                ....
                <input type="submit" ng-click="previous()" value="previous" />
                <input type="submit" ng-click="next()" value="next" />
            </form>
        </div>
        <div ng-switch-when="5">
            <h1>Miscellaneous</h1>
            <form>
                <input type="submit" ng-click="previous()" value="previous" />
                <input type="submit" ng-click="finish()" value="save" />
                <fieldset>
                    <legend>Have you already applied with VK?</legend>
                    <input ng-model="application.alreadyApplied" type="radio" name="app-already-applied" value="no" id="app-already-applied-no" />no<br>
                    <input ng-model="application.alreadyApplied" type="radio" name="app-already-applied" value="yes" id="app-already-applied-yes" already-applied />yes<br>
                    <input ng-model="application.alreadyAppliedWhat" type="text" placeholder="For what vacancy?" name="app-already-applied-what" id="app-already-applied-what" disabled />
                    <input ng-model="application.alreadyAppliedWhen" type="text" placeholder="When?" name="app-already-applied-when" id="app-already-applied-when" disabled />
                </fieldset>
                ....
                <input type="submit" ng-click="previous()" value="previous" />
                <input type="submit" ng-click="finish()" value="save" />
            </form>
        </div>
    </div>
</div>

This snippet is from the StepController which can be found in controllers.js:

function StepController($scope, $http, $routeParams)
{
    $scope.step = 1;

    $scope.next = function(){
        $scope.step += 1;
        window.scrollTo(0,0);
    }

    $scope.previous = function(){
        $scope.step -= 1;
        window.scrollTo(0,0);
    }

    $scope.finish = function(){
        $http.post('new-submission', { id: $scope.job_id, application: $scope.application })
            .success(function(data, status, headers, config){
                window.location.href = data.redirect_url;
            });
    }
}

My main concern now is how to efficiently validate the specific form for each step when the "next" button is clicked.

Answer №1

Make sure to include the name attribute in your form

<form name='myForm'>

In angular, you can check validation using {{myForm.$valid}} and/or {{myForm.$error | json}}

Check out Angular documentation for forms here


You have flexibility in how you implement validation, for example;

ng-click="next(myForm.$valid)"

  $scope.next = function($valid){
    alert('Is Valid? ' + $valid);
    $scope.step += 1;
    window.scrollTo(0,0);
 }

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

Placing elements from an array into a customized output

Currently, I am dealing with a unique output: dAmn_Raw('send chat:Sandbox\n\nmsg main\n\nthismessage'); In my code, there exists a variable: myvariable that stores a random value selected from an array I formulated. The cha ...

What could be causing my createElement to double in reactjs useEffect()?

My current dilemma is rather straightforward, focusing solely on the useEffect() parts without delving into the other codes. Whenever I hover over the text, my custom mouse cursor text ends up doubling. Here are the code snippets: const cursorIntro = ...

It appears that Nodemon has stopped functioning correctly. To use Nodemon, simply input the following command: nodemon [nodemon options]

nodemon has always been reliable for me. I used to run nodemon server and it would automatically watch for updates and restart the server file. However, lately when I try to do this on my Windows cmd, I get the following message: Usage: nodemon [nodemon o ...

Utilizing AngularJS to access the corresponding controller from a directive

When I have HTML structured like this... <div ng-app="myApp"> <div ng-controller="inControl"> I enjoy sipping on {{beverage}}<br> <input my-dir ng-model="beverage"></input> </div> </div> a ...

The event handler is not being triggered when selecting the tag

Currently working on a project where I am utilizing vanilla HTML/CSS/JS. My goal is to hide all items on a page initially, set a default option in a select tag, display only the element with the selected ID, and allow the user to choose different time peri ...

The error message "TypeError: Unable to access property of undefined when using web sockets"

Exploring Isomorphic framework for React and integrating Pusher for websockets communication. I'm encountering difficulty accessing the state within the componentDidMount() function. class TopbarNotification extends Component { state = { vis ...

Error in the Syntax of Project Image Slider

I'm encountering an issue with a WordPress script called Project Slides. Initially, this script was working fine but suddenly stopped. After investigating in the console, I found the following error: VM138 plupload-image.js?ver=4.2.2:67 Uncaught Err ...

Can ng-click be injected into an ng-bound HTML div in an Angular application?

In my controller, I am returning HTML using the following function: $scope.filterLocation = function(obj) { var loc = $filter('filter')( $scope.locationss, {'product_code': obj}); var htmlstring = ""; angular.forEach(loc, function(v ...

Altering the URL of Nuxt assets in the generated HTML documents

My goal is to create a static website using Nuxt, but I want it to function without the need for a server, simply by opening the HTML files in a browser. One issue I am encountering relates to the URLs of the assets imported within the HTML files. I requir ...

A problem encountered in specific JavaScript code

As a newcomer to JavaScript, I have encountered an issue while trying to run this script: <html> <head> <title>Exploring javascript functionalities</title> </head> <body> <p id="demo">I ...

Errors have been observed when using JavaScript variables that begin with the symbol $

For the longest time, I've used JavaScript variable names that begin with $ to signify that they hold jQuery values. For example: $buttons = $( 'button' ); However, a couple of nights ago, I encountered an issue when loading the page in the ...

error encountered when working with date arrays in JavaScript

I find myself perplexed by this particular issue. Although the following code snippet appears to function correctly, it exhibits some peculiar behavior. var tmpcurdte = eval(dataSource[i].startDate); tmpcurdte.setDate(tmpcurdte.getDate() + 1); while (tm ...

Reading multiple files in NodeJS can be done in a blocking manner, and then the

When retrieving a route, my aim is to gather all the necessary json files from a directory. The task at hand involves consolidating these json files into a single json object, where the key corresponds to the file name and the value represents the content ...

Error: Unable to locate module 'firebase' in the directory path 'D:gmail-reactsrc'

After installing Firebase and logging in, I encountered an issue where the screen was completely white after importing it. The code below is from the firebase.js file: import firebase from 'firebase' // Import the functions you need from the SD ...

Invoke the method in customButton component of fullcalendar

I've integrated a custom button into my fullcalendar: ngOnInit() { this.calendarOptions = { customButtons: { custom1: { text: 'Add event', click() { this.openModal(); } } }, height: 600, editable: t ...

How to dynamically reference an input textbox ID using javascript or jquery

I have a button titled: GridView1__ctl2_AddButton0 While I can extract the middle part "ctl2" (and variations for each row), I am trying to use it to populate a textbox among many with similar names. GridView1__ctl2_txtStormTimeOn Currently, I could ac ...

Searching through multiple columns in datatables

I encountered an issue with searching multiple columns in my serverside datatables. Individual column searches work fine, but when trying to search on more than one column simultaneously, the filter does not function as expected. For example, searching by ...

Error: An unidentified SyntaxError occurred with an unexpected token < within an anonymous function displayed on the console

In the process of developing an upload file application. The implementation involves AJAX and PHP. Everything functions smoothly on the localhost, but upon transferring it to the web server, a specific error is encountered: Uncaught SyntaxError: Unexpe ...

How to Align Bootstrap 4 Navbar Brand Logo Separate from Navbar Toggler Button

Can anyone help me with center aligning navbar-brand? When I right align navbar-toggler for mobile devices, it causes the logo to be off-center. Is there a way to independently align these two classes, and if so, how can I achieve this? <nav class="n ...

Passing the state variable from a hook function to a separate component

I have a hook function or file where I need to export a state named 'isAuthenticated'. However, when I try to import this state using import {isAuthenticated} from '../AuthService/AuthRoute', I encounter an import error. My goal is to m ...