I have the following text box in my html page .

The code which I am using so far is .

<input type="text" id = "points" onkeyup="Validate()">
function Validate(){


var text_value = document.getElementById("points").value;
alert(text_value);

   if (!text_value.match(/^[56789]$/) && document.getElementById(called_id).value !="")
    {
       document.getElementById("points").value="";
       //  document.getElementById("points").focus(); 
       alert("Please Enter only between 5 and 10 ");
    }

}     

Accepted values are 5 , 6 , 7 , 8 , 9 and 10 . I have found the way based on onkeyup event to accept only 5 , 6 , 7 , 8 and 9 .. I want to know how to include 10 there . Also I want to know the onkeyup event validation for the same using jquery .

1. If the user gives any other value apart from these it should be given to the right of the text box as "The value should be between 5 and 10 " (not as an alert) .
2. If the first entered value is 1 , it should wait for the next key pressed . Accept if it is 0 or raise the same error message as in previous case .

I have the following text box in my html page .

The code which I am using so far is .

<input type="text" id = "points" onkeyup="Validate()">
function Validate(){


var text_value = document.getElementById("points").value;
alert(text_value);

   if (!text_value.match(/^[56789]$/) && document.getElementById(called_id).value !="")
    {
       document.getElementById("points").value="";
       //  document.getElementById("points").focus(); 
       alert("Please Enter only between 5 and 10 ");
    }

}     

Accepted values are 5 , 6 , 7 , 8 , 9 and 10 . I have found the way based on onkeyup event to accept only 5 , 6 , 7 , 8 and 9 .. I want to know how to include 10 there . Also I want to know the onkeyup event validation for the same using jquery .

1. If the user gives any other value apart from these it should be given to the right of the text box as "The value should be between 5 and 10 " (not as an alert) .
2. If the first entered value is 1 , it should wait for the next key pressed . Accept if it is 0 or raise the same error message as in previous case .

• javascript
• jquery
• validation
• alert

Share Improve this question Follow edited Jul 19, 2013 at 7:04 Nishanth Lawrence Reginold asked Jul 19, 2013 at 6:49 Nishanth Lawrence ReginoldNishanth Lawrence Reginold 1,62144 gold badges2929 silver badges4343 bronze badges 6

• 3 This is not a site where you hire developers to do the work for you (as you don't pay anyone). This a munity that helps you with code. We don't build plete code for you to use. Please update your post and show us what you have tried. – Shawn31313 Commented Jul 19, 2013 at 6:50
• I have been using alert and did for 5 to 9 . I need help in the remaining thats why I have asked – Nishanth Lawrence Reginold Commented Jul 19, 2013 at 6:54
• post your code here plz – Zaheer Ahmed Commented Jul 19, 2013 at 6:55
• I want the validation through javascript or jquery . I cant use max and min values since I am not using form tag input type= "number" box – Nishanth Lawrence Reginold Commented Jul 19, 2013 at 7:07
• Is onkeyup is mandatory for you or is it possible to use 'onblur' – Anupam Commented Jul 19, 2013 at 7:11

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 1

Working Jsfiddle

I would prefer without regex:

function validate() {
    var num = document.getElementById("points2").value;
    var num = parseInt(num, 10);
    alert(num);
    if (num < 5 || num > 10) {
        document.getElementById("points2").value = "";
        alert("Please Enter only between 5 and 10 ");
    }
}

change your regex to :

/^([5-9]|10)$/

you should use onchange event:

<input type="text" id = "points"  onchange="Validate()">

function Validate(){    
var text_value = document.getElementById("points").value;
alert(text_value);

   if (!text_value.match(/^([5-9]|10)$/) && document.getElementById(called_id).value !="")
    {
       document.getElementById("points").value="";
       //  document.getElementById("points").focus(); 
       alert("Please Enter only between 5 and 10 ");
    }

}  

$('#textbox').keyup(function() {
    var value = $('#textbox').val();
    if(value != ''){
        if(!value.match(/^[5678910]$/))  
            textboxError();
        else{
            var length = value.length;
            if(value.charAt(length-1) == 0 && value.charAt(length-2) != 1)
                textboxError();
        }
    }
};

$('#textbox').change(function() {
    var value = $('#textbox').val();
    if(value != '')
        textboxError();
    }
};

function textboxError(){
    $('#textbox').val(''); 
    $('#textbox').focus(); 
    alert("Please Enter only between 5 and 10 ");
}

What we are doing is,

1. Check if value is empty (If empty don't perform anything)
2. If not empty check if the value matches to defined set
3. If it match, now we do check for 10. What we do is if last entered item of field is 0, than the previous field must be 1 so it makes a 10. If not we throw error.
4. But here is a problem, the user might enter 1 and leave the field without entering another char. So, u can extend this by onchange field.
5. Onchange, now we check for count of 1 and that should match count of 10. It fixes our problem. You don't have to worry of 0 because we already check it in keyup block.

I Didn't check the code. So if any typos or errors, u can replace them.

As Zaheer Ahmed stated, /^([5-9]|10)$/ will catch 10 as well. For the event listener, you can use

$('#textbox')[0].addEventListener('input', function(event) {
  var value = $(event.target).val();  
  // we already have a reference to the element through the event object,
  // crawling the DOM again is expensive.

  if(value != '') textboxError();
});

This bypasses jQuery, which may be frowned upon by some, but the 'input' event fires immediately and also works if the text was pasted in or entered by some other method.