AngularJS directive created for validation on blur

I am striving to replicate some of the features found in Angular 1.3.X for the app I am developing, with a particular focus on ensuring compatibility with IE 8. Unfortunately, this constraint means that I cannot utilize version 1.3.X. I have encountered difficulties while attempting to reproduce the functionality of the $ng-touched attribute available in 1.3.X.

One crucial aspect of our application is notifying users if their form element is invalid after tabbing through it. Currently, the $invalid attribute is not set on any form elements unless text has been entered and then deleted. I experimented with utilizing $pristine and $dirty in order to trigger $invalid after tabbing, but both appear to be dependent on the value of the input rather than whether it has been touched (which may have been a key advantage of 1.3.X).

Objective: trigger validations when a user tabs through a form and mark each empty form element as $invalid if it is blank. Essentially, aiming to emulate the behavior of the $ng-touched attribute in 1.2.X. Here is the code snippet I have developed so far:

angular.module('goodStewardApp')
.directive('chf-validate', function () {
return {
  require: 'ngModel',
  link: function(scope, elm, attrs, ctrl) {
    $(elm).blur(
      function(elm) {
        ctrl.$setValidity(elm, false);
      }
    );
  }
};
});

Any assistance on this matter would be highly appreciated. Thank you!

Answer №1

Discovering the most effective method to replicate the behavior of ng-touched in angular 1.2.x involves utilizing ngBlur to set a validation attribute as true. Therefore:

<form name="aForm">

   <input name="foo" ng-model="foo.bar" ng-blur="validateThisElement=true" ng-required="true">

   <div ng-show="aForm.foo.$error.required && validateThisElement"> 
      Oh no! An alert!
   </div>

</form>

This approach enables the execution of validation after a user passes through your form via tabbing, which aligns with the typical computer user's interaction with an angular form/app. Hopefully, this proves helpful for those still grappling with 1.2.X due to IE8 constraints!

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

Thumbnail Carousel Caption in Bootstrap 3

Is it possible to create a Bootstrap 3 carousel where the image changes when the mouse cursor hovers over the thumbnail under the carousel? Currently, I have a setup with the carousel and thumbnails below it. Typically in Bootstrap, the image changes autom ...

The process of incorporating a function into a website's source code using a web driver

In the source code, there is a button with an onclick event to change the paragraph content. However, the code provided does not seem to be functioning properly. ((JavascriptExecutor) this) .executeScript("function test123() { y=docume ...

Maximizing JSON performance: Enhancing Drupal backend and optimizing IONIC Frontend

Currently, I am in the process of developing a hybrid app that combines IONIC and AngularJS, with Drupal serving as the Backend. The data is being fetched using Drupal services and returned in JSON format. My main concern lies in optimizing the speed an ...

Trigger a click event upon page load using jQuery or JavaScript

I tried searching for this functionality on a different website, but it didn't work on my site. Can you help me figure out how to trigger a click event on page load? On one of my pages, a popup box appears when I click on a "project" link. Here is th ...

Retrieving Current Map Bounds in Angular Google Maps

After searching extensively, I'm struggling to figure out how to retrieve certain markers using the angular-google-maps feature. Specifically, I am utilizing <ui-gmap-markers> tag to set markers on the map. My goal is to obtain only the markers ...

AngularJS: Utilizing ng-click in ui-select choices

Trying to incorporate an add button within the options, but facing a challenge where ng-click triggers without selecting the option. <ui-select ng-model="datactrl.newservice.selected" theme="selectize" ng-disabled="disabled" style="width: 100%;"> ...

Is there a way for me to connect to my Firebase Realtime Database using my Firebase Cloud Function?

My current challenge involves retrieving the list of users in my database when a specific field is updated. I aim to modify the scores of players based on the structure outlined below: The Realtime Database Schema: { "users": { &quo ...

Passing default props to a component in React that includes a function as one of the

I am working on a React component that has default props set. The issue arises when I try to pass an additional prop, specifically a function. class MyComponent extends Component { constructor(props) { console.log('props', props); supe ...

Difficulty in transmitting two boolean values using ajax and setTimeout()

I am working on two functions that are supposed to send either 0 or 1 to a PHP page using AJAX. When a key is pressed on the keyboard, the function that sends 1 should start, followed by the second function that sends 0 three seconds later using setTimeout ...

Error: "Access-Control-Allow-Origin" header is missing in Firebase Function

I have encountered an issue with my firebase functions GET request. While I am able to receive data using Postman, I am facing difficulties when trying to fetch data from my front-end application. Upon accessing the endpoints, I am seeing the following er ...

What steps do I need to take in order to ensure that when the word Hello is entered, the resulting output will display e:1, h:1, l:2, o:1

<!doctype HTML> <html> <body> <h3>Enter a string: </h3> <input id="myInput1" type="text"> <button onclick="count()">See output</button> //Click to see th ...

The output from the Moment.js HTTP server is currently experiencing errors and is not displaying the expected

My first time working with JavaScript and the Momentjs library has not been smooth sailing. I am facing an issue where the output is not displaying as required. The goal is to show dates in the format "Day, date month year" (e.g., Tuesday, 14th May 2018). ...

Setting up Next Js to display images from external domains

Encountering an issue with my next.config.js file while working on a project with Next.js in TypeScript. This project involves using ThreeJs, @react-three/fiber, and @react-three/drei libraries. Additionally, I need to include images from a specific public ...

What is the proper way to implement v-model with Vuex in <select> elements?

I included a <select> element in my design: <select v-model="amount" required> <option value="10">10</option> <option value="20">20</option> <option value="25">25</o ...

Discover the power of utilizing JavaScript to sort through table rows by filtering them based on the selections of multiple checkbox

How can I create interdependent logic for checkbox sections in a form to filter based on all selections? I am looking for help with my code snippet that showcases checkboxes controlling the visibility of table rows: $(document).ready(function() { $(" ...

What is the proper way to reference a property's value within another property of the same JavaScript Object?

Within a Gulp.js file (or any Javascript file), I have defined paths in a Javascript object: var paths = { devDir : 'builds/development/', devDirGlobs : this.devDir+'*.html' } I am attempting to reference the pro ...

Oops! An unexpected field was encountered while trying to use the uploadMultiple function from dropzone.js

I was looking for a way to allow users to select images to accompany their reviews. That's when I came across dropzone.js. However, I encountered an issue when trying to send multiple images in one request. I expected the req.files to contain an arra ...

Error message: Unable to iterate through a non-iterable object in React reducer

I find myself in a unique predicament and could use some assistance. userData : { isValidCheckup: true, accounts: { userAccount: [ { accountType: 'checkings', includeInCheckup: false }, { accountType: 'check ...

Custom close functionality for AngularJS lightbox implemented in controller

I'm looking to create a customized close controller that will not only close the lightbox when I click "OK" in the alert, but I am unsure of how to do it. Here is the link for reference: Lightbox ...

Can Angular routing be used with a LAMP server?

I have decided to host my Angular 2 application on which offers a traditional LAMP stack for hosting. In my local ng serve environment, the route www.mysite.com/myapp/item/:id functions perfectly. However, when trying to access www.mysite.com/my-app/ite ...