We help IT Professionals succeed at work.

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

movieprodw
movieprodw asked
on
413 Views
Last Modified: 2017-11-21
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

Most Valuable Expert 2011
Author of the Year 2014

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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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
Author of the Year 2014

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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Most Valuable Expert 2011
Author of the Year 2014

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