What could be the reason for the absence of warning and success messages in this code?

When using AngularJS to validate an email form, I encountered an issue where the "spans" do not display when the form is either invalid or valid. This problem occurs when I remove ng-app="" from the body tag, causing the spans to always show up regardless of the validity of the form.

<!DOCTYPE HTML>
<html lang = "en">
<meta charset = "utf-8">
    <head>

        <title>Contact Us</title>

        <link rel = "stylesheet" href = "../style/style.css"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src = "../js/callmail.js"></script>

    </head>

    <body ng-app = "">

        <form name = "contact">

            <label for = "subject" class = "control-label">Subject:</label>
            <input id = "subject" ng-model = "subject" required/>
            <span class = "warning" ng-show="contact.subject.$touched && contact.subject.$invalid">Please enter a subject!</span>
            <span class = "success" ng-show="contact.subject.$touched && contact.subject.$valid">Valid!</span>

            <br/>

            <label for = "body" class = "control-label">Body:</label>
            <input id = "body" ng-model = "body" required/>
            <span class = "warning" ng-show="contact.body.$touched && contact.body.$invalid">Your email must have a body!</span>
            <span class = "success" ng-show="contact.body.$touched && contact.body.$valid">Valid!</span>

            <br/>

            <label for = "signature" class = "control-label">Return Email:</label>
            <input id = "signature" ng-model = "signature" type = "email" required/>
            <span class = "warning" ng-show="contact.signature.$touched && contact.signature.$invalid">Please enter a valid return email address!</span>
            <span class = "success" ng-show="contact.signature.$touched && contact.signature.$valid">Valid!</span>

            <br/>

            <button ng-disabled = "contact.$invalid" id = "sendmail" type = "submit" class = "btn btn-success">Submit</button>

        </form>

    </body>
</html>
javascripthtmlcssangularjsvalidation

Answer №1

Assign a unique name attribute to each input element and utilize this name instead of the id attribute to target the span tags.

Instead of:

<input id = "subject" ng-model = "subject" required/>

Use:

<input id = "subject" name = "subject" ng-model = "subject" required/>

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

Issue with SweetAlert2 cancel button being unresponsive while an ajax request is in progress

I have a custom function triggered when a dropdown item is selected, which triggers a sweetalert2 popup. Here's the function: function SwalPopup(ip, method) { var methodmsg = method.charAt(0).toUpperCase() + method.slice(1); swal.fire({ ...

javascriptajaxsweetalert2

Trouble arises when attempting to categorize an array of objects in JavaScript

