Jquery Textbox Validation

Question

Hi I have one text box with no action buttons. On typing itself it has to validate whether it is from A to z, if not it has throw an error next to text box. How can I achieve this?

checkout this.. http://stackoverflow.com/questions/5241957/validate-a-textbox-using-jquery?rq=1 — Joe DF, Mar 23 '13 at 22:40
that is not the one which I'm looking for. A single textbox on typing it has to do two things: check only a-z is entered and if not it has to throw error while typing itself. — user2202425, Mar 23 '13 at 22:45
yes, can u help me on this and it has to be implemented only using jquery — user2202425, Mar 23 '13 at 22:53
Is it ok if you dont need to throw error? We will just not allow to enter him characters other than A to Z — DevelopmentIsMyPassion, Mar 23 '13 at 22:57
@Ashreva, my requirement is to throw error!!I myself tried and blocked non-[a-z] characters but i couldnt throw error at the same time. — user2202425, Mar 23 '13 at 23:08
see this link http://stackoverflow.com/questions/2812585/jquery-validate-characters-on-keypress — DevelopmentIsMyPassion, Mar 23 '13 at 23:11

Joe DF · Answer 1 · 2013-03-23T23:21:05.233

Here you go! i have made it simple, so one can understand the basic logic of it :)

here is my jsfiddle..

http://jsfiddle.net/joedf/mhVqr/2/

Html

<input type='text' id='textbox'>
<input type="button" class="button-disabled" id="change" disabled="disabled" value="click">
<div id="throwEx"/>

JS

$("#throwEx").hide();
$("#textbox").keyup(checkForm).focus(checkForm);

function checkForm() {
    var needle = /^([a-zA-Z0-9]+)$/;
    var inputVal = $("#textbox").val();

    if (inputVal == '') {
        $("#change").addClass("button-disabled").removeClass("button");
        $("#change").attr("disabled", "disabled");
        $("#throwEx").hide();
    }
    else if (!needle.test(inputVal)) {
        $("#change").addClass("button-disabled").removeClass("button");
        $("#change").attr("disabled", "disabled");
        $("#throwEx").text("Error: Only Alphanumeric characters are allowed...");
        $("#throwEx").show();
    } else {
        $("#change").removeClass("button-disabled").addClass("button");
        $("#change").removeAttr("disabled");
        $("#throwEx").hide();
    }
}

Marcel Gwerder · Accepted Answer · 2013-03-23T23:29:32.543

1

This may work for you:

<input type="text" class="abc">

Maybe you have do adjust the regex, haven't really tested it:

$(document).ready(function() {
$('.abc').bind('keyup', function() {
    regex = /^[A-z0-9]+$/;
    if(!regex.test($(this).val())) {
        $(this).next('.error').remove();
        $(this).after('<div class="error">Wrong</div>');
    } else {
       $(this).next('.error').remove();            
    }
}); 
});

Fiddle: http://jsfiddle.net/EB6ET/2/

edited Mar 23 '13 at 23:29

answered Mar 23 '13 at 23:13

Marcel Gwerder

8,353
5
35
60

This is what, which I'm exactly looked for..thanks:). can you please change the conditions alone on the above code..1)accept only a to z 2)accept only 0 to 9.. – user2202425 Mar 23 '13 at 23:26

score 1 · Answer 3 · edited May 23 '17 at 10:26

1

I got this from stackoverflow here and have modified only to enter characters A to z.

<input type="text"/>

$(document).ready(function () {

$('input').keyup(function() {
    var $th = $(this);
    $th.val( $th.val().replace(/[^a-z]/g, function(str) { alert('You typed " ' + str + ' ".\n\nPlease use only letters and numbers.'); return ''; } ) );
});
});

Link to fiddle here

edited May 23 '17 at 10:26

Community

1
1

answered Mar 23 '13 at 23:17

DevelopmentIsMyPassion

3,541
4
34
60

score 1 · Answer 4 · answered Mar 23 '13 at 23:34

Controlling the TextBox using the keyup function is a bad idea because the user may copy/paste the text inside the TextBox or choose one of the browser's autocomplete fields, etc. My approach:

LIVE JSFIDDLE

HTML:

<input type="text" id="TextBox1" name="TexBox1" value="" />
<span id='error' name='error'></span>

JS:

function monitor() {
    if ($('#TextBox1').val().length > 0) {
        var reg = /^([a-zA-Z]+)$/;
        if (!reg.test($('#TextBox1').val())) {
            $('#error').html("Only letters are allowed!");
        } else {
            $('#error').html("");
        }
    } else {
        $('#error').html("");
    }
}

var timer = '';

$('#TextBox1').on('focus', function () {
    timer = setInterval(monitor, 100);
}).on('blur', function () {
    clearInterval(timer);
});

Jquery Textbox Validation

4 Answers4