Tips for merging two regular expressions for JavaScript validation

function checkparagraph(obj) {

  var paragraphContent = obj.value;
  var sequenceOfNumbers = /\d{4}/;

  if (paragraphContent.match(sequenceOfNumbers)) {
    document.getElementById("error_message").innerHTML = " You can't use numbers in the description.";
    document.getElementById("error_message").className = "showErrorMessage";
  } else {
    document.getElementById("error_message").className = "hideErrorMessage";
  }

}
.contentWrapper {
  width: 100%;
  height: 100%;
}

.content_50 {
  width: 400px;
  margin-top: 50px;
  margin-left: 50px;
}

.hideErrorMessage {
  display: none;
}

.showErrorMessage {
  display: block;
  color: red;
}
<DOCTYPE! html>
  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

  <head>
  </head>

  <body>
    <div class="contentWrapper">
      <div class="container">
        <textarea id="paragraph" name="description" rows="20" cols="66" onblur="checkparagraph(this)"></textarea>
        <span id="error_message" class="hideErrorMessage"></span>

      </div>
    </div>

  </body>

  </html>

I have implemented JavaScript for paragraph validation. The paragraph should not contain more than 4 sequences of numbers (i.e., 1234).

The required format is to have a space between two 4-sequence numbers before displaying an error message. How can I merge these two regular expressions?

Answer №1

Are you looking for: /\d{4}( \d{4})?/

Alternatively, for multiple sequences of n: /\d{4}( \d{4})*/

 

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

Unusual host value being returned by next/headers in Next.js version 13

In my current Next.js project, I am utilizing next/headers to dynamically set a baseUrl for calls to my API. const baseUrl = () => { const protocol = process?.env.NODE_ENV === "development" ? "http" : "https"; const ...

What is the best way to align text to the center in a bootstrap table?

Is there a way to center-align the text in this table? The text-center class doesn't seem to be working. <!-- Bootstrap-5 --> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfema ...

Toggling the visibility of a div using JavaScript

When I click the button, I want to show and then hide a div. However, it doesn't work on the first click - only on the second click. How can I make it work on the first click? HTML <p>Click the button</p> <button onclick="myFu ...

Implementing data filtering in a React component post data retrieval

Just diving into React and experimenting with filtering data once it's fetched. I have a select tag with options and I'm looking to update the data array based on the selected option. For instance, if 'crypto' is chosen, only display da ...

Tips for preventing the div from disappearing when using rotateY(90deg)

My website features a div element with an animation that gives the illusion of it being flipped over. <div id="wrapper"> <div id="content"> Some content </div> </div> To achieve this effect, I use the jQuery plugin ...

Enable and disable modal popup functionality in ng-bootstrap for Angular 5

How do I enable (editable) and disable (not editable) an ng-bootstrap modal popup? I have the following HTML code to display a modal popup when a button is clicked. However, I want it to be inactive until a certain condition is met. I am unsure of how to ...

Showing a PHP echo statement in an HTML div with the help of jQuery

I am looking for a way to showcase the echo text generated by PHP on a separate HTML page. I attempted to use jQuery for this purpose, but it proved unsuccessful. Please do not dismiss this question as I have gone through all the previous posts related to ...

Managing webdriver.io timeouts

What I'm trying to achieve is: Determine if the element "Error" span exists then perform a specific action if it does === else check if element "el2" span exists then take another action ==== else perform a default action This is my ...

Transfer external variables into the image's onload function

I am trying to retrieve image dimensions and then execute additional actions. Since the image onload function is asynchronous, I have decided to handle everything within the onload call. This is my current approach: function getMeta(url, callback) { v ...

To ensure that the first three digits of a phone number are not zeros, you can implement a JavaScript function to validate the input

I've been working on validating a phone number using JavaScript, but I've hit a roadblock. I need to ensure that the area code (first 3 numbers in 999) cannot be all zeros (0). While I know how to create the desired format (like xxx-xxx-xxxx), ...

Retrieving the data input from a datalist and using v-model will automatically reset the datalist

Looking for a way to preserve options in a datalist after selecting one using v-model in Vue. Currently, the selected option clears all other options due to two-way binding. Is there a method to only capture the selected value without removing the rest of ...

Angular - Is it possible to change the visibility of a component element from a different component?

Within my Angular application, I have the following setup: There is a component called MainDashboardComponent that is displayed when the route is /. The app.component.html file contains a <router-outlet> tag structured like this: <app-side-menu& ...

Exploring how to extract table data using XPath in PHP through continuous loops

Here is an example of the HTML code for a table: <tbody> <tr>..</tr> <tr> <td class="tbl_black_n_1">1</td> <td class="tbl_black_n_1" nowrap="" align="center">23/07/14 08:10</td> <td ...

Delete the element that was generated using jQuery

Is there a way to add and remove an overlay element using JavaScript? I am struggling to get JavaScript to remove an element that was created with JavaScript. Any suggestions? Check out this JS Fiddle example Here is the HTML code: <div id="backgroun ...

invoking a function from a parent controller within an EXTjs application using an Iframe

Hey everyone, I could really use some help with this seemingly simple issue: I've been tasked with editing an EXTjs application that already exists. Within this application, there is a point where an iframe is loaded to call an external HTML file as ...

Adding ngModel in the template causes the Angular component to load multiple times

I have been working on creating an Angular form and have successfully referenced the form in the Angular module. However, I am facing a problem where adding ngModel to an input textbox causes the Angular component to load multiple times on the page. Belo ...

"Need help passing an API key in the header of a Vue.js project? I recently encountered this issue while using a

How can I include an API key in the header of a Vue.js request? I am using DRF pagination. methods: { getPostData() { axios .get("http://192.168.43.126:8000/api/?page=" + this.currentPage, { headers: { &q ...

Challenges Encountered When Inputting Year in ReactJS Date Picker Component

I've encountered a problem with a date input component in my ReactJS project and need some assistance with resolving two issues: Problem 1: Year Input Length The first issue is that the year input field allows six digits, but I want to restrict it to ...

The issue of CSS Flexbox not aligning items to the right

Having trouble with the flexbox and need assistance setting up my navbar. I've written some code to display my logo + title on the left side of the navbar, and a menu of options on the right. However, all items are aligning to the left and the item-- ...

Checking for the Existence of a Class Element within a String using JavaScript

Within my web project, there is a scenario where if a user has been logged out in one browser tab, they will automatically be redirected to the login page in any other browser tab after interacting with that page (such as clicking on a link). However, this ...