My goal is to restrict the characters allowed in a text box to the following:
A to Z in both upper and lower case, Ñ and ñ, and space. I have a function that runs onkeyup:
FieldOnKeyUp(el) { !(/^[A-zÑñ-\s]*$/i).test(el.value)?el.value
= el.value.replace(/[^A-zÑñ-\s]/ig,''):null; }
However, the issue is that the field still accepts certain special characters:
` ^ _ \ ] and [
Any suggestions or insights on how to resolve this issue?
The issue lies within your regular expression:
[^A-zÑñ-\s]/ig
^---- the problem is here: you should replace this with an uppercase Z
Although you have set the /i ignore case flag, you have included a character range of A-z - meaning from capital A to lowercase z. The unwanted extra characters that are currently being accepted ("[", etc.) all fall between the uppercase Z and lowercase a. Consider modifying it to A-Z to correct this issue.
Additionally, keep in mind that users may input invalid characters by pasting from the main menu or using the right-click menu, which may not be caught by a key event handler.
To enhance your code functionality, consider implementing the following changes:
FieldOnKeyUp(el) { !(/^[a-zA-ZÑñ-\s]*$/i).test(el.value)?el.value
= el.value.replace(/[^a-zA-ZÑñ-\s]/ig,''):null; }
It seems there may be some confusion regarding your specific requirements. Placing caret ^ within the brackets [ and ] restricts the target string from allowing alphabets. However, based on your current code, I have adjusted the incorrect regex pattern.
Utilizing MUI for crafting a straightforward dashboard featuring an <AppBar>, a side <Drawer>, my component appears as follows: <> <AppBar> // code omitted <AppBar/> <Drawer> // code omitted <Drawer/> / ...
I am utilizing Dreamweaver's Spy menu without any sub items. By using a background image for "not active", another for "rollover" and attempting to apply one for "active". I have created a class for "active" and assigned it to one of the ul items. How ...
tag: In the process of creating my app with next.js, I primarily use functional components. The sole exception is a class component that I utilize to manage forms. Upon form submission, my goal is to redirect back to the home page. However, when I attemp ...
Is there a way to run a loop function synchronously rather than asynchronously without using callbacks or external libraries? File 1 var db = require('./promiseUnderStanding'); var fun = function () { for (var i = 0; i < 10; i++) { ...
I'm a bit confused about how the onClick event works with the handleClick function and passing numbers as arguments. Is this related to closures? Can someone explain how the numbers are passed as arguments when the click event happens? Also, should ...
Here is a string that I have: [{"data1":"A"},{"data2":"B"},{"data3":"C"}] Using jQuery, I converted this string to JSON: test_json = $.parseJSON('[{"data1":"A"},{"data2":"B"},{"data3":"C"}]'); After conversion, I obtained 3 objects: https:/ ...
Every link in the left menu has a padding-left: 15px;. This is done to accommodate a background image (the blue arrow). However, when text wraps (like in "Paintings, prints, and watercolours"), it seems to ignore the padding. I've searched extensive ...
I am working on a JavaScript project where I have implemented an angular.forEach loop to iterate over image configuration objects and create Image() objects using the URLs from the config. My goal is to ensure that none of the resulting images are returne ...
Currently utilizing node.js in conjunction with the express framework, I am attempting to initiate a get request for an image by appending it to the body through $('body').append('<img src="images/image.gif?34567">'). Despite rece ...
I am currently working on customizing notifications that appear when a Symfony entity is successfully updated. What I have implemented so far can be found here : var messagesTypes = { "notice": ["This is a green NOTICE"], "error": ["This is a red E ...
In my code, I have two divs that are floating correctly in Chrome, Firefox, and Safari but not in Internet Explorer. In IE, the right div appears below the left div even though it should be floated to the right. Both of these divs are wrapped by an outer ...
I am currently using CSS and div elements in an attempt to create these particular lines: https://i.stack.imgur.com/Ytowq.png .line { width: 1px; height: 100px; background-color: black; position: absolute; border-radius: 50%/100px 1 ...
Within my React application, I have a parent component that sends a request to our API. While waiting for the response, a loader is displayed on the page. Once the response is received, I iterate through the data and pass each iteration to a child componen ...
I'm having trouble getting my footer panel to stretch across the entire page, it seems stuck in the center. The header at the top of the page spans the full width just fine. Am I missing something? My goal is to make both panels at the bottom of the p ...
I'm having an issue with this code. My objective is to create two filters for this table. The select element with id="myInput" should determine which rows appear in the table and apply the first filter. Here is the JavaScript code: function myFunctio ...
While trying to incorporate lazy loading on my website, I encountered an issue where the image position would change after it was fully loaded and made visible. I experimented with rearranging the order in which my JavaScript and CSS files were called, bu ...
How do we round a number to the nearest dollar or integer? For example, rounding 2729999.61 would result in 2730000. Is there a method in Angular template that can achieve this using the number pipe? Such as using | number or | number : '1.2-2' ...
I am facing a challenge in selecting an element within another element, specifically a button within a form. Typically, I would use jQuery to achieve this as shown below: element = $('#webform-client-form-1812 input[name="op"]'); However, due t ...
Looking to personalize the .pdf invoice for my PrestaShop store, The issue is that the process is quite time-consuming: Modify .tpl file Generate .pdf file Review changes Meanwhile, I'd like to convert the invoice to HTML to inspect the elements u ...
I'm currently working with Bootstrap pills that feature two tabs. I would like to customize the width of the tab content container differently for each tab, but I'm unsure how to achieve this. The tab-content class currently sets the same width f ...