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

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!
LVL 1
movieprodwAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
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.
0
Julian HansenCommented:
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?
0
Ray PaseurCommented:
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.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Julian HansenCommented:
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.
1
Julian HansenCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ray PaseurCommented:
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

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.