Avatar of movieprodw
 asked on

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


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!

Avatar of undefined
Last Comment
Ray Paseur

8/22/2022 - Mon
Ray Paseur

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.

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!

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):

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.
Julian Hansen

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?
Ray Paseur

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.
Your help has saved me hundreds of hours of internet surfing.
Julian Hansen

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.
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Ray Paseur

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)
<!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">
<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">

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

    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 {
            alert('Input must match either: ' + pattern1 + ' or ' + pattern2);


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

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

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


Open in new window