The AngularJS Input Validation TypeError occurs when attempting to use an undefined function for validation

Currently, I am working on input validation using Angular. However, when the function is triggered, all elements return as undefined. The crucial code snippets are provided below, but do let me know if you need more information. Your assistance is greatly appreciated.

JS 

angular.module('app.directives', [])
.directive('mrnCheck', [function () {
return {
    require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
        //console.log(firstMRN.val());
        var firstMRN = '#' + attrs.mrnCheck;
        elem.add('test');
        //console.log(firstMRN.val());
        //console.log(firstMRN);
        elem.add(firstMRN).on('keyup', function () {
            scope.$apply(function () {
                ctrl.$setValidity('mrnmatch', elem.val() === $(firstMRN).val());
            });
        });
    }
}

}]);

HTML

<div class = "row" ng-show="<?php echo $_SESSION["associate"]; ?>">
    </br>
    <form name = "UploadForm" class="input-group" role="form">
        <div class="input-group">
            <span class="input-group-addon">MRN</span>
            <input type="MRN" ng-model="MRN1" class="form-control" id="MRN1" placeholder="Patient MRN" ng-required="" />
        </div>
        </br>
        <div class="input-group">
            <span class="input-group-addon">MRN</span>
            <input type="MRN" ng-model="MRN2" class="form-control" id="MRN2" placeholder="Confirm MRN" ng-required="" mrn-Check="MRN1" />
            <span ng-show="UploadForm.MRN2.$error.MRNmatch">MRN values must match!</span>
        </div>
    </form>
 </div>

Error

at link (httpsomeLink/imageinbox/IIExpress/app/app.js:237:9) at nodeLinkFn (httpsomeLink/imageinbox/IIExpress/app/assets/angular/angular.js:6704:13) at compositeLinkFn (httpsomeLink/imageinbox/IIExpress/app/assets/angular/angular.js:6098:13) at compositeLinkFn (httpsomeLink/imageinbox/IIExpress/app/assets/angular/angular.js:6101:13) at nodeLinkFn (httpsomeLink/imageinbox/IIExpress/app/assets/angular/angular.js:6698:24) at compositeLinkFn (httpsomeLink/imageinbox/IIExpress/app/assets/angular/angular.js:6098:13) at nodeLinkFn (httpsomeLink/imageinbox/IIExpress/app/assets/angular/angular.js:6698:24) at compositeLinkFn (httpsomeLink/imageinbox/IIExpress/app/assets/angular/angular.js:6098:13) at compositeLinkFn (httpsomeLink/imageinbox/IIExpress/app/assets/angular/angular.js:6101:13) at nodeLinkFn (httpsomeLink/imageinbox/IIExpress/app/assets/angular/angular.js:6698:24)

Please be aware that line 237 corresponds to the line starting with elem.add. Additionally, somelink is a substitute for an actual link that could not be posted here.

javascriptangularjsvalidationangularjs-directive

Answer №1

Give this code snippet a try. It involves setting the 

input type="MRN" => type="text"

<form name="UploadForm" class="input-group" role="form">
    <div class="input-group">
        <span class="input-group-addon">MRN</span>
        <input type="text" ng-model="MRN1" class="form-control" id="MRN1" placeholder="Patient MRN" ng-required="" />
    </div>
    <div class="input-group">
        <span class="input-group-addon">MRN</span>
        <input type="text" ng-model="MRN2" class="form-control" id="MRN2" placeholder="Confirm MRN" ng-required="" mrn-check="MRN1" />
        <span ng-show="UploadForm.MRN2.$error.MRNmatch">MRN values must match!</span>
    </div>
</form>

angular.module('app.directives', [])
.directive('mrnCheck', [function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            //console.log(firstMRN.val());
            var firstMRN = '#' + attrs.mrnCheck;
            elem.add('test');
            //console.log(firstMRN.val());
            //console.log(firstMRN);
            elem.add(firstMRN).on('keyup', function () {
                scope.$apply(function () {
                    ctrl.$setValidity('mrnmatch', elem.val() === jQuery(firstMRN).val());
                });
            });
        }
    };
}]);

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

What could be causing the sorting function to malfunction on certain columns?

My table's column sorting feature works well with first name and last name, but it seems to have issues with dl and dl score columns. I need assistance in fixing this problem. To access the code, click here: https://stackblitz.com/edit/angular-ivy-87 ...

javascriptangulartypescriptsorting

Are there any debugging tools specific to Internet Explorer for JavaScript?

I need a reliable JavaScript debugger for Internet Explorer. I have tried using Firebug Lite, but it doesn't seem as detailed as the original Firebug when it comes to displaying JavaScript errors. Does anyone know how to pinpoint JavaScript errors in ...

javascriptinternet-explorerdebuggingfirebug

Is there a way to retrieve the fields of an index in elastic search?

After receiving a JSON object from an elastic search query, I successfully extracted the data using the code snippet below: $scope.results = response.hits.hits; console.log($scope.results); var resultstofilter = []; var resultArray = []; ...

javascripthtmljsonangularjs

Obtain JSON information and insert it into an HTML element

