Exploring custom validation rules for string patterns in AngularJS

I have an input field that is using a pre-existing validator called "stringValidator". I want to customize or extend this pattern without creating a new one. Is there a way to do this inline? Can I input the validation regex directly into the tag declaration?

Current Tag Declaration:

The "stringValidator" pattern, which is defined externally, has a rule that I need to override. However, I can't edit "stringValidator" or add a custom rule in the same code file.

<input type="text" id="txt-foo" placeholder="" name=""
               class="form-control"
               ng-model="txtName" ng-maxlength="255"
               ng-pattern="stringValidator"
               autocomplete="off" />

What I would like to achieve:

<input type="text" id="txt-foo" placeholder="" name=""
               class="form-control"
               ng-model="txtName" ng-maxlength="255"
               ng-pattern="/^[^%\[\]<>"%;&()]+$/"
               autocomplete="off" />

Thank you.

javascriptregexangularjsvalidation

Answer №1

Everything should function as anticipated, however, the browser may disrupt your pattern due to premature termination caused by the presence of " in the pattern. Additionally, the value is enclosed within ", causing further issues. To resolve this, either enclose the pattern in single quotes or escape the quotes using &quot; in the attribute value (the browser will automatically un-escape it during rendering).

For example: 

ng-pattern='/^[^%\[\]<>"%;&()]+$/'

Alternatively:

ng-pattern="/^[^%\[\]<>&quot;%;&()]+$/"

Also, remember to provide a name for your input, as without it, the form controller will be unable to associate properties with its instance.

View Demo:

input.ng-invalid {
  border-width: 2px 5px 2px 2px;
  border-style: solid;
  border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <form name="form">
    <input type="text" id="txt-foo" placeholder=""  class="form-control" ng-model="txtName" ng-maxlength="255" ng-pattern="/^[^%\[\]<>&quot;%;&()]+$/" autocomplete="off" />
  </form>

</div>

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

Utilizing PathLocationStrategy in Angular 2 with Laravel and .htaccess configurations

I am facing challenges while configuring the .htaccess file for Laravel and Angular 2. Whenever I refresh the browser window, I encounter a 404 error page and I want to avoid using the html5 hashbang strategy. I am utilizing routing from both Angular 2 and ...

angularjs.htaccesslaravelhttp-status-code-404

VueJS - Validating Props with Objects

What is the best way to validate Object type props in VueJS to guarantee that certain fields are defined within the object? For instance, I need to make sure that the user prop includes 'name', 'birthDate', and other specific fields. ...

javascriptvue.jscomponents

Tips for passing input fields from a React Function component to a function

How can I retrieve the values from 4 input fields in my react functional component using a function called contactMeButtonPressed? The inputs include name, email, company name, and message when the contact me button is clicked. Do I need to implement stat ...

javascriptreactjs

Tips for effectively managing missing translation files when utilizing the AngularJS static file loader

When using multiple rules in the definition of your useStaticFilesLoader, if one of them is a folder that cannot be found, Angular Translate will fail even if the translations within those missing files are not being utilized. For example, if you mistaken ...

angularjsangular-translate

Template does not display data from Angular Service even though it has been passed through the service

After setting up an API Backend using Django, I attempted to display the data in an Angular Component to create a list of all retrieved datasets. I managed to run a test in service.spec.ts and confirmed that the data is successfully fetched from the backe ...

javascriptangularangular-servicesangular-template

Issue with unapplied nullable type during export操作

I'm struggling to understand why my nullable type isn't being applied properly Here's an illustration interface Book { name: string; author: string; reference: string; category: string; } async function handleFetch<T>(endpoin ...

javascripttypescript

Utilizing Fullcalendar Qtip to display information on mouseover rather than utilizing the eventRender

I have a challenge with integrating Qtip to the eventMousever event instead of the eventRender event in fullcalendar. The main reason for this adjustment is due to the server hosting the data being located in another country, resulting in significant late ...

javascriptjqueryajaxfullcalendarqtip2

Viewing the information stored in a text file hosted on a web server

I need help enhancing the functionality of a webpage on my server. Specifically, I want to display the contents of a text file saved on the server. I am struggling with the syntax, but it seems to involve using Flask along with HTML and JavaScript function ...

javascriptphphtmlflaskxmlhttprequest

Merge the "Checkbox" and "Avatar" components within an Ionic Framework List

As a proficient programmer new to the world of Ionic Framework and Angular.js, I am in the process of developing a mobile app using primarily "out of the box" features of Ionic. However, I have a specific requirement where I would like to create an Ionic l ...

angularjslistviewionic-framework

I'm encountering a RangeError in nextjs when trying to pass props to a child component

I'm a beginner with Next.js. I've been attempting to pass props to a child component that is a response from an API call. However, every time I try to add the props in the child component, I encounter a RangeError: Maximum call stack size exceed ...

javascriptreactjsnext.js

Adjusting the label on the Formik toggler

I have successfully implemented a switcher using Formik that changes the label accordingly with a boolean value. However, I now need to make the label reflect a string value instead of just "true/false." For example, I want it to display "Text1/Text2" inst ...

javascriptreactjsformik

Utilize the Tab feature effectively in Impress.Js

Currently, I have disabled the Tab key in Impress.js so that it only moves to the next slide. However, when I try to focus on links and delete this code to let it behave normally, Impress.js crashes. Has anyone found a workaround for this issue? Appreciat ...

javascriptcssimpress.js

How to create a vertical dashed line using React Native

https://i.sstatic.net/Mhbsq.png Looking for advice on implementing dotted vertical lines between icons in React Native. Any suggestions? ...

javascriptcssreactjsreact-nativelayout

Determine the estimated download duration using the $http protocol

I am experiencing an issue with a function that calculates the time it takes to download a text file (3MB in size) from my server. While it works well for single requests, when I attempt to run multiple requests simultaneously, the time spent waiting for a ...

javascriptjqueryangularjs

Using jQuery to create a captivating Parallax Effect on your website's background image

Hey there! I have a div with the class 'section' that serves as a key element on my website. It has a background image set using the following CSS: .section-one { width: 100vw; height: 100vh; background-image: url(images/outside-shot ...

javascriptjqueryhtmlcss

What methods can I use to minimize the duration of invoking the location.reload() function?

When I'm using window.location.reload() in my onClick() function, it's taking too long to reload. I tried modifying the reload call to window.location.reload(true) to prevent caching, but it's still slow. The issue seems to be with location. ...

javascriptreactjsreload

Creating dynamic grid data based on various filter criteria using JavaScript (AngularJS)

In my approach, I have created two JSON data files. If the 'List' value equals A-1, I will retrieve the JSON data specific to that value. Otherwise, I will retrieve all the main data from data.json. My goal is to have 3 other checkbox options un ...

javascriptjqueryangularjsjson

Tips for handling an empty jQuery selection

Below is the code snippet: PHP CODE: if($data2_array[7]['status'] == "OK"){ $degtorad = 0.01745329; $radtodeg = 57.29577951; $dlong = ($lng - $supermercado_lng); $dvalue = (sin($lat * $degtorad) * sin($superm ...

javascriptphpjquery

Content displayed in the center of a modal

Struggling to center the captcha when clicking the submit button. Check out the provided jsfiddle for more details. https://jsfiddle.net/rzant4kb/ <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class=" ...

javascripthtmlcssbootstrap-5

Ways to trigger the onclick event from different controls

I have a videojs player and a button on my html page. The videojs player supports the functionality to pause/play the video when clicked. I want to trigger this event by clicking on my button. How can I achieve this? Here is the code that I tried, but it ...

javascripthtml