Using ng-pattern to validate that a text field does not conclude with a particular term

In this code snippet, I am attempting to prevent a textfield from ending with any of the specified letters in the $scope.pointPattern variable.

$scope.pointPattern = /^(?!.*ess|ence|sports|riding?$)/;
            $scope.error = "not valid";

Upon execution of the code, the error message is displayed only when the field ends with ess, while other endings are not considered invalid.

For example:
football ess > shows error as "not valid"
footbal ence > does not show error 
sports or riding results do not trigger an error message

I'm unsure of what mistake I might be making. Can you provide guidance on this issue?

javascriptangularjsregex

Answer №1

Your ^(?!.*ess|ence|sports|riding?$) regular expression identifies a string that doesn't finish with ess, isn't initiated by ence, sports, or end with riding or ridin. You can check out the matching results in your regex demo. This occurrence arises because the choices are not enclosed within a group and only have the $ syntax.

To rectify this, you should enclose these options within a grouping structure.

Make use of

$scope.pointPattern = /^(?!.*(?:ess|ence|sports|riding?)$)/;
                             ^^^   ^    ^      ^       ^

The (?! at the beginning and the closing ) mark the bounds of the negative lookahead. Whereas, the (?:ess|ence|sports|riding?) signifies a non-capturing group inclusive of all listed alternatives separated by | (alternation operator).

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

The JSON data URLs in the `_next/data` directory of the NextJS app are returning a 404 error, however, when accessed directly in the

I am facing an issue with my Next.js (v13) app hosted on a self-hosted Kubernetes cluster. The AJAX JSON data calls from the _data directory are showing as 404 errors, even though when I directly visit the URLs in my browser, they load fine. I'm perp ...

javascriptkubernetesnext.js

Error message stating: "Unable to read property 'then' as it is undefined within Angular nested promises."

I'm having trouble passing data back from a service to a controller in my AngularJS application. The service I am calling inside a factory makes an HTTP request for JSON data and then needs to modify it before returning it to the controller. However, ...

angularjsangular-promiseangular-http

FOUC: Website first displayed without any design elements

My goal is to implement global styles in a Next.js app by importing `.scss` files into `_app.js`. Unfortunately, I am facing an issue where the styles are not being applied on page load, resulting in FOUC (Flash of Unstyled Content) for the initial page r ...

javascriptreactjssassnext.jsfouc

Error: Swagger-codegen encountered an issue where 'Object' arguments were disregarded

I've encountered a strange error that I can't seem to troubleshoot through online searches. My current project involves converting swagger files to typescript using a script. The error message simply states what's in the title, and unfortuna ...

javascriptjsonobjectswaggercommand-line-interface

Discovering the art of interpreting the triumphant outcome of an Ajax request with jquery/javascript

I recently encountered a challenge with my function that deals with a short JSON string: <script id="local" type="text/javascript"> $( document ).ready(function() { $('tr').on('blur', 'td[contenteditable]', functi ...

javascriptjqueryajax

Generate a new span element within a div element programmatically using Vuex

I have integrated an existing web application developed using vue.js. Below is the code snippet: function () { var e = this, t = e.$createElement, n = e._self._c || t; return e.messag ...

javascriptvue.js

What is the method for providing a date format choice in JSON?

I am encountering an issue in my PHP script where I use JSON to pass parameters. When I pass the date as "09-09-2015", it functions correctly. However, when I try to pass the date as $date, it does not work. How can I resolve this problem? $item1 = "test ...

javascriptphpjson

Static addition of the Button to the parent div is crucial for seamless

Introduction: My current project involves managing interns, and I am focusing on the employee side. Employees have the ability to add, edit, and delete interns through modal popups. Strategy: To avoid unnecessary repetition of code, I decided to create a ...

javascriptjqueryhtmlcssasp.net-mvc

What is the method for specifying a string argument type from a string list and executing a mongo db query?

Is there a way to specify the argument type in a function as a string from a list of strings in order to run a MongoDB query? Here is what I am currently attempting: users.services.ts async findOne(key: "_id" | "email" | "username", value: string) { ...

javascriptmongodbnestjs

The function getComputedStyle('background-color') will return a transparent value that does not inherit from any ancestor element

When using getComputedStyle, it is expected to return the final computed CSS property value. However, for background-color, browsers tend to return "transparent" (or rgba(x,x,x,0)) instead of computing the inherited value from ancestors. The method only s ...

javascriptcssbackground-colorgetcomputedstyle

Creating a Map Using HTML and JavaScript

My current project involves creating a simple map that can be moved with mouse drag functionality, featuring images such as islands. I have successfully retrieved the mouse position by declaring variables posX and e.clientX, as well as for e.clientY. Howe ...

javascripthtmlcss

CASL user update has been refreshed

My CASL implementation is quite basic and I've noticed that the documentation lacks detail. The code I'm using is essentially a copy-paste from the docs: import { abilitiesPlugin } from '@casl/vue' import defineAbilitiesFor from &apos ...

javascriptvue.jscasl

The eval() function does not run scripts from external sources with a src attribute

Instead of using eval() to execute all <script> tags after completely rewriting a div, I have encountered an issue. The following code snippet works for inline-scripts, but it doesn't have the same effect on external scripts like: <script sr ...

javascriptjqueryajaxhtml

Customizing row colors in AngularJS ui-grid

I'm facing issues with setting colors for specific rows in Angular ui-grid. I am aware that I can utilize a row template as shown below. However, the "row.sequence" attribute is not working as expected. Could someone provide me with code example ...

angularjs

What is the most effective strategy for managing dependencies for npm packages?

I am currently working on extracting a few Vue.js components from the main application and converting them into an npm package stored in a repository. This package will be imported and utilized across two different websites. To bundle everything, I am util ...

javascriptvue.jsnpm

Trigger Angular Animation when there is a modification in the DOM element's appearance or styling

I've been working on implementing a fade-in animation in my Angular App that triggers every time the background changes, but I'm facing some challenges with it. Here's the relevant code snippet: HTML: <div @fadeIn [style.backgroundImag ...

javascriptangularanimationangular5angular-animations

The essence of responsiveness within personalized widgets

To create a vertical slider input, I had to find an alternative option since the built-in sliderInput function does not support it. After exploring this thread, I learned that there are two possible solutions: (I) rotating the sliderInput widget using CSS ...

javascriptrshiny

Tips for Preventing Unnecessary Ajax Requests

What I require When a click event is triggered, a service call should be made only once. Use case Dropdown1 Dropdown2 Dropdown3 1. There are three dropdowns on the HTML page. 2. When Dropdown1 is called - an AJAX call is made only onc ...

javascriptjqueryajax

What could be the reason for an async function to send an empty object in the request body?

I'm currently utilizing nuxt.js, mongoDB, express, and bodyParser as well Unfortunately, the solutions provided by others do not solve my issue, as having bodyParser does not seem to fix it. The uploadPet function is designed to collect form data an ...

javascriptnode.jsexpress

Exploring the use of functions in the setup method of Vue 3

I'm currently working on a simple app and utilizing mock-json-server to mimic http requests. Within my project, I have defined a function designed to retrieve the necessary information: import { ref } from 'vue' const getScores = () => ...

javascriptvue.jsvue-componentvue-composition-api