Link to home
Start Free TrialLog in
Avatar of movieprodw
movieprodw

asked on

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!
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

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.
Avatar of 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?
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.
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.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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