javascript validation for a form field MM-YYYY

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.
meldraperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
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
meldraperAuthor Commented:
After I posted my question I wondered about that. But I  don't know how to put them together before I send it.
0
Ray PaseurCommented:
Please post the form with the dropdown select.  I'll try to show you an example.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Ray PaseurCommented:
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
Dave BaldwinFixer of ProblemsCommented:
I use drop-downs and concatenate them in PHP.
0
Ray PaseurCommented:
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
Dave BaldwinFixer of ProblemsCommented:
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
meldraperAuthor Commented:
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
Ray PaseurCommented:
Thanks.  That looks like the new processor script, right?
0
Ray PaseurCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
meldraperAuthor Commented:
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
Ray PaseurCommented:
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
meldraperAuthor Commented:
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
Ray PaseurCommented:
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
meldraperAuthor Commented:
ok, thank you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.