Validate AngularJS forms by displaying error messages based on the server's response

Within my form, I am checking for the existence of an email address. If the email already exists, I display an error message from the JSON response when the user clicks the submit button.

When the email already exists, I receive a 409 error.

I am looking to update the email input field by adding a message indicating that the email already exists. I am utilizing ng-show="personalInfo.$submitted"

<form name="personalInfo" role="form" autocomplete="off">
<div class="form-group">
    <input type="text" maxlength="11" class="form-control" name="usupiEmail" ng-model="usuAttributes.personalInfo.email" ng-focus="ShowPlaceholder('email')" />
    <label>Email ID</label>

    <div class="error-message" ng-show="personalInfo.$submitted" ng-cloak>
        Please verify your Email.
    </div>
</div>
<button type="submit" class="btn-default" ng-click="usupiUpdateUser()">Next</button>

I have also attempted a different method:

function checkWrongEmail (errorCode) {
    if (errorCode === '409') {
        return true;
    }
    return false;
}

Answer №1

Don't forget to include the ng-app directive in the enclosing div in order for it to work properly. I initially tried manually setting true/false values without success until ng-app was added. Take a look at this JSFiddle example. Removing ng-app from the form element will cause it to stop working. However, with the directive in place, changing ng-show to true/false will yield the expected outcome.

The ng-model you need to use is:

usuAttributes.personalInfo.email

Yet the expression in ng-show is different:

personalInfo.$submitted

Ensure that the model is within scope and consider if defining the model on an input element that is immediately closed may cause issues with variable access (such as whether the error message div has access to it).

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

Install only the necessary components from React Material UI

Is it possible to selectively install specific components from React Material UI? Specifically interested in the Autocomplete component, which can be found at this link. ...

AngularJS: accessing siblings by using the ng-click directive

I am currently working on a list (<ul>), which is being used in multiple instances within different ng-repeat iterations on the same page. The initial list items are generated through ng-repeat, with the second to last item containing a span. When t ...

Issue with React component timer becoming unsynchronized with numeric input field

My number field and countdown timer are not staying synchronized. Even though I can start and pause the countdown, whenever I try to change the number value after pausing, the numbers get out of sync. The gap between the two values keeps growing as time p ...

What is the method of aligning content to the left side in a slick slider?

My slider is set up to display three elements, but I'm having trouble aligning one or two elements to the left instead of centering them. jQuery(function () { jQuery('.slider-blog').slick({ arrows: false, dots: true, ...

The function Router.push("/") is not functioning as expected when called within the pages/index.js file

Currently, I'm utilizing the Next JS next-auth/react library and aiming to direct authenticated users straight to the dashboard. Here's a snippet from my index.js file: import { useRouter } from "next/router"; import Link from "nex ...

Dealing with errors in node.js

Node.js asynchronous functions typically have a callback, with some like fs.writeFile passing an err argument. fs.writeFile('message.txt', 'Hello Node', function (err) { if (err) throw err; console.log('It\'s saved!& ...

The functionality of React-router-dom protected routes seems to be malfunctioning

Understanding Protected Routes in React.js: While looking at the implementation of protected routes, you may notice that 'false' is being directly used in the if statement. However, even with this condition, the page is still accessible. Why doe ...

How can I efficiently load AJAX JSON data into HTML elements using jQuery with minimal code?

I have successfully implemented a script that loads an AJAX file using $.getJSON and inserts the data into 2 html tags. Now, I want to expand the JSON file and update 30 different tags with various data. Each tag Id corresponds to the key in the JSON strin ...

What is the best way to effectively carry out a partial update using ReactJS?

During a recent job interview, the recruiter discussed the importance of handling partial updates and managing application size. As an example, he presented a Single Page Application (SPA) with a size of 8MB, which he deemed less than ideal. He emphasize ...

Adjust the cursor in a contenteditable division on Chrome or Webkit

Is there a way to set the caret position in a contenteditable div layer? After trying different methods and doing some research online, I finally found a solution that works in firefox: function set(element,position){ element.focus(); var range= w ...

Using AJAX to update content based on selected value in a dropdown menu

My challenge lies in ensuring that a select box retains the selected value from a database entry and triggers an onchange event during form editing or updating. While I have successfully populated the data in the select box based on other selections, I a ...

Tips on how to collapse all elements whenever one is being opened in a FAQ card using ReactJS

Clicking on a question reveals its text, and clicking on another collapses the previous one. The issue arises when trying to close an open question by clicking on it again - it doesn't work as intended due to a potential error in the If statement [im ...

Template for Gatsby's alternative layout design

I have recently developed a template for pages that showcase a single product (blog-post.js). However, I now require a different type of page with its own template (category-post.js) to display all products within a specific category. Since the number of c ...

Is it possible to utilize a JS script generated within the body or head of an HTML file directly within CSS code?

As a beginner in webpage development, I have a query regarding the technical aspect. Is it possible to utilize variables from a JavaScript function, which is placed either in the head or body of an HTML file, directly in CSS code to make modifications such ...

What is the best way to use AJAX to update multiple items with a common customer number on a SharePoint list?

Currently, I am facing an issue while attempting to update a SharePoint list using JavaScript/ajax. The script is running smoothly until it reaches the ajax function, where it encounters a failure. Specifically, it mentions that the ItemID is not defined, ...

Forecast the width of an element using JavaScript

Is there a way to display tab elements on a webpage without them automatically wrapping into a new row if there are too many? Instead, I would like an arrow icon to appear at the end of the tabs so users can cycle between tab groups. The challenge is that ...

Tips on transferring a value from one JavaScript file to another JavaScript file

Currently, I am able to pass parameters from one JavaScript file to another using the jQuery method "$.getScript". For example, in the "secondJavaScript.js" file, I use a $.getScript call to invoke the function callMemoPage() from "firstJavaScript.js", p ...

Access and retrieve numerous variables from the data object sent back through an ajax request

When using jQuery to make an ajax call to an MVC controller, the goal is to return multiple variables from the controller. What is the best way to package this data in the controller and then extract it using jQuery? ...

Adjusting the `geometry.setDrawRange` property causes synchronization to become interrupted

In my code, I have implemented a render loop to attach a cube to the end of a line called BuffGeometry line. Everything works well when I set the line's geometry.SetDrawRange to (0, drawRange). line1.geometry.setDrawRange(0, drawCount); line2.geometr ...

The method of iterating over a string in key-value pairs

How can I efficiently loop through a string and extract key/value pairs? The data is provided to me as a single string using the jstorage plugin. I attempted to split the string into an array, but the resulting key/values were not as expected. For exampl ...