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.

Answer 1

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.

Answer 2

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));
    });
});