Setting a maximum and minimum value for text box

Question

I own a canvas website and want my customers to be able to enter a custom length of the canvas within a set range.

Say the range for the product is:

Minimum: 10 cm
Maximum: 200 cm

Then in the text box they can enter any number between that range, but if they enter "215" then it should automatically go down to "200". Likewise if they enter "7" then it should automatically go up to "10"

Input text fields have a maxlength attribute, but there's no minlength. You can put some javascript in there to detect insufficient data, as long as you do the same check server-side afterwards. — Marc B
– Marc B, Commented Jun 20, 2011 at 15:48

Naftali · Accepted Answer · 2011-06-20 15:47:10Z

6

document.getElementById('textBoxID').onchange = function(){
      if(this.value > 200){
           this.value = 200;
      }
      if(this.value < 10){
           this.value = 10;
      }
}

Here is a fiddle example: http://jsfiddle.net/maniator/qwFN6/

answered Jun 20, 2011 at 15:47

Naftali

147k41 gold badges247 silver badges304 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

locrizak Over a year ago

although this will work, onchange is fired along with blur so the user experience might not be the greatest

Naftali Over a year ago

@locrizak so use onkeyup instead -- although that would ruin things when the 1st number a user enters is always below 10

Devin Burke Over a year ago

@Neal, you should add to also use $('#textBoxID').numeric() to prevent non-numeric characters.

Naftali Over a year ago

@Justin -- where did libraries come into the picture? the question asked about plain javascript...

Naftali Over a year ago

@Justin -- you can add that type of validation as well with plain js. just its more work ^_^

|

Karolis · Accepted Answer · 2011-06-20 15:52:04Z

1

<input type="text"
    onchange="this.value = (this.value > 215) ? 215 : ((this.value < 10) ? 10 : this.value);">

answered Jun 20, 2011 at 15:52

Karolis

9,59231 silver badges41 bronze badges

2 Comments

Naftali Over a year ago

this seems like a more confusing way of doing what I did in my answer -- also inline js is not always the best way to go

Karolis Over a year ago

@Neal, your suggestion is definitely better. I just wanted to show the inline way.

Sanjeev Chauhan · Accepted Answer · 2011-06-20 16:24:17Z

0

Find below jQuery based code

   <script type="text/javascript" src="jquery-1.5.1.js"></script>
    <style>
    #customForm input.error{
        background: #f8dbdb;
        border-color: #e77776;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
        //global vars
        var form = $("#customForm");    
        var canvas = $("#canvasID");
        var canvasInfo= $("#canvasInfo");
        //On blur   
        canvas.blur(validateCanvas);    

        //On Submitting
        form.submit(function(){
            if(validateCanvas())
                return true
            else
                return false;
        });

        function validateCanvas(){
            //if it's NOT valid
        if(canvas.val()< 10 || canvas.val()>200){
            if(canvas.val()< 10) {
                canvas.val('10');
            }
            if(canvas.val()>200) {
                canvas.val('200');
            }
                canvas.addClass("error");
                canvasInfo.text("We want canvas Minimum: 10 cm and Maximum: 200 cm");           
                return false;
            }
            //if it's valid
            else{       
                canvas.removeClass("error");
                canvasInfo.text("");
                return true;
            }
        }   
    });
 </script>

edited Jun 20, 2011 at 16:24

answered Jun 20, 2011 at 15:54

Sanjeev Chauhan

4,1273 gold badges26 silver badges31 bronze badges

2 Comments

Naftali Over a year ago

also i realize that this has nothing to do with the OP's question

Sanjeev Chauhan Over a year ago

Good point Neal thanks, It was my mistake I had updated wrong content. But now I have updated my script

Collectives™ on Stack Overflow

Setting a maximum and minimum value for text box

3 Answers 3

12 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related