Limit Input text box with Jquery

Question

So I need to have an input box in where people only is allowed to enter either the words "Yes" or "No". No other input is allowed. Does anybody out there knows a plugin or any other easy way to that with Jquery? I found a plugin named constraint (http://plugins.jquery.com/project/constrain), that can prevent the user from typing certain characters, but that is not enough, as the plugin can only prevent the user from typing numbers in an alphabetic field, for example. Drop down boxes or other components are not an option.

Thank you for your help.

What about a checkbox? That is a yes/ no element... :) Honestly, it would be much more user friendly (if you are not making a test about user friendliness...). You really must have a very very good reason to not use it. — Felix Kling
– Felix Kling, Commented Aug 27, 2010 at 16:24
quote "Drop down boxes or other components are not an option." — Eton B.
– Eton B., Commented Aug 27, 2010 at 16:25
If you want to present users with a binary choice, it makes for a far better user experience to use a non-text input. — Matt Ball
– Matt Ball, Commented Aug 27, 2010 at 16:26
plugin to validate the yes and no values? You can write a simple function to do that. — Ankit Jaiswal
– Ankit Jaiswal, Commented Aug 27, 2010 at 16:27
@Felix Kling and others: The reason I can't use a drop down, radio buttons, a checkbox and others, is because that was a management decision. Trust me, If it were my decision, I would have used something else. Unfortunately, they pay my salary and call the shots. There is nothing really anything I can do about this. — webyacusa
– webyacusa, Commented Aug 27, 2010 at 16:42

David Hoerster · Accepted Answer · 2010-08-27 17:01:44Z

Why not something like this (link to jsFiddle)? This will only let you type those characters that are contained in an array of allowed values? I suspect there's a better way to check for the existence of values or partial values in the array instead of looping. But this will be triggered by a user's key press, not when the control loses focus...so the UX may be better.

Hope this helps!!

HTML

Enter text: <input type="text" id="data" />

JavaScript Code

var allowedValues = ['yes','no'];
$(document).ready(function() {
    $("#data").keyup(function(e) {
        var typedValue = $(this).val(),
            valLength = typedValue.length;
        for(i=0;i<allowedValues.length;i++) {
            if(typedValue.toLowerCase()===allowedValues[i].substr(0,valLength)) {
                return;
            }
        }
        $("#data").empty().val(typedValue.substr(0, valLength-1));
    });
});

user113716 · Accepted Answer · 2010-08-27 17:07:52Z

0

Based on clarification in comment, try this:

Try it out: http://jsfiddle.net/fsPgJ/2/

EDIT: Added a keypress event to deal with the user holding down a key.

$('input').blur(function() {
    var val = this.value.toLowerCase();
    if(val != "yes" && val != "no") {
        this.value = '';
        alert( "'Yes' or 'No' is required. \n Please try again.");
    }
})
    .keypress(function() {
        var val = this.value.toLowerCase();
        if(val != "yes" && val != "no")
            this.value = '';
    })
    .keyup(function() {
        var val = this.value.toLowerCase();
        if("yes".indexOf(val) != 0 &&
           "no".indexOf(val) != 0) {
               this.value = this.value.substr(0,this.value.length - 1);
           }
    });

Original:

If there's some reason you're not using a <select> or :radio or something, then you could have jQuery check the value on a .blur() event.

Try it out: http://jsfiddle.net/fsPgJ/

$('input').blur(function() {
    var val = this.value.toLowerCase();
    if(val != "yes" && val != "no") {
        this.value = '';
        alert( "'Yes' or 'No' is required. \n Please try again.");
    }
});

This just clears the input if the (case insensitive) value is not "yes" or "no". I also added an alert() to give the user a little feedback as to why the field was cleared. You may want a different feedback approach.

edited Aug 27, 2010 at 17:07

answered Aug 27, 2010 at 16:27

user113716

323k64 gold badges454 silver badges441 bronze badges

3 Comments

webyacusa Over a year ago

I'm actually looking for something a bit more sophisticated. Ideally I want to actively block the input dynamically. This is, if the user press the letter X, then it shouldn't be even displayed, as the only valid enters start with Y or N

user113716 Over a year ago

@webyacusa - Just updated my answer. I left the .blur() event in there because a keyup() won't help if the user uses the GUI to paste text into the input.

user113716 Over a year ago

@webyacusa - Did you see my update? The answer you Accepted is basically the same as the keyup() part of mine, but doesn't handle other situations (and is less efficient). Also has some code that just doesn't work, like: $("#data").empty() which does nothing.

Collectives™ on Stack Overflow

Limit Input text box with Jquery

2 Answers 2

HTML

JavaScript Code

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

HTML

JavaScript Code

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related