javascript check input pattern and add class if correct pattern

movieprodw
movieprodw used Ask the Experts™
on
Hello,

I would like to use javascript/jquery to see if the input of a text field fits the serial number pattern, if so I want it to add the class 'snmatch' if not I want it to have the css class 'nosnmatch'

<style>
	.nosnmatch { border: solid 1px blue; }
	.snmatch { border: solid 1px green;	}
</style>
<form method="post" id="sncheck">
	<input type="text" class="nosnmatch" name="snumber" placeholder="Please enter your serial number PPR0000000" />
</form>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017

Commented:
Comments inside the codes:
HTML:
<style>
	.nosnmatch { border: solid 2px blue; }
	.snmatch { border: solid 2px green;	}
</style>
<form method="post" id="sncheck">
<!--I set an id attr to make my life simpler-->
	<input type="text" class="nosnmatch" id="check" name="snumber" placeholder="Please enter your serial number PPR0000000" />
</form>

Open in new window


JQuery code:

$(document).ready(function(){
//Via JQuery I target the input element.I use keydown so
//to get and the backspace key function
  $('#check').keydown(function(e){
   var keyNumber,keyLenght;
//At the following line I get the value of the input element
//every time that i have keydown.I trimmed the string to remove whitespaces 
   keyNumber= $(this).val().trim();
   keyLenght=keyNumber.length;    
//With an if condition I check initially the lenght of the string
   if(keyLenght===10){
     if(keyNumber==='PPR0000000'){
//In this block of code if the above condition is true the first thing 
//is to set the class empty and the add the appropriate class.
     $(this).attr('class','');
     $(this).addClass('snmatch');
     }
   }else{
     $(this).attr('class','');
     $(this).addClass('nosnmatch');
   } 
  });
  
});

Open in new window


The only thing that you have to do from this point is with someway to validate the PPR number from database or from an array object that you have already creates.This can be done via ajax or other method
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You can do this two ways
JavaScript
<script>
var inp = document.querySelector('#sncheck input[name="snumber"]');
inp.addEventListener('change',function() {
  this.className = this.value.match(/PPR[\d]{7}/) ? 'snmatch' : 'nosnmatch';
});
</script>

Open in new window

jQuery
<script>
$(function() {
  $('#sncheck input[name="snumber"]').change(function() {
    // For demo purposes - theoretically this could be the
    // same as the JavaScript version
    var cname = this.value.match(/PPR[\d]{7}/) ? 'snmatch' : 'nosnmatch';
    $(this).removeClass().addClass(cname)
  });
});
</script>

Open in new window

You can see the above working here

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial