Solved

javascript validation for a form field MM-YYYY

Posted on 2014-09-17
15
199 Views
Last Modified: 2014-09-20
I am going through a migration with our credit card processor to a new method using new fields in all of the forms, etc.  They used to separate their required credit card expiry fields into MM (card_expiry_month) and YYYY  (card_expiry_year) which was fine.  I could use dropdowns.  NOW they've gone to one field MM-YYYY (card_expiry).  How can I put some sort of validation on that field to make sure our customers use MM-YYYY and no slashes, etc.?  I put (MM-YYYY) in parens before the input field but people don't read.  Any thoughts would be appreciated.  Thank you in advance.
0
Comment
Question by:meldraper
  • 8
  • 5
  • 2
15 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40328932
Why not just use your drop-downs and before submit, take the values and put them into the field your CC processor requires?  You can do this with jQuery fairly easily.
0
 

Author Comment

by:meldraper
ID: 40329054
After I posted my question I wondered about that. But I  don't know how to put them together before I send it.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40329063
Please post the form with the dropdown select.  I'll try to show you an example.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40329101
This is the basic design pattern showing the jQuery selectors and functions.

<?php // demo/temp_meldraper.php
error_reporting(E_ALL);

// SHOW THE REQUEST VARIABLES
if (!empty($_POST)) var_dump($_POST);

// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE 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">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#c").click(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        var d = a + '-' + b;
        $("#x").val(d);
    });
});
</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>

<form method="post">
<select id="a">
  <option value="abc">ABC</option>
  <option value="def">DEF</option>
</select>
<select id="b">
  <option value="ghi">GHI</option>
  <option value="jkl">JKL</option>
</select>
<input id="c" type="submit" />
<input type="hidden" name="mydate" id="x" />
</form>

</body>
</html>
HTML5;

// RENDER THE WEB PAGE
echo $htm;

Open in new window

0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40329217
I use drop-downs and concatenate them in PHP.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40329284
I do that, too, Dave.  But I think our Author has to make a direct post to a foreign server for credit card processing.  We will know when we see the form :-)
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 40329349
He can still use the drop-downs and concat them in a hidden field.  That does require some javascript to make it work.  But it certainly wouldn't be the oddest thing we've seen.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:meldraper
ID: 40330990
Yes it is going straight to a different server for processing.  How do I concat them in a hidden field? I'm not a PHP programmer, either, I'm an ASP programmer and the new  migration doesn't support ASP, so i'm sort of stuck here but I'm actually enjoying the PHP.  Thanks again very much for your help.

Here's the form.  

<form id="payment_confirmation" action="https://test.creditcards.com" method="post"  />

    <input type="hidden" name="locale" value="en">
    <fieldset>
        <legend>Credit Card Information</legend>  
        
        <BR></BR>
        <div id="UnsignedDataSection" class="section">
        <span>Card Type:</span>
        <select name="card_type">
        <option value="" selected>Make Selection</option>
        <option value="001">Visa</option>
        <option value="002">MasterCard</option>
        <option value="003">American Express</option>
        </option></select><br/>
        <span>Card Number:</span><input type="text" name="card_number"><br/>
        <span>Card Expiry Date <em>(MM-YYYY)</em>:</span><input type="text" name="card_expiry_date"><br/>
	</div>
    </fieldset>
  <input type="submit" id="submit" value="Confirm "/>

Open in new window

0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40331010
Thanks.  That looks like the new processor script, right?
0
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 40331060
Here's a little better example.  You don't really need any of the PHP involved here - just the jQuery.  I use the PHP to verify that the request variables have the right names and values.  It's not part of the final product you'll produce.  The card processor needs you to submit the expiration date in a text field called "card_expiry_date" in the format MM-YYYY.  This jQuery routine handles the acquisition of the values from the drop-down SELECT controls and creates the value in the card_expiry_date.

<?php // demo/temp_meldraper.php
error_reporting(E_ALL);

// SHOW THE REQUEST VARIABLES
if (!empty($_POST)) var_dump($_POST);

// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE 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">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#f").submit(function(){
        var a = $("#a").val();
        var b = $("#b").val();
        var d = a + '-' + b;
        $("#x").val(d);
    });
});
</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>

<form id="f" method="post">
Card Expiration Date<br>
Month <select id="a">
  <option value="01">Jan</option>
  <option value="02">Feb</option>
  <option value="03">Mar</option>
  <option value="04">Apr</option>
  <option value="05">May</option>
  <option value="06">Jun</option>
  <option value="07">Jul</option>
  <option value="08">Aug</option>
  <option value="09">Sep</option>
  <option value="10">Oct</option>
  <option value="11">Nov</option>
  <option value="12">Dec</option>
</select>
Year <select id="b">
  <option value="2014">2014</option>
  <option value="2015">2015</option>
  <option value="2016">2016</option>
  <option value="2017">2017</option>
</select>
<input id="c" type="submit" />
<input type="hidden" name="card_expiry_date" id="x" />
</form>

</body>
</html>
HTML5;

// RENDER THE WEB PAGE
echo $htm;

Open in new window

0
 

Author Closing Comment

by:meldraper
ID: 40334407
Ray, it works brilliantly as a stand alone page, but when I incorporate the code into my processing page, it just won't pass the hidden field.  I decided to have it return the fields in a page on our server to make sure it wasn't just coming back from the processor with an error but even my page on our server doesn't display the card_expiry_date.   But since it does work the way it's  supposed to as a stand alone, I'll keep trying to make it work.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40334462
Thanks for the points.  Maybe post a new question with the entire page, or a link to your test site so we can see all of the HTML and JavaScript?
0
 

Author Comment

by:meldraper
ID: 40334469
How about this?  It seems to work but I can't get the 0 to come across in case the month is 01 etc. because it's thinking they are values.  How do I make them text?

<script>
function myFunction()
{
 value1 = parseInt(document.getElementById("value1").value);
 value2 = parseInt(document.getElementById("value2").value);
    if(!value1==""&&!value2=="")
    {
     sum = value1 + '-' + value2;
     document.getElementById("total").value = sum;
    }
}
</script>
</head>
<body>
<form action="some.php" method="POST" id="myForm">
    <input type="text" size="5" id="value1" name="value1"  onkeyup="myFunction()"/>
    <input type="text" size="5" id="value2" name="value2"  onkeyup="myFunction()"/>
    <input type="text" size="5" id="total" class="bckground" name="total" />
    <input type="submit" value="submit"/>
</form>

Open in new window

0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40334487
Don't know why you're using parseInt(), but that may be the problem, and triggering the function on every keystroke seems excessive, since you do not need these values until the form is submitted.  Almost nobody writes native JavaScript if they can choose jQuery instead, so you might consider that.
0
 

Author Comment

by:meldraper
ID: 40334495
ok, thank you.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now