My array consists of various objects: [{id: 1, name: 'Apple', category: 'Fruit'} {id: 2, name: 'Melon', category: 'Fruit'} {id: 3, name: 'iPhone', category: 'Phone'} {id: 4, name: 'Samsung Ga ...

javascriptreactjs

The issue I'm currently facing is that the React DOM is not refreshing or updating, despite

I am having trouble using map() to iterate over and update my DOM in React. Despite checking the syntax, my DOM is not reflecting the changes. Any assistance on this issue would be greatly appreciated. Thank you. App.js class App extends Component { ... ...

javascriptreactjsreact-domreact-state-management

Getting Started with NextJs and Firestore Setup

Recently, I have been incorporating Firebase into my NextJs project. I've set up a file called initFirebase.tsx for the server-side implementation. import * as Sentry from '@sentry/nextjs'; import * as admin from 'firebase-admin'; ...

javascriptfirebasegoogle-cloud-firestorenext.jsfirebase-admin

When attempting to update the name of the HTML input field, PHP file upload may

When it comes to HTML and PHP, I am still learning the ropes. Utilizing code from a source like https://gist.github.com/taterbase/2688850, I attempted to set up a file upload page on my web server by creating an "uploads/" folder and granting chmod 777 per ...

phphtmlfile-upload

How to implement form validation using jQuery AJAX in CodeIgniter

Is there a way to perform form validation in CodeIgniter without refreshing the page? Currently, I have the following setup: $config = array( array( 'field' => 'c_name', ' ...

ajaxformscodeignitervalidation

What could be the reason behind the failure of $cookieStore.get() in retrieving the value?

I am currently testing the cookie functionality in AngularJS. I'm encountering an issue where the console is returning 'undefined' when trying to retrieve a saved value from the cookie using $cookieStore.put(). It seems to work fine when set ...

javascriptangularjs

What does drizzle.config.ts serve?

I've been working on setting up a project with Drizzle + Next.js + Vercel for my serverless backend. To utilize the ORM API of Drizzle, I reference my database in the following way: import { drizzle } from "drizzle-orm/vercel-postgres"; impo ...

javascriptnext.jsconfigurationverceldrizzle

Requests in Node.js may unexpectedly stall and remain unresolved until the server is restarted

I've encountered a strange and seemingly sporadic issue with our web application that I can't seem to resolve through debugging. The app runs smoothly for varying durations, ranging from 10 minutes to 6 hours, but then all of a sudden, any remote ...

javascriptnode.jsunixexpresssocket.io

Troubleshooting problems with scrolltop offset top

After trying to implement a scroll function to target a specific div on the page, I have encountered an issue. My code includes scrollTop: $(target).offset().top-250 for adjusting the position in the mobile view so that the section appears below the head ...

jqueryhtml

Unable to save information in the database using Json in asp.net

I'm having trouble saving my data in a database using JSON. The code I'm currently using doesn't display any errors, but it also doesn't save the data. Can someone please help me out? I am new to working with JSON. function myfun() { ...

javascriptjqueryasp.netjson

Selection change triggering Ajax call does not work

The dropdown selection change event does not trigger when the function includes an ajax call. However, if the function only contains an alert, it works fine. Below is the code snippet: <div class="col-md-6"> <div class="form ...

javascriptjqueryajaxasp.net-mvc

Exploring alternatives to ref() when not responsive to reassignments in the Composition API

Check out this easy carousel: <template> <div ref="wrapperRef" class="js-carousel container"> <div class="row"> <slot></slot> </div> <div class=&q ...

javascriptvue.jsvuejs3vue-composition-api

MongoDB and JS code not processing the conditional statement

Here is the code snippet I am currently working with: if (checkUserExists(serverID, userID) === null) { console.log("was null"); addNewUserToDB(serverID, userID, username); } I am aiming for it to run only if mongoDB cannot find a match for both ...

javascriptmongodb

Can the website be inaccessible to human users in any way?

In my PHP programming journey, I encountered a challenge that I need help with. I created a function to retrieve data via ajax in my PHP code, but realized that users can manipulate the site by manually entering the ajax request link or altering its valu ...

javascriptphpjqueryajax

Return to the previous URL after executing window.open in the callback

I need help redirecting the callback URL back to the parent window that initially called window.open. Right now, the callback URL opens inside the child window created by the parent. Here's the scenario: The Parent Window opens a child window for aut ...

javascripthtmlangularjs

Tips for turning off the full screen feature in Google’s web viewer

I have been using an embedded Google Viewer with iframe to display a PDF. I am trying to remove the full-screen popout feature from it and disable right-click within the iframe. I have tried several solutions but nothing seems to work. The URLs for my PDF ...

jquerycssiframe

Traversing a multidimensional array with jQuery

In my quest to iterate through a multidimensional array, I encountered the need to remove the class "list" from the divs within the array. However, there could be multiple divs with this class on my site. My initial approach involved using two for-loops, ...

javascriptjqueryhtmlcssarrays

Angular's alternative to JQUERY for handling file uploads and multipart forms

My multipart form includes a simple file upload: https://i.sstatic.net/sRFH7.png I would like to customize it to appear like this: https://i.sstatic.net/dMiDS.png Although my initial solution works well, here is the code snippet: HTML snippet <div ...

javascriptjqueryangularjs

How to use jQuery to delete the final table in an entire HTML document

This situation is really frustrating: When I make a jQuery Ajax call, the success callback returns an entire HTML page. The returned page looks like this: <html> <head> <title>Title</title> <body> <table></table> ...

javascriptjqueryajax