Problem with Input Box Validation

My text input field in a web form has a JavaScript function declared like this:

<asp:TextBox ID="TextBox1" runat="server" onKeyUp="javascript:Count(this);" TextMode="Number"></asp:TextBox>


function Count(text) {
    // Handling textarea maxlength in ASP.NET manually
    var maxlength = 4; 
    var object = document.getElementById(text.id);
    if (object.value.length > maxlength) {
        object.focus();
        object.value = text.value.substring(0, maxlength); 
        object.scrollTop = object.scrollHeight; 
        return false;
    }
    return true;
}

I have also set the TextMode property of the TextBox to Number, but I am able to enter the letter "e" or "E" despite this, and the JavaScript function is not triggered when I do so. How can I correct this issue?

javascriptasp.net

Answer №1

Here's a suggestion. Utilize various data types to validate the input. Simply employ the MaxLength attribute to restrict the input to 4 characters.

<input type="text" id="inputField" onkeyup="checkInput(this, 'ALPHA')" maxlength="4">

<script type="text/javascript">
    function checkInput(inputElement, inputType) {
        if (inputElement.value !== "") {
            let validCharacters;
            if (inputType === "NUMERIC") {
                validCharacters = "0-9,.";
            } else if (inputType === "INT") {
                validCharacters = "0-9";
            } else if (inputType === "HASHTAG") {
                validCharacters = "a-z0-9-_#";
            } else if (inputType === "ALPHA") {
                validCharacters = "a-z";
            } else {
                validCharacters = "a-z0-9";
            }

            let regex = new RegExp("[" + validCharacters + "]+", "ig");
            let matches = inputElement.value.match(regex);

            if (matches === null) {
                inputElement.value = "";
            } else if (matches.length !== 0) {
                inputElement.value = matches.join("");
            }
        }
    }
</script>

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

What is the best method for transmitting the filename using Plupload?

I've been trying to solve this issue for a while now. My problem seems straightforward – I want to send the filename along with the file as a multipart request in Plupload, but so far, I haven't had any success. The main thing I'm missin ...

javascriptphpplupload

Mandatory press for a function known as a click

After dealing with a previous question on this matter, I have encountered yet another issue. My goal is to rotate an element clockwise by 22 degrees and then back to its initial state of 0 degrees on click. The first function executes correctly, but the ...

javascriptrotation

Utilizing Google Script to extract information from Gmail emails and transfer it to Google Sheets

I am facing a challenge with extracting data from an email and inputting it into a Google Sheet. While most of my code is functioning properly, I'm struggling with the regex section due to lack of expertise in this area. Below is a snippet of the HTM ...

javascripthtmlregexgmail

What is the best way to delete table rows based on their assigned class?

Within my HTML document, there is the following structure: <table id="registerTable"> <tr class="leaderRegistration"> <!--table contents--> </tr> <tr class="leaderRegistration"> <!--table conten ...

javascriptjqueryhtml

Example of Next.js Authentication - redirecting according to authentication status, encapsulating within other functionalities

I'm currently working on a project using next.js with authentication. The authentication is set up and working, but I'm having trouble displaying the data in my navbar. Originally, I was using firebase for authentication, but now I have it set u ...

javascriptreactjsfirebasefrontendnext.js

The appropriate method for showcasing cards within lists, such as in the platform Trello

I'm in the process of developing a project similar to Trello, but I'm facing some challenges on how to proceed. Initially, I created an 'init' function within my AngularJS Controller to handle HTTP requests: $scope.loadLists(); ...

javascriptangularjsnode.jsmongodbmongoose

What is the best way to display the value of a PHP variable in a JavaScript pop-up window?

Here are the scripts I have. A user will input a numerical value like 123 as a parameter in the URL, and the application will retrieve that value from MySQL and display it in the textarea. For example, if you enter "example.com/index.php?id=123" in the UR ...

phpjavascriptajax

