JQUERY - Check input field for pattern then check db for a match

movieprodw
movieprodw used Ask the Experts™
on
Hello,

I am good at php but not sure where to start with this one.

I would like to check when someone enters a pattern that matches 1 of 2 options:

PP000000X - X represents a letter, 0 represents a number and there is a prefix of PP
PPR0000000- 0 represents a number and there is a prefix PPR

IF the pattern is matched then it checks the DB for a match, if there is a match then it attaches a css class 'match' or 'nomatch'

I know that is a lot to work with but I just need some pointers.

Thank you for any help!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2011
Top Expert 2016

Commented:
Lots of moving parts here, but I can help with part of it.  When you've matched a pattern and you want to send the information to the server to check the database, you can make an AJAX request.  The "hello world" exercise that makes an AJAX request and puts the server response on the screen is shown in this article.
https://www.experts-exchange.com/articles/10712/The-Hello-World-Exercise-with-jQuery-and-PHP.html

The matching part is probably going to be done with a regular expression.  There are a host of online references, and this one looks pretty good.  Be aware that regex requires meticulous attention to detail!
https://www.w3schools.com/jsref/jsref_obj_regexp.asp

This might be a starting place for PPR.  It says, (1) Match string literal PPR, followed by exactly 7 digits, followed by exactly one dash, followed by exactly one digit, in case-insensitive mode.
var pattern = /PPR[0-9]{7}[\-]{1}[0-9]{1}/i

Attaching a class to an element of the document is done with this (and there is also a removeClass(), too):
https://api.jquery.com/addclass/

I think you will have the best luck with this if you break it down into small elements that can be built and tested independently, then cobble the components together to get the whole application working.  I might start with the server-side first.  An AJAX GET-method request can be tested from the browser address bar.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You have a similar question open over here https://www.experts-exchange.com/questions/29012408/javascript-check-input-pattern-and-add-class-if-correct-pattern.html

Is this asking for something different?
Most Valuable Expert 2011
Top Expert 2016

Commented:
Julian: I think this extends the other question by asking for a server-side check, too.  I think it will be easier for our Author to deconstruct the problem into the component parts and let us answer each part separately.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Ray: that was my initial thought, but on a re-read
IF the pattern is matched then it checks the DB for a match, if there is a match then it attaches a css class 'match' or 'nomatch'
That is a client side requirement - he is wanting to make the interface change based on the validity of the PR number.

There is a difference with this one - he is also wanting to add the DB check in addition to the validity check.

This can also be done with JavaScript input.change / input.keyup. I would do this with an AJAX request back to the server as you recommended in your first post.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Example of AJAX approach

CSS
<style type="text/css">
  .nosnmatch { border: solid 1px red; }
  .snmatch { border: solid 1px green;  }
</style>

Open in new window

HTML
<form method="post" id="sncheck">
  <input type="text" class="nosnmatch" name="snumber" placeholder="Please enter your serial number PPR0000000" />
</form>
<div id="result"></div>

Open in new window

jQuery
<script>
$(function() {
  $('#sncheck input[name="snumber"]').change(function() {
    var ctrl = this;
    ctrl.className = 'nosnmatch';
    if (this.value.match(/^PP(R?)\d+$/)) {
      $.get('t2250check.php', {pr:this.value}, function(resp) {
        if (resp.status) {        
          ctrl.className = 'snmatch';
          $('#result').html('Success');
        }
        else {
          $('#result').html('Failed on DB check!');
        }
      },"JSON");
    }
    else {
      $('#result').html('Failed on Regx Match!');
    }
  });
});
</script>

Open in new window


Working sample here

Sample checks SN against the following Regx (/^PP(R?)\d+$/) - if that passes then check the DB. The "DB" script in this sample randomly returns true / false to demonstrate the concept. A result string tells you how the SN was evaluated.
Most Valuable Expert 2011
Top Expert 2016

Commented:
Rereading the question, I think I was confused about the dashes in the pattern narrative.  See if this is more on point (lines 17, 18)
https://iconoun.com/demo/temp_movieprodw.php
<!DOCTYPE html>
<!-- https://www.experts-exchange.com/questions/29012401/JQUERY-Check-input-field-for-pattern-then-check-db-for-a-match.html -->
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style type="text/css">
/* STYLE SHEET HERE */
</style>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){

    var pattern1 = /PPR[0-9]{7}/i;
    var pattern2 = /PP[0-9]{6}[A-Z]{1}/i;

    $("input[name='xyz']").change(function() {
        if (this.value.match(pattern1)) {
            $("#result").html('OK by ' + pattern1);
        }
        else if (this.value.match(pattern2)) {
            $("#result").html('OK by ' + pattern2);
        }
        else {
            $("#result").html('Nope');
            alert('Input must match either: ' + pattern1 + ' or ' + pattern2);
        }
    });

});
</script>

<title>HTML5 Page With jQuery in UTF-8 Encoding</title>
</head>
<body>

<noscript>Your browsing experience will be much better with JavaScript enabled!</noscript>

Enter the string: <input name="xyz" /> Then hit Enter
<p id="result" />

</body>
</html>

Open in new window

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