Input text validation using jQuery

Question

I have a situation where i want to validate the text entered into a input text field. This is the HTML code:

<div id="err_title" style="display:none;">Please enter a valid Number.</div>
<input type="radio" id="txt_a-radio" value="valueA" checked="checked">
<input type="text" id="txt_a">
<input type="radio" id="txt_b-radio" value="valueB">
<input type="text" id="txt_b" disabled>

By default #txt_b field will be disabled, when user clicks on #txt_b-radio button #txt_b will be enabled and #txt_a will be disabled.

The condition for validation is:

#txt_a can contain only 12 digit number
#txt_b can contain only 20 digit number

Validation should happen once user enters value in enabled field then clicks anywhere outside. If value entered by user is not valid error message #err_title should display.

Suppose if user enters value for #txt_a and then clicks on #txt_b-radio button then validation shouldn't happen since user has switched the input field.In this case #txt_a should be disabled and txt_b enabled.

I have tried with the following code:

$('#txt_a').change(function() { 
    custNumber = $('#txt_a').val(); expression = /^[0-9]{12}$/; 
    if(custNumber === '') {
        $("#err_title").css('display', 'none'); 
    } else if ((!custNumber.match(regexp))) { 
        $("#err_title").css('display', 'block'); 
    } else { 
        $("#err_title").css('display', 'none'); 
    } 
});

For best results, you should show your efforts (your code), along with the specifics of your problem. — Neo
– Neo, Commented Nov 30, 2016 at 13:24
I have tried with the following code: $('#txt_a').change(function() { custNumber = $('#txt_a').val(); expression = /^[0-9]{12}$/; if(custNumber === ''){ $("#err_title").css('display', 'none'); }else if ((!custNumber.match(regexp))) { $("#err_title").css('display', 'block'); }else{ $("#err_title").css('display', 'none'); } }); — Shailesh Devadiga
– Shailesh Devadiga, Commented Nov 30, 2016 at 14:14

kayess · Accepted Answer · 2016-12-02 16:22:20Z

1

$input1 = $('input[name="input1"]');
$input2 = $('input[name="input2"]');
$checkbox = $('input[name="checkbox"]');
 

$input1.on('change', function(e) {
  var isValid = this.value.length >= 12;
  
  this.classList.toggle('notValid', !isValid); 
})

$checkbox.on('change', function(e) {
  $input2.prop('disabled', !this.checked);
})

input.notValid {
  border: 1px solid red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input1" />
<input type="text" name="input2" disabled />
<input type="checkbox" name="checkbox" />

NOTE: In example above, I'm mixing vanillia JS, with jQuery. I would recommend avoiding it - I did that to show You how easy (well not always...) it is to do such a simple thing without jQuery. Basically, if You want to do simple stuff like that, I would recommend to give up on jQuery.

ANSWER:

You are looking for jQuery change event. It triggers once input loose focus.

$(your_input).on('change', function(e) {...} )

You can validate input length like (function inside listener) :

var isValid = this.value.length === 12

Same goes with disabled/enabled input. You have to attach event listener to checkbox

$(your_checkbox).on('change', function(e) {...} )

then You can get state of checkbox :

var isChecked = this.checked

and disable/enable Your input

$(your_input).attr('disabled', !isChecked)

edited Dec 2, 2016 at 16:22

kayess

3,4049 gold badges30 silver badges46 bronze badges

answered Nov 30, 2016 at 13:36

grzesiekgs

4633 silver badges11 bronze badges

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

2 Comments

Shailesh Devadiga Over a year ago

I have tried using jQuery change function it works fine except for one condition.Suppose if I enter an invalid number for input1 then immediately click on checkbox of input2 ,on change function will be called and it will show error message. But my requirement on this particular scenario is that when i immediately click on input2 after entering invalid value in input1, input field 1 should get disabled and input field 2 should get enabled.

grzesiekgs Over a year ago

I've once heard some wise words : User interface is like a joke. If You have to explain it - it's bad. You have to explain what You are trying to achieve, so this design is probably bad :P I would recommend using 'input' instead of 'change' event - it fires each time when text inside input field changes. But I guess that You are going to have to hardcode Your logic.

Collectives™ on Stack Overflow

Input text validation using jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related