AngularJS form validation issue persists upon submission

I've been working on validating a form and displaying the validation result directly under the text fields upon form submission.

Unfortunately, I've encountered an issue where I can't validate the input field on submit, but I am able to do so onBlur. I've tried different approaches for both onSubmit and onBlur methods. Below are the codes for onSubmit and onBlur respectively:

Here is my code snippet for this scenario:

formSumbit.html

<!DOCTYPE html>
<html lang="en" ng-app="testapp">
... // (Code continues here)

Despite the challenge with onSubmit validation, I have managed to successfully implement onBlur validation. The working code snippet for onBlur event is provided below:

<!DOCTYPE html>
<html lang="en" ng-app="testapp">
... // (Code continues here)
javascriptformsvalidationangularjs

Answer №1

Give this a shot:

Illustration

<form name="inputForm" ng-app>
 <div class="control-area" ng-class="{true: 'warning'}[entered && input.email.$invalid]">
     <label class="control-label" for="email">Enter your email address</label>
      <div class="controls">
            <input type="email" name="email" ng-model="email" required />
            <span class="help-inline" ng-show="entered && input.email.$error.required">Fill in the field</span>
            <span class="help-inline" ng-show="entered && input.email.$error.email">Email not valid</span>
        </div>
    </div>

    <button type="submit" class="btn btn-primary btn-large" ng-click="entered=true">Submit</button>
</form>

Answer №2

Don't forget to assign the controller to the main div element

<div ng-controller="registerController">

Take a look at this demo http://example.com/demo

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

Transform JavaScript array into PHP array

Seeking assistance! Currently, I am in the process of extracting content by class name using JavaScript and storing it into an array. My goal is to display this array as a drop-down list using PHP on a .php page. Here's what I have accomplished so fa ...

javascriptphphtmlarrays

Angular UI-Router has a quirk where it may execute a controller twice upon loading if it is defined within the

Every time I run the code in my controller, it seems to be executed twice, resulting in duplicate outputs in the console.log window of Chrome Dev Tools. questions.html <div ng-controller="questionController as vm"> </div> questionController. ...

javascriptangularjsangular-ui-router

I am struggling to save a second variable that I received into my function

There is a function in my code that takes two values as input, both formatted like this: MyFunction("word1","word2") However, when the function receives the values, it looks like this: MyFunction(test1,test2){} The issue I'm facing is with storing ...

javascriptstringfunction

Is there a way to modify the title of a website upon entering the webpage and then updating it when moving to a new page?

I'm encountering an issue with changing the website title during two specific processes. Upon entering a webpage, the title is modified using the following code: <script type="text/javascript"> $(document).ready(function() { docum ...

javascripthtmljquery

Best practices for integrating Vuex with Vuelidation

Currently, I am developing a Vue front end for an application that necessitates storing all form data locally before sending it to the backend in case of any network connectivity issues. To achieve this, I am using Vuex to manage and retain all the necessa ...

javascriptvue.jsvuejs2vuexvuelidate

What could be the reason behind jQuery.ajax not being able to return JSON data within a loop

I am currently attempting to iterate through an array in JavaScript with array values appended to the end of a variable named "url" in order to retrieve the corresponding JSON data from a website. However, it seems to be returning an error message: {"Error ...

javascriptjqueryarraysjson

Getting a JSON response from a JSP page through an AJAX request

I'm encountering an issue with a JSP page that is supposed to send a JSON response when requested through an AJAX call. However, the response is being directed to the error part of the AJAX call instead of the success part. Below is the code in my JS ...

javascriptjqueryjsonajaxjsp

What are the steps to integrate the Vimeo oEmbed API into a nodejs application?

I am currently developing a react web application that allows users to upload videos to Vimeo and access them as needed. I have managed to successfully upload the videos privately by utilizing the hide from Vimeo privacy setting and embedding them on speci ...

javascriptnode.jsreactjsvimeovimeo-api

Value-detecting button

Here is some HTML code: <input type="text" id="textbox" value=""> <span id="currenticon">Test</span> <a href="#" id="button">Set</a> <script src="script.js&qu ...

javascripthtml

Why isn't tinymce functioning properly within ng-view?

I'm currently working on a MEAN project. For CMS editing at the back end, I require tinymce. Although I'm using ng-view for each page's content, tinymce doesn't seem to work inside ng-view. Everything works fine in my index.html file ...

angularjsnode.js

Utilizing Mongoose aggregation for counting and grouping operations

I am trying to search for records that correspond to a specific URL but want to return a customized object instead. Here is the model I am working with: const ReactionSchema = mongoose.Schema({ url: { type: String, required: true }, emoji: ...

javascriptmongodbmongoose

My Node setup is not displaying my scene with the THREE.js Software Renderer

Struggling to incorporate 3d graphics into Node.js environment, I stumbled upon the Software Renderer after exhaustive research. The renderer is up and running, but I am facing difficulties in rendering my scene. The issue lies in the fact that my 3d obje ...

javascriptnode.jsexpressthree.jswebgl

Deleting the v-stepper-header number with Vuetify

I have been searching everywhere in an attempt to resolve this issue, but I have not been able to find a solution. Is there a way to remove the numbers from the v-stepper-header? - Using Vuetify version: 1.5.6 Current: https://i.stack.imgur.com/gLxFX.png ...

javascriptvue.jsvuejs2vue-componentvuetify.js

What is the process for retrieving a variable within the link section of your Angular Js directive?

Can someone help me with creating a directive that can automatically generate the current year for a copyright notice? I'm struggling to figure out how to access the year variable in the link function of the directive. I have tried several methods, bu ...

javascriptangularjsangularjs-directive

Activate the click function of an asp.net linkbutton when the mouse enters by utilizing jQuery

I'm attempting to create a hover-triggered click event using jQuery. While this is a straightforward task, I've run into an issue where I can't seem to trigger the click event of an ASP.NET link button that refreshes the content of an updat ...

javascriptjqueryasp.nettriggerslinkbutton

What is the best method to center a div on the screen?

Is there a way to have a div open in the center of the screen? ...

javascriptcss

Differences between visibility property manipulation in HTML and JS

One issue I am facing is that when I add a hidden property to a button in the HTML, it remains invisible. <button id="proceed_to_next_question" hidden> Next Question </button> However, if I remove the hidden property and include the following ...

javascripthtmlvisibility

Although hiding and showing elements in jQuery is quick, the rendering engine is too sluggish

Experiencing a performance problem when toggling the visibility of all "tr.content" elements within a complex dom structure like this:    <tbody class="collapsible">        <tr class="handler">            <td>Collaps ...

javascriptjqueryhtmlbrowserperformance

Utilizing unique symbols to dynamically add form elements to an HTML page with jQuery's append method

I am facing an issue with creating forms on my HTML page. Here is an example of how I am trying to do it: <form action="/tasks/<%= allTasks.e[0].id %>/delete" method="POST"> <button class="deleteTask">Delete</button> </f ...

javascriptjqueryhtml

Utilize DOM to attach a button onto an image

I am looking to add buttons onto images using DOM manipulation. Each image will have multiple buttons that, when clicked, will delete the image. I am aiming for a functionality similar to this example - JSFiddle This is the code I have attempted so far: ...

javascriptjqueryhtmlcss