Verify whether the field includes a minimum number of numerical digits

Question

Verify whether the field includes a minimum number of numerical digits

I am currently using this script to validate whether a field is empty or not. The script works well for me, but I would like to add a condition that the field must contain at least 10 digits (numbers). If it doesn't meet this requirement, I want to display an error message as shown in the script. Can anyone help me figure out what needs to be added to the code below?

function checkIfBlank() {

var errorMessage = "";

    if (document.getElementById('phoneNumber').value == "") {
        errorMessage += "Your phone number must contain 10 digits.";
        document.getElementById('phoneNumber').style.borderColor = "red";
    }

    if (errorMessage != "") {
        $(".error-messages").text(errorMessage).fadeIn();
        return false;
    }

}

javascript forms validation error-handling

Answer 1

Answer №1

Eliminate any characters that are not numbers and determine the total count of digits

'x1y234z567k890---'
    .replace(/[^\d]/g, '') // "1234567890"
    .length;               // 10

Answer 2

Eliminate any characters that are not numbers and determine the total count of digits

'x1y234z567k890---'
    .replace(/[^\d]/g, '') // "1234567890"
    .length;               // 10

Answer 3

Answer №2

If you are looking to validate a field for length on submission and it should only contain digits, you can utilize the following code snippet.

function checkPhoneNumber() {

    var errorMessage = "";
    var inputVal = document.getElementById('telefoonnummer').value;
    if (inputVal == "") {
        errorMessage += "Your 10 digit phone number is missing. ";
        document.getElementById('telefoonnummer').style.borderColor = "red";
    } 
    else if (inputVal !== "" && inputVal.length !== 10) {
        console.log("error");
        //set your error message here
    } 
    else {
        console.log("success");
    }

    if (errorMessage !== "") {
        $(".error-messages").text(errorMessage).fadeIn();
        return false;
    }

}

Update: Modified Version based on OP feedback - JSFiddle Link

Answer 4

If you are looking to validate a field for length on submission and it should only contain digits, you can utilize the following code snippet.

function checkPhoneNumber() {

    var errorMessage = "";
    var inputVal = document.getElementById('telefoonnummer').value;
    if (inputVal == "") {
        errorMessage += "Your 10 digit phone number is missing. ";
        document.getElementById('telefoonnummer').style.borderColor = "red";
    } 
    else if (inputVal !== "" && inputVal.length !== 10) {
        console.log("error");
        //set your error message here
    } 
    else {
        console.log("success");
    }

    if (errorMessage !== "") {
        $(".error-messages").text(errorMessage).fadeIn();
        return false;
    }

}

Update: Modified Version based on OP feedback - JSFiddle Link

Answer 5

Answer №3

    //checking whether the input is a number or not------
    function verifyInput(event, value){//utilize this function during keyup event of your field
    if(value.length <= 10) //check if it is up to 10 digits
    {   
    if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
                     // Allow: Ctrl+A
                    (event.keyCode == 65 && event.ctrlKey === true) || 
                     // Allow: home, end, left, right
                    (event.keyCode >= 35 && event.keyCode <= 39)) {
                         // allow these keys, no action needed
                         return;
                }
                else {
                    // Confirm that it is a number and prevent the keypress
                    if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                        event.preventDefault(); 
         }

                       }   
                    }
            }

implement the code with your text field like so

<input type="text" id="phone" onkeyup = "verifyInput(event,this.value);" />

Answer 6

    //checking whether the input is a number or not------
    function verifyInput(event, value){//utilize this function during keyup event of your field
    if(value.length <= 10) //check if it is up to 10 digits
    {   
    if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
                     // Allow: Ctrl+A
                    (event.keyCode == 65 && event.ctrlKey === true) || 
                     // Allow: home, end, left, right
                    (event.keyCode >= 35 && event.keyCode <= 39)) {
                         // allow these keys, no action needed
                         return;
                }
                else {
                    // Confirm that it is a number and prevent the keypress
                    if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                        event.preventDefault(); 
         }

                       }   
                    }
            }

implement the code with your text field like so

<input type="text" id="phone" onkeyup = "verifyInput(event,this.value);" />

Verify whether the field includes a minimum number of numerical digits

Answer №1

Answer №2

Answer №3

Similar questions

Identifying rectangular shapes in an image and overlaying a div on top using Jquery

How come I'm facing difficulties when trying to send a post request to my WebApi using AngularJS's POST method?

error 404 when sending a xhr request in node and react js

Tips for effectively testing an Angular directive

Guide on transferring href parameter from the parent Vue component to the child component

Tips for showcasing a Bootstrap alert

Inject a jQuery form submission using .html() into a div element

Creating a dynamic 2D image using HTML5 animation

Bootstrap Table encountering issues when displaying JSON data from Ajax response

Sorting a function with two parameters in descending order is possible even when dealing with an empty array and no initial value for reduction

What is the best way to showcase images using Vue.js?

issue with useReducer not functioning as expected

Retrieve data from a div element on a webpage using specific parameters

Top storage solution for ExpressJS in the world of NodeJS

The mystery of why gulp-watch fails to remove files

utilize jquery ajax to input various data

Is it possible to customize the width of text color alongside a progress bar?

PhoneGap and jQuery prove ineffective in fetching json results from Twitter

Linking model attribute to checkbox in AngularJs

Adding content into a designated position in a document