CODEWITHSUNDEEP
javascriptjqueryhtml
Raja Shekar
Raja Shekar

Reputation: 133

How to restrict a field to take only 4 numeric characters as input and get's an alert in div

I wanted a text field to take only numbers as some control keys and number should be exactly four digit long. My code is as Follows:

<div id="main" role="main">
                Input a 4-digit: <input type="text" class="validateYearTextBox" />
            </div>
<div id="alert"></div>

function checkValidInput() {
    $(".validateYearTextBox").keydown(function(event) {       
        if (!((event.keyCode == 46 || 
            event.keyCode == 8  || 
            event.keyCode == 37 || 
            event.keyCode == 39 || 
            event.keyCode == 9) || 
            $(this).val().length < 4 &&
            ((event.keyCode >= 48 && event.keyCode <= 57) ||
            (event.keyCode >= 96 && event.keyCode <= 105)))) {
                        // Stop the event
                        event.preventDefault();
                        return false;                       
            }
    });
}
$(document).ready(function() {

    checkValidInput();
});

when I enter a 4 digit in the text box a alert should be appear in div as "valid"

this is the Fiddle

Upvotes: 0

Views: 49

Answers (5)

Shamii
Shamii

Reputation: 3

Try this simple script after adding onblur="checkValidInput" id="validateYearTextBox" to input tag 

function checkValidInput(){
var x,text;
x=document.getelementbyid("validateYearTextBox").value;
if(x==4)
text="Valid";
else
text="Not valid";
}
document.getelementbyid("alert").innerHTML=text;

Upvotes: 0

Suyog
Suyog

Reputation: 2482

JSFiddle

Try following:

<div id="main" role="main">
    Input a 4-digit: <input type="text" class="validateYearTextBox" />
</div>
<div id="alert"></div>

<script>
function checkValidInput() {
    $(".validateYearTextBox").keydown(function(event) {       
        if (!((event.keyCode == 46 || 
            event.keyCode == 8  || 
            event.keyCode == 37 || 
            event.keyCode == 39 || 
            event.keyCode == 9) || 
            $(this).val().length < 4 &&
            ((event.keyCode >= 48 && event.keyCode <= 57) ||
            (event.keyCode >= 96 && event.keyCode <= 105)))) {
                        // Stop the event
                        event.preventDefault();
                        return false;                       
            }

            // count number of characters entered
            var cs = $('.validateYearTextBox').val().length;
            if(cs == 3)
            {
                $('#alert').html('valid'); 
            }
            else
            {
                $('#alert').html(''); 
            }
    });
}
$(document).ready(function() {

    checkValidInput();
});
</script>

Upvotes: 2

Jesper H&#248;jer
Jesper H&#248;jer

Reputation: 3192

I would do something like this.

function checkValidInput() {
    $(".validateYearTextBox").keydown(function(event) {    

       if( $(this).val().length == 3){
            $('#alert').html('<p>SUCCESS</p>');
       } 
        if (!((event.keyCode == 46 || 
            event.keyCode == 8  || 
            event.keyCode == 37 || 
            event.keyCode == 39 || 
            event.keyCode == 9) || 
            $(this).val().length < 4 &&
            ((event.keyCode >= 48 && event.keyCode <= 57) ||
            (event.keyCode >= 96 && event.keyCode <= 105)))) {
                        // Stop the event
                        event.preventDefault();
                        return false;                       
            }
    });
}
$(document).ready(function() {

    checkValidInput();
});

Upvotes: 0

Jai
Jai

Reputation: 74738

You can use regular expression for it and change to keyup event: 

function checkValidInput() {
  var re = /\d{4}/g,
    dt = $('.validateYearTextBox'),
    msg;
  msg = re.test(dt.val()) ? "Valid" : "Invalid";
  $('#alert').text(msg);
}

$(".validateYearTextBox").keyup(checkValidInput);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" role="main">
  Input a 4-digit:
  <input type="text" class="validateYearTextBox" />
</div>
<div id="alert"></div>

Upvotes: 0

Jayesh Chitroda
Jayesh Chitroda

Reputation: 5049

Try this:

Jsfiddle: https://jsfiddle.net/jz1ra36d/

just add:

$(".validateYearTextBox").keyup(function(event) {    
  if( $(this).val().length == 4){
     $("#alert").text("valid")
   } else {
     $("#alert").text("")
   }
});

Upvotes: 3

Related Questions