Ensuring maximum length validation on input

Question

Ensuring maximum length validation on input

I am having an issue with the function "checkNumbers()". I am attempting to validate if my input does not exceed 10 numbers; while "isAllowedSymbol()" is functioning correctly, the other one is not. What could be causing this problem?

 function isAllowedSymbol(input)
        { 
            var value = input.value; 
            var rep = /[a-zA-Z]/;
            var rep2 = /[а-яА-Я]/;

        if (rep.test(value))
        { 
        value = value.replace(rep, ''); 
        input.value = value; 
                if (rep2.test(value))
                { 
                value = value.replace(rep2, ''); 
                input.value = value; 
                }
        } 
    }
    var element = document.querySelector("input[name=answer]");


    function checkNumbers(element) {
      if (element != null && element.value.length > 10) {
        element = element.replace(element, '');
      }
    }

<input type="text" maxlength="10" name="answer" onkeyup="isAllowedSymbol(this);checkNumbers(this);" placeholder="Enter data" > <br>

javascript html css

Answer 1

Answer №1

What is your desired action? If you want the input box to clear when the input exceeds 10 characters, first modify the maxlength attribute of the input box.

<input type="text" maxlength="15" name="answer" onkeyup="isAllowedSymbol(this);checkNumbers(this);" placeholder="Enter data">

Answer 2

What is your desired action? If you want the input box to clear when the input exceeds 10 characters, first modify the maxlength attribute of the input box.

<input type="text" maxlength="15" name="answer" onkeyup="isAllowedSymbol(this);checkNumbers(this);" placeholder="Enter data">

Answer 3

Answer №2

By setting the maxlength = 10 for the input, you have restricted the ability to add new characters. Therefore, the condition element.value.length > 10 will never be met.

Here is an alternative solution:

function isAllowedSymbol(input)
        { 
            var value = input.value; 
            var rep = /[a-zA-Z]/;
            var rep2 = /[а-яА-Я]/;

        if (rep.test(value))
        { 
        value = value.replace(rep, ''); 
        input.value = value; 
                if (rep2.test(value))
                { 
                value = value.replace(rep2, ''); 
                input.value = value; 
                }
        } 
    }
    var element = document.querySelector("input[name=answer]");


    function checkNumbers(element) {
      if (element != null && element.value.length > 10) {
        element.value = ''
      }
    }

<input type="text" maxlength="15" name="answer" onkeyup="isAllowedSymbol(this);checkNumbers(this);" placeholder="Enter data" > <br>

Answer 4

By setting the maxlength = 10 for the input, you have restricted the ability to add new characters. Therefore, the condition element.value.length > 10 will never be met.

Here is an alternative solution:

function isAllowedSymbol(input)
        { 
            var value = input.value; 
            var rep = /[a-zA-Z]/;
            var rep2 = /[а-яА-Я]/;

        if (rep.test(value))
        { 
        value = value.replace(rep, ''); 
        input.value = value; 
                if (rep2.test(value))
                { 
                value = value.replace(rep2, ''); 
                input.value = value; 
                }
        } 
    }
    var element = document.querySelector("input[name=answer]");


    function checkNumbers(element) {
      if (element != null && element.value.length > 10) {
        element.value = ''
      }
    }

<input type="text" maxlength="15" name="answer" onkeyup="isAllowedSymbol(this);checkNumbers(this);" placeholder="Enter data" > <br>

Ensuring maximum length validation on input

Answer №1

Answer №2

Similar questions

What is the best approach to gather both the intersection and the complements of two arrays in a single operation?

ReactJS: Want to update card design by utilizing the onClick event handler

Determine the frequency of a specific letter in JavaScript by utilizing the indexOf method

Safari experiencing sporadic issues with reCAPTCHA AJAX API within modal dialogs

How can it be that "Function" actually functions as a function?

"Rest API is not activating JavaScript on Android devices, whereas it functions correctly in web browsers

What could be causing the issue of my CSS file not properly connecting with my HTML files in Django?

Executing a script for every row in a table using Python and Selenium

There seems to be an issue with npm displaying an inaccurate version number for my

The filter functionality isn't functioning properly when attempting to filter an array of objects within a Vuex action

Implementing the ability to add and remove classes in JavaScript

Display the count of ng-repeat items beyond its scope

Using Key Press to Rotate Messages - Jquery

Is Restangular taking forever to resolve the promise?

The basic evaluation of jQuery elements does not result in a comparison

There appears to be a malfunction with certain hyperlinks on the table

Firebase issue: The function ref.once is throwing an Uncaught TypeError and is not recognized

Most effective method for structuring a JSON format that contains recurring keys for every item within its array

Navigate to the final element of a mapped array

Adapt the CSS based on different screen sizes