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

Divide the MySQL results into two distinct groups and display them in separate div

I have a MySQL query that fetches all the topic results. I have also implemented a pagination system where the results are divided into pages, and the query's limit #,# varies depending on the current page. My goal is to organize these results into t ...

phpjavascriptjquerymysql

Guide to utilizing sections within Angular

Planning to develop a website using Asp.net WebAPI and AngularJs. Seeking advice on how to separate the admin area from the user interface of the site. In my previous project, I utilized the MVC area to create an admin section. A friend recommended crea ...

c#asp.netangularjsasp.net-mvcasp.net-web-api2

What steps can I take to resolve a dependency update causing issues in my code?

My program stopped working after updating one of the dependencies and kept throwing the same error. Usually, when I run 'ng serve' in my project everything works fine, but after updating Chartist, I encountered this error: An unhandled exception ...

angularangularjstypescript

Activating Dynamic Functionality through JavaScript Input

I am currently working on a form in Apex 4.1 where I have an address lookup field that utilizes JavaScript to connect to an address database and populate separate fields with the address details (address1, address2, town, postcode). On the same page, I ha ...

javascriptjqueryoracleoracle-apex

When switching to compatibility view in IE 9, ASP.NET MVC 5 with Angular may cause the browser to crash

Upon deploying my site with MVC 5, Api 2 integrated with Angular and JQuery onto an intranet server, I encountered a strange issue. Due to internal policy restrictions, all sites on the intranet must operate under compatibility view. This caused a problem ...

jqueryangularjsinternet-explorermodel-view-controller

What is the maximum number of JSON responses that can be handled by AJAX?

Upon entering the site, I am attempting to receive a JSON as an AJAX response. However, I am curious if there is a limit to the size of the object I can retrieve - whether through a GET or POST request? $http({ method: 'POST', url: &apos ...

javascriptjqueryajaxjsonangularjs

the nextjs model is throwing a 400 bad request error when fetching data

I need some assistance with my web application. Whenever I try to create a record by sending data to the API endpoint, it always returns a 400 bad request error on the front end. Surprisingly, when I tested the same request in Insomnia, everything worked p ...

javascriptnext.js

Utilizing base classes in callbacks with ES6 in NodeJS

Consider this scenario where I have a class as shown below: class X extends Y { constructor() { super(); } method() { asyncMethod( function( err ) { super.method( err ); } ); } } The issue here is that super actually ...

javascriptnode.jsecmascript-6

One way to enhance user experience is by passing parameters dynamically from the database when an element is clicked. This allows for the retrieval of

Earlier, I tried to post a question but couldn't get it working due to incorrect code. As the title suggests, my objective is to retrieve data from a database and display it in a div. The idea is that when this data is clicked, it should be passed to ...

phpjavascriptajaxjquery

Rule for jQuery validation based on variables

I am facing an issue with validation of login asynchronously in my HTML form using the jQuery Validation Plugin. I would like to trigger a request for login validity on blur, and validate it upon receiving a response. Below is the code snippet: var login ...

javascriptjqueryvalidationasynchronous

`My jquery mobile application fails to trigger the pageinit or ready events`

My website consists of 3 PHP pages: one index page and two subpages for sales and products. The index page has links to these subpages. When I click on the sales link, it is supposed to load sales data either on pageinit or document ready. However, no code ...

phpjavascriptjqueryajaxjquery-mobile

Looking to customize scrolling behavior when navigating back in Next.js?

I have a function in my index.js file that fetches a list of posts like this: const Index = (props) => { return ( <div> {props.posts.map((each) => { return ( <Link scroll={false} as ...

javascriptreactjsnext.js

Creating a list in React and adding a delay using setTimeout() method

I'm a beginner when it comes to working with React and I've been attempting to display a list of posts using a JSON array. My goal is to have the list render after a certain number of seconds, but for some reason, the list isn't rendering us ...

javascriptreactjssettimeout

An error occurs in TypeScript when attempting to reduce a loop on an array

My array consists of objects structured like this type AnyType = { name: 'A' | 'B' | 'C'; isAny:boolean; }; const myArray :AnyType[] =[ {name:'A',isAny:true}, {name:'B',isAny:false}, ] I am trying ...

javascripttypescript

Where can I find the JavaScript code that controls the button function?

Is there a method to identify the trigger that activates a button's specific action and page refresh, such as this example: <input type="submit" name="name" value="some value" id="mt1_main_btn" class="btn_next"> Simply copying the button does ...

javascriptjqueryformswebforms

How to Animate the Deletion of an Angular Component in Motion?

This stackblitz demonstration showcases an animation where clicking on Create success causes the components view to smoothly transition from opacity 0 to opacity 1 over a duration of 5 seconds. If we clear the container using this.container.clear(), the r ...

javascriptcssangulartypescriptangular-animations

Adding properties to a class object in Javascript that are integral to the class

Recently, I've been contemplating the feasibility of achieving a certain task in JavaScript. Given my limited experience in the realm of JavaScript, I appreciate your patience as I navigate through this. To illustrate what I am aiming for, here' ...

javascriptnode.jstypescriptecmascript-6

Adjust the scroll position when the height of a div is modified

Imagine we have a large div A with a height value and below it are other divs B, C, and more. If the user is viewing divs B or C, and A reduces its height by half, the scrolling position will remain the same. However, divs B and C will move up by that amo ...

javascripthtmlcssvue.js

Utilize the provided parameter within a JavaScript function

<script type="text/javascript"> function updateTrackName(trackNum) { document.form1.track_(track_number)_name.value=document.form1.track_(track_number)_parent_work.value; } </script> To modify the line inside of the parent_wor ...

javascript

Trouble with window.location functionality following an AJAX request

After a successful response from an AJAX request, the window.location method is not working as expected. However, when I debug step by step in Firefox, the window.location works fine. function login(){ var jason ={"usuario":document.getElementById("inp ...

javascriptjqueryajax