Enabling Context Isolation in Electron.js and Next.js with Nextron: A Step-by-Step Guide

I've been working on a desktop application using Nextron (Electron.js + Next.js). Attempting to activate context isolation from BrowserWindow parameters, I have utilized the following code: contextIsolation: true However, it seems that this doesn&ap ...

javascriptnode.jsnext.jselectron

Adjusting the size of the iframe to match the dimensions of the window

Is there a way to make the iframe automatically fill up the entire space? For example, only opens the iframe up to half of the window in Mozilla Firefox and IE6. How can I ensure that it takes the maximum size of the screen? Are there any CSS or JavaScr ...

javascriptcssiframesize

Utilizing AngularJS to implement checkbox selection within a table

I'm working on a method that will receive an Id from a table when a checkbox is checked and update the $scope.selected array in my Angular controller. If the checkbox is unchecked, it should remove the corresponding item from $scope.selected. Here&ap ...

javascriptangularjsangularjs-scope

Filtering nested arrays in Angular by cross-referencing with a navigation menu

In the legacy application I'm working on, we have a navigation menu along with a list of user roles. Due to its legacy nature, we have accumulated a significant number of user roles over time. The main goal is to dynamically display the navigation me ...

javascriptarraysangulartypescriptangular12

Running into an issue while attempting to generate functions in nodejs

I'm currently working on a function to authenticate a URL for a fetch request. However, when I attempt to call this function within the app.post callback, my Node.js server throws an error: "TypeError: authenticateUrl(...) is not a function". Does Nod ...

javascriptnode.jsexpress

Is it possible to retrieve local variable JSON arrays using ajax/getJson()?

When starting a project without a database or data source, I often create json arrays in a *.js file to populate screens until the data modeling or database creation is complete. I am trying to figure out how to write an ajax/getJson() function to access ...

javascriptjqueryajax

Ways to display additional text with a "Read More" link after three lines of content without relying on a

I am currently working on an application where I need to display text in a limited space of 3 lines. If the text exceeds this limit, I want to show either "Read More" or "Hide". Below is the code snippet that I am using for this functionality. class Cust ...

javascriptreactjsreact-native

Using an AJAX post request to retrieve the HTML content

I'm grappling with an AJAX function and a processor.php script. Here's the code snippet: $.ajax({ url: "processor.php", type:"POST", data: { 'id' : "itemid, 'itemname' : itemname, 'itemdesc' : itemdesc" ...

javascriptjqueryajax

Express framework in NodeJS encounters an undefined header error

Utilizing Microsoft Flow to dispatch an HTTP POST request to my server, the request body includes a custom header known as "Email-To" with a string value. Here is the body: { "$content-type": "multipart/form-data", "$multipart": [ { "headers ...

javascriptnode.jsexpresshttphttp-headers

The behavior of Datatables varies depending on the screen resolution

In my data table, there are numerous entries with child tables on each row of the main table. I am currently in the process of incorporating this type of functionality into my table, with a few modifications to create a table within the child row. You can ...

javascriptcssasp.net-mvcresponsive-designdatatables

Is there any benefit to making the SVG elements width and height 100%?

The Angular Material documentation app features an SVG Viewer that is able to scale the SVG content to fit the container using the following function: inlineSvgContent(template) { this.elementRef.nativeElement.innerHTML = template; if (this.sca ...

javascripthtmlcssangularsvg

Issue with setTimeout function when used in conjunction with an ajax call

Currently, I am developing a quiz portal where questions are organized in modules. Each module consists of 5 questions: the first 4 are text-based, and the 5th is an image-based question. Upon registering through register.php, users are directed to index. ...

javascriptajaxsettimeout

The AJAX response is incorrect due to a PHP request, leading to the reloading

Whenever the 'signup' button is clicked, a function in my code initiates an HTML switch. The issue I am facing arises when I test for incorrect email or password during sign up. While I can successfully verify the data, it still loads the previou ...

javascriptphpajaxwebdev.webserver