Solved

javascript validation for a form field MM-YYYY

Posted on 2014-09-17
15
206 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 83

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 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

911 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

17 Experts available now in Live!

Get 1:1 Help Now