Displaying incorrect field names to the user during Angular validation

I've been tasked with implementing validation in my Angular app, and I need to show a popup listing all invalid fields upon form submission. This directive comes straight from my boss, so I have no say in the matter.

Currently, I have a method that reads the Angular form object to identify all $invalid fields on simple inputs. I then leverage a cached mapping of field names for generating an error string.

However, things get tricky with dynamic tables where users can add rows. While my function can recognize table names as invalid, once one row is valid, all forms are considered valid due to sharing the same name (i.e., 'FeeForm').

Is there any way to tweak this to handle situations when just one row in a table remains invalid? Hoping this request makes sense!

javascriptangularjsvalidation

Answer №1

 let isFieldValid = false;
        $scope.messagesContainer = $('<div>');
        angular.forEach(angular.element(".invalid-cls"), function(item) {
            var element = angular.element(item);
            if (!element.val()) {
                var errorMessage = "";
                $("<div>").addClass("errorField").html(anacReservationMessages.errorMsg.fieldInvalid + element.closest('.row').find('label').html()).appendTo($scope.messagesContainer);
                isFieldValid = true;
                errorMessage = 'Custom error message: ' + element.closest('.row').find('label').html();
            }
        });

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

Learn how to implement the JQuery ReplaceWith function with the resources provided by materials.io icon

I would like the favorite_border icon to switch to the favorite icon when clicked. As we are using material.io and both icons have the class material-icons, I am unsure about how to implement this using jQuery. What steps should I take to achieve this? (w ...

javascripthtmljqueryonclick

Vue alert: Issue with rendering - TypeError: Unable to access property 'NomeStr' as it is undefined

I'm having trouble displaying the 'NameSrt' item array value in my template, and I keep encountering this issue: vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'NomeStr' of undefined" The ...

javascriptjsonrestvue.js

Using jQuery to pass an array as part of an object literal for AJAX data transmission

I'm currently facing an issue with passing a dynamic object to jQuery ajax data in order to mimic the structure of serialized form data. This problem arises when I have a form with inputs using an array for the name, as shown below: <input type="t ...

javascriptjqueryajax

What are some ways to calculate the average of data values in a Vue v-simple-table?

I am working with a v-simple-table. The "TotalAverage" value represents the total average of "ggFinalgrade". How can I retrieve this value? View current image The image I want to display The initial value is 20 calculated as (30+20+10)/3=20 The seco ...

javascriptvue.jsvuetify.js

Ways to organize the information within the Ul and Li elements

I need help sorting the data within <ul> and <li> elements using jQuery. Below is a snippet of my code: <ul id="rootUl"> <li> <div id='title'>MSFT</div> <div id='price'>230</d ...

javascriptjquerysorting

How to modify the background color in Material Ui's datepicker?

Is there a way to customize the background color of my Material UI datepicker modal? To change the colors, you can use the createMuiTheme function from "@material-ui/core": const materialTheme = createMuiTheme({ overrides: { MuiPickersToolbar: ...

javascriptreactjsdatepickermaterial-ui

How to ensure the table fits perfectly on the screen using JQueryMobile and Cordova?

I've been working on a JavaScript function that creates a dynamic page and displays data fetched from a database. However, I've encountered an issue where the displayed data overflows past the width of the mobile screen. Is there a way to ensure ...

javascriptjquerycsscordovajquery-mobile

I am looking to eliminate any special characters from a designated section of a string using Javascript

I have a string that looks like this: var myString = '{"key1":"value1", "key2":"value2", "key3":"value3"}'; My objective is to remove double quotes and other special characters only from value3. Sometimes the string may look like: var myStrin ...

javascriptjqueryajaxjsonstring

The property 'body' cannot be read because it is undefined

I have been attempting to incorporate passport logic into my controllers file, but I encountered an issue. When I place the logic inside the controllers, it gives me an error message saying "Cannot read property 'body' of undefined." However, whe ...

javascriptnode.jsexpress

The requested external js scripts could not be found and resulted in a net::ERR_ABORTED 404 error

import express, { Express, Request, Response } from 'express'; const path = require("path"); import dotenv from 'dotenv'; dotenv.config(); const PORT = process.env.PORT || 5000; const app = express(); app.use(express.static(path.join ...

javascripthtmlnode.js

What causes the Object expected error in jQuery?

Looking for a way to demo horizontal collapse pane with a simple web page that includes html, css, and jquery. <html> <head> <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> <title>Sa ...

javascriptjqueryhtmlcssdebugging

prepend an element before the li element

I am currently working with Angular Material and I am trying to add the md-fab-speed-dial in front of an li element. However, when I attempt to do this, the md-fab-speed-dial appears below the li element, as shown in this image: https://i.sstatic.net/Rqz ...

cssangularjsangular-material

Updating GridView row only if there are changes, the value remains unchanged in JavaScript. Disappointing

Incorporating a gridview (ASP.net) inside an update panel, I included a "Save" button that triggers a loop through all the rows of the grid view to pass data to a stored procedure for updating each row. However, this process proved to be slow and resulted ...

javascriptasp.netvb.nethidden-field

What is the best method to activate a button only when the appropriate radio buttons have been chosen?

Just dipping my toes into the world of javascript. I've created a form with a set of "Yes/No" radio buttons, and I attempted to create a function that will disable the "Submit Form" button if any of the following conditions are met: If one or more r ...

javascripthtmlformsbuttonradio-button

Dealing with the error "Type 'date[]' is not assignable to type '[date?, date?]' in a React hook

I'm attempting to assign a date range but encountering an error that states: Type 'Date[]' is not assignable to type '[Date?, Date?]'. Types of property 'length' are incompatible. Type 'number' is not assignab ...

javascriptreactjstypescriptnext.jsrsuite

Update the radio group model's value within the ngChange function

My form consists of 3 radio buttons with the same name="myNumber" and a function to handle the ng-change event. <form name="myForm" ng-controller="ExampleController"> <label> <input type="radio" ng-model="number" name="myNumber" value ...

angularjsradio-button

Is fs-extra the best tool for working with a .bundle file?

I am attempting to determine whether a specific folder in my project includes a .bundle file and, if it does, relocate it to another location. If the file is not found, I will use a default option instead. The problem I'm encountering is that I am una ...

javascriptnode.jsnpmbundlefs

When clicking on links that are not within the ng-view element, you will be redirected to the

I'm having trouble coming up with a name for this question, but here's my current situation This is the structure of my template: ├── index.html ├── ... ├── account │ ├── index.html │ ├── authorizat ...

javascripthtmlangularjs

Textures have been added by the user in the three.js platform

Click here to access the jsFiddle adaptation of this problem. In my quest to develop a cutting-edge 3D web application, I aim to allow users to choose an image file from their device: <input id="userImage" type="file"/> Once a file is selected, th ...

javascriptopengl-esthree.jswebglcors

Creating a universally accessible handlebars helper in ExpressJS

I have a basic handlebars helper file located in helpers/handlebars.js: var hbs = require('express-handlebars'); hbs.registerHelper("inc", function(value, options) { return parseInt(value) + 1; }); Unfortunately, I am unable to utilize the ...

javascriptexpresshandlebars.jshelper