Solved

javascript validation for a form field MM-YYYY

Posted on 2014-09-17
15
218 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 110

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 110

Expert Comment

by:Ray Paseur
ID: 40329063
Please post the form with the dropdown select.  I'll try to show you an example.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 110

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 83

Expert Comment

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

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 83

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
 

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 110

Expert Comment

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

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 110

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 110

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

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.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
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 how to count occurrences of each item in an array.

730 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