I'm currently faced with an issue regarding JSON data (fetching and posting it). Below is the code I have used, but unfortunately it is not working and I am unsure why. Upon checking with Firebug, it indicates the response as: 200 OK sourceforge.net 1 ...

javascriptjqueryhtmljson

Ensuring contact form accuracy using jQuery and PHP

Can't seem to figure out why I am always getting false from the PHP file even though my contact form validation with jQuery and PHP is working fine. Let me explain with my code: Here is the HTML: <form method='post'> <label& ...

phpjavascriptjquery

Using the https module in Node.js to transfer a file to a PHP server

What is the best method to send an HTTP post request that includes a jpg file to a php server using the node https module? I attempted to use the request module, but it is unreliable (timing out most of the time) and already deprecated. Here is the functi ...

javascriptphpnode.jshttphttps

Implementing one-to-many relationships using Knex.js and Bookshelf.js in an ExpressJS/Postgres environment

When a user registers, I want to create a record on two tables simultaneously. user.js const db = require('../database'); const User = db.Model.extend({ tableName: 'login_user', hasSecurePassword: true, hasTimestamps: true, t ...

javascriptnode.jsexpressknex.jsbookshelf.js

Challenges when utilizing AJAX and JQuery for selecting multiple items and retrieving data from a JSON file

I am currently working on a live search feature that extracts data from a JSON file using AJAX and jQuery. The goal is to make the fetched value clickable and populate a multiselect field with it. Once this is achieved, the plan is to capture the remaining ...

javascriptjqueryjsonajaxmulti-select

How can array data be organized by date in an Ajax response?

i have an array with the following data [{ date: "January 2019", sum: 20, name: "Persada", },{ date: "Februay 2019", sum: 21, name: "Persada", },{ date: "April 2019", sum: 22, name: "Persada", },{ date: "January 2019", ...

javascriptjqueryarraysajax

the spillage exhibits only a thin streak of gray

My website is primarily a Single Page Website, however, there are specific pages that can only be accessed by registered users. On the website, there is a section referred to as a "block" where you will find a button labeled "Login / Register". Upon clicki ...

javascriptjqueryhtmlcssoverflow

Find out the keycode of an event in ReactJS when a key is released

Whenever I try to get keyCode on a keyUp event, it always returns 0. Why is this happening? I want to avoid using keypress and similar methods, and I also need to utilize an arrow function: handleKeyPress = (e, type) => { let KeyCode = e.charCode; ...

javascriptreactjs

Java Entity Framework Indexing Tables

I am currently utilizing ASP.Net Core and have implemented EntityFramework to create a controller with views. Specifically, I am in the process of enhancing the Index view to make it dynamic with dropdown selections. I have successfully completed everythin ...

javascriptc#asp.netajax

Exploring the possibilities of incorporating Bootstrap 4 or ng-bootstrap elements into Angular 4 development

We are considering the use of Bootstrap 4 within an Angular 4 application by either importing their styles and JavaScript directly, or utilizing ng-bootstrap Angular components for improved performance and compatibility with the Angular app. We would lov ...

javascriptcssangularbootstrap-4ng-bootstrap

When utilizing the AngularJS Treeview component (without relying on jQuery), how can the data-node-label be associated with the data being used?

Take a look at my code on jsFiddle: Check it out. I'm currently experimenting with the AngularJS Treeview component and you can view the official demo here. <div data-angular-treeview="true" data-tree-model="data" data-node-id="value" dat ...

angularjsangularjs-directivetreeview

Locate the unique symbol within an array

I am facing a challenge with validating user input in an input box where alphanumeric values are allowed along with certain special characters. I need to display an error message if the user enters a special character that is not supported by my applicatio ...

javascriptangularjsstring

Using JavaScript along with Ajax and JSON allows for sending complex data structures such as objects and

One of the features on my form allows users to input information about their clients. This versatile form enables users to add multiple phone numbers, email addresses, and physical addresses without any limitations. When adding a phone number or an email ...

javascriptjqueryajaxjson

The functionality of window.event.target appears to be malfunctioning in the Firefox browser

I have been working on an angularjs application. We have implemented a functionality to display alerts for unsaved changes using window.event.target. Everything was functioning correctly in all browsers except for <code>Firefox. The error message w ...

javascriptangularjsfirefox

Recursive routing in NodeJS using Express

Certain website APIs have the capability to perform actions such as: Initial user's id their first friend, also a user v v GET /api/users/54282/friends/0/friends/0 ...

javascriptnode.jsrestexpress

Update the state when a button is clicked and send a request using Axios

Currently in my front end (using react): import '../styles/TourPage.css'; import React, { Component } from 'react'; import axios from 'axios' class TourPage extends Component { constructor(props) { super(p ...

javascriptnode.jsreactjs

"Restangular is known to send an empty payload when the keys of the data object begin with the special character

Using Restangular for communication with Mongolab, I am attempting to utilize the following code snippet to push an update: var theData = {"$push":{exercises :{type: "running"}}}; Restangular.all('employees').one(user._id.$oid).customPUT(theData ...

mongodbangularjsmlabrestangular