Validate field for 10 digits javascript

Question

I have following code for a field which must be filled out with exact 10 numbers

 $('#input-payment-egn').on('input', function() { var input=$(this); var is_egn=input.val(); $("div.wrong-egn").hide(); var re = /^\\d{10}$/; var is_egn=re.test(input.val()); if(is_egn<10){ $("div.wrong-egn").show(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="leasingform"> <div class="form-group required" style="padding-top: 15px;"> <label class="control-label" for="input-payment-egn"><?php echo $text_egn; ?></label> <input type="text" maxlength="10" name="egn" value="" placeholder="Въведете вашето ЕГН" id="input-payment-egn" class="form-control"/> </div> <div class="text-danger" id="wrong-egn" style="display: none;">Въведете валидно ЕГН !</div> </form> 

I want to validate the input when the user clicks somewhere else on the page, after he entered the number! I used regex (i think its okay).Can you help me? Thank you!

Answer 1

Here you go with an example solution https://jsfiddle.net/3bgpdp7v/1/

 $('#input-payment-egn').keyup(function(e){ if($(this).val().length === 10){ e.preventDefault(); $('#wrong-egn').slideUp(); } else { $('#wrong-egn').slideDown(); } }); 

 #wrong-egn{ display: none; font-size: 12px; color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" maxlength="10" name="egn" value="" placeholder="Въведете вашето ЕГН" id="input-payment-egn" class="form-control"/> <div id="wrong-egn">Please provide 10digit number.</div> 

I've used jQuery keyup event & checking for number of characters, instead of regex .

One more way Here is one more solution https://jsfiddle.net/3bgpdp7v/2/

 $('#input-payment-egn').keyup(function(e){ if($(this).val().length === 10) e.preventDefault(); }).focusout(function(){ if($(this).val().length === 10){ $('#wrong-egn').slideUp(); } else { $('#wrong-egn').slideDown(); } }); 

 #wrong-egn{ display: none; font-size: 12px; color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" maxlength="10" name="egn" value="" placeholder="Въведете вашето ЕГН" id="input-payment-egn" class="form-control"/> <div id="wrong-egn">Please provide 10 digit number.</div> 

This will display the message on focusout .

Hope this will help you.

Answer 2

I would suggest using the focusout event if you want the behavior to only show when the user clicks out. This will also catch if the user uses the tab out function.

Here is an example. fiddle

<input type="text" maxlength="10" name="egn" value="" placeholder="Въведете вашето ЕГН" id="input-payment-egn" class="form-control"/>

Javascript

$('#input-payment-egn').focusout(function(e){
 if($(this).val().length < 10){
  $('#wrong-egn').css('display','block');
 }else{
  $('#wrong-egn').css('display','none');
 } 
});