Help with validating Month and Year

[CalifNina]

I am building a form for class where a person enters personal and credit card information, have fields within one set of <form> and </form> tags, they are: (name, address, city, state, zip, phone number, email address, DOB, credit card information, etc.). We are not supposed to validate every area at this point, rather we are to build a form and then show snippets where some areas are validated.

For example:, in the credit card area we are to validate the expiration month and year (instructor did not say to validate the credit card number). I have the month and year set up as drop-down selections -- i.e., for the month: only "01-12" can be selected, for the year: only "2003-2010" can be selected.

Question 1: How do I validate the month and year? Does it have to be tied into the credit card?? (we are not required to validate the credit card number at this point, but should I??).

From the entire form, I've inserted only the code that pertains to the credit card, it has: ( Select Card Type (uses four radio buttons and also displays name in a text field), Enter Name on Credit Card (uses one text field), Enter Card Number (uses four text fields that only allow four chars each), and Select Expiration Date (uses two separate selection boxes as described in second paragraph)) ... I don't think you'll need all the code but am inserting it just in case:<FIELDSET>&nbsp;<LEGEND><H3>Credit Card Information</H3></LEGEND>

Select Card Type:
<INPUT TYPE="radio" NAME="creditCard" onclick="check(this.value)" VALUE="American Express">American Express
<INPUT TYPE="radio" NAME="creditCard" onclick="check(this.value)" VALUE="Discover">Discover
<INPUT TYPE="radio" NAME="creditCard" onclick="check(this.value)" VALUE="MasterCard">MasterCard
<INPUT TYPE="radio" NAME="creditCard" onclick="check(this.value)" VALUE="Visa">Visa
<INPUT TYPE="text" NAME="creditCardAnswer">
<BR><BR>

Enter Name on Credit Card:
<INPUT TYPE="text" NAME="creditCardName" SIZE="30">
<BR><BR>

Enter Card Number:
<INPUT TYPE="text" VALUE="nnnn" NAME="creditCardNum1" SIZE="4" MAXLENGTH="4">
<INPUT TYPE="text" VALUE="nnnn" NAME="creditCardNum2" SIZE="4" MAXLENGTH="4">
<INPUT TYPE="text" VALUE="nnnn" NAME="creditCardNum3" SIZE="4" MAXLENGTH="4">
<INPUT TYPE="text" VALUE="nnnn" NAME="creditCardNum4" SIZE="4" MAXLENGTH="4">

&nbsp;Select Expiration Date:
<SELECT NAME="creditCardExpMonth">
<OPTION VALUE="01">01
<OPTION VALUE="02">02
<OPTION VALUE="03">03
<OPTION VALUE="04">04
<OPTION VALUE="05">05
<OPTION VALUE="06">06
<OPTION VALUE="07">07
<OPTION VALUE="08">08
<OPTION VALUE="09">09
<OPTION VALUE="10">10
<OPTION VALUE="11">11
<OPTION VALUE="12">12
</SELECT>
<SELECT NAME="creditCardExpYear">
<OPTION VALUE="2003">2003
<OPTION VALUE="2004">2004
<OPTION VALUE="2005">2005
<OPTION VALUE="2006">2006
<OPTION VALUE="2007">2007
<OPTION VALUE="2008">2008
<OPTION VALUE="2009">2009
<OPTION VALUE="2010">2010
</SELECT>
<BR><BR>
</FIELDSET>So in the end, I'm looking minimully for how to code/validate the month and year. If you think I should tie in more stuff to it please tell me, otherwise if I could just see how to validate the month and year - meaning compare to the current date to ascertain if what has been selected is valid. <-- That's the overall goal.

Question 2: I purposely did not enter invalid months or any old years prior to 2003; should I enter for example 2000, 2001, 2002 to purposely show if a wrong year is selected, that an error/alert points out it's invalid?? _ OR _ Just leave it alone and have them select from only valid choices, and therefore it cannot be wrong?? ... It seemed to me, why cause more complexity/problems with old year choices, to instead only code valid choices.

Any help out there on being shown how to validate the month and year selections?? Thank you very much.

[CalifNina]

Thank you Dave, I looked though what you stated and coded. Makes sense. I totally get the concept in that section.

I'll have to go figure out how/where to use the 'onSubmit.' I know it's really dumb and it's part of the whole form and it is a basic thing -- but I still have to learn/try/do that.

Again, thank you for the simple explanation and code for doing the month and year. Appreciate it.

[CalifNina]

I've tried playing with it ... not working for me (because I do not know what I'm doing) ... but is this on the right track?

In HEAD Section:<SCRIPT TYPE="text/javascript"> //Validates credit card month and year with 'onSubmit'
function validateMoYr()
{
var sel = document.userData.selectName;
if (sel.selectedIndex < 1) {
alert("A selection is required.");
sel.focus();
return false;
}
</SCRIPT>
In BODY Section:<FORM NAME=monthYear onSubmit="return validateMoYr(this.monthYear.value)">

Select Expiration Date:
<SELECT NAME="creditCardExpMonth">
<OPTION>Month
<OPTION VALUE="01">01
<OPTION VALUE="02">02
<OPTION VALUE="03">03
<OPTION VALUE="04">04
<OPTION VALUE="05">05
<OPTION VALUE="06">06
<OPTION VALUE="07">07
<OPTION VALUE="08">08
<OPTION VALUE="09">09
<OPTION VALUE="10">10
<OPTION VALUE="11">11
<OPTION VALUE="12">12
</SELECT>

<SELECT NAME="creditCardExpYear">
<OPTION>Year
<OPTION VALUE="2003">2003
<OPTION VALUE="2004">2004
<OPTION VALUE="2005">2005
<OPTION VALUE="2006">2006
<OPTION VALUE="2007">2007
<OPTION VALUE="2008">2008
<OPTION VALUE="2009">2009
<OPTION VALUE="2010">2010
</SELECT>

<INPUT TYPE="submit" VALUE="Submit">
</FORM>

Corrections pls?? Missing parts?? Is there another section I was to of touched in the entire form, but I did not? I know I may of put wrong pieces together. I'm zeroing in on the one section of the form, not the entire form. Meaning I gave the month year section it's own form and name, even though it exists inside the overall main form. Is that incorrect?

[CalifNina]

ok! I'm starting to see the light at last ... some of my logic was wrong and I was el-dumbo. Duh, I do have a separate "test form" button that right now only checks for empty fields - THAT'S where I should add in this code - (I see, I see). To add on top of misery I missed the entire second select to check! geez. Good thing you told me.

Thank you Dave for providing the code (again) and pointing me in the right direction in how to build this. Will go mess around with it now and see if I incorporate correctly.

[CalifNina]

It's been a few hours and I have another question/post that relates to this topic, so I'll post it here hoping it gets read - Dave maybe you can help again (??) as I'm copying what you gave me earlier ...

I have two other sections within my form (surName, stateName) that I'd like to also test their <SELECT>:

In the BODY/FORM:&nbsp;Surname:
<SELECT NAME="surName">
<OPTION>
<OPTION>Mr.
<OPTION>Mrs.
<OPTION>Ms.
<OPTION>Miss
<OPTION>Dr.
</SELECT>
In another part of the BODY/FORM:&nbsp;State:
<SELECT NAME="stateName">
<OPTION>
<OPTION>Alabama
<OPTION>Alaska
<OPTION>Arkansas
<OPTION>California
<OPTION>Colorado
<OPTION>Connecticut
<OPTION>Delaware
<OPTION>Florida
<OPTION>Georgia
.
.
. it goes on as I list all 50 states...
In copying Dave's earlier code, I'm trying to make it work for testing the above selections... it's not complete/correct so if you would look at it and tell me how to make it work pls? I relaize both of these are similar in testing for text and may follow similar coding ...// This validates the surname selection

if (surName.selectedIndex ???????what goes here?) {
alert("A surname selection is required.");
surName.focus();
return false;
}

** Note: How do I test the surName field containing one of the five choices (do we test for a-z, A-Z, and a period?? or test for 'Mr., Mrs., Miss, Ms., Dr.'??)


// This validates the state name selection

if (stateName.selectedIndex ???????what goes here?) {
alert("A state selection is required.");
stateName.focus();
return false;
}

** Note: How do I test for the stateName field containing one of the 50 choices (do we test for a-z, A-Z ??).

Thank You.

[CalifNina]

ohhh - I guess my question was better suited for INPUT text fields, then there would be functions to test for specific things - whereas in the SELECT one can only check for a selection made. Ok, ok, think it's engrained in my brain now.

I should of set my other items up as input text fields *instead* of SELECT. I get it. Thank you, I won't ask on it again. I see my goofup.

[CalifNina]

Class work, not "real life" stuff. Building a form - has fields to enter surname, firstname, middle initial, last name, address, city, state, etc.

In the first two fields (surName, firstName) I have it coded within the <INPUT> tag to check if the field is blank, if so an alert displays telling the user to fill it in. The alerts work, problem is when I purposely leave both fields blank to test, the two alerts keep playing one after another, does not allow the user to get to the next field, essentially stuck in a loop - only way to get out is to kill the html file and restart it.

Surname:
<INPUT TYPE="text" NAME="surName" SIZE="4" MAXLENGTH="4"
onBlur='
if (this.value =="") {
alert("Please enter one: Mr. / Mrs. / Ms. / Miss / Dr.");
this.focus();
}
'>


First Name:
<INPUT TYPE="text" NAME="firstName" SIZE="17"
onBlur='
if (this.value =="") {
alert("Please do not leave any of the name fields blank.");
this.focus();
} else {
alert("Thank you, "+ this.value + "!");
}
'>

&nbsp;Middle Initial:
<INPUT TYPE="text" NAME="middleInitial" SIZE="1" MAXLENGTH="1">
&nbsp;Last Name:
<INPUT TYPE="text" NAME="lastName" SIZE="17">I'm either missing code and/or I've set this up wrong. Can you identify the error(s) from this?

[CalifNina]

Way cool! I'll take that and try it out too. Thank You. ;)

[CalifNina]

Hah 'deadly embrace' good one ... YAH I was replying to your response on the onblur vs onchange, had my answer all typed up and then whammo, it would not work - invalid thread error, So I thought 'hmmm,maybe my post was moved elsewhere???' ... Talk about timing hahhah I was replying as you were moving it ...

Anyway THAT did it! Awesome! the two input fields are no longer in a deadly embrace during validation -- You have been my Superman Dave in answering my posts yesterday/today, way cool! Thk u very much with all my inquiries. Saved me. ;)

[CalifNina]

Hi Dave, I am so drained from all of this and thought I was done for the night. When you have time, one more thing please on this topic ... I <select> a state name and then when I test the form with the chosen state, the form thinks a state has not been selected at all.

So I'm looking back at the HEAD section to begin my debugging, where the functions have been combined all together, from what you showed me earlier ... would you review and see if I put it together correctly? Syntax errors, or is something preventing another area from working? Or this is not even the problem area for capturing data?
<SCRIPT LANGUAGE=JavaScript>

function IsFormComplete(userData)
{
with (userData)
{

// This validates the entire form for fields that are blank
// (http://www.hotwired.com/webmonkey/javascript/code_library/)

{
var x = 0
var FormOk = true

while ((x < document.forms[userData].elements.length) && (FormOk))
{
if (document.forms[userData].elements[x].value == '')
{
alert('Please enter the '+document.forms[userData].elements[x].name +' and try again.')
document.forms[userData].elements[x].focus()
FormOk = false
}
x ++
}
return FormOk
}

// This validates the state name selection

if (stateName.selectedIndex < 1) {
alert("A state selection is required.");
stateName.focus();
return false;
}

// This validates credit card month and year selections

if (creditCardExpMonth.selectedIndex < 1) {
alert("A month selection is required.");
creditCardExpMonth.focus();
return false;
}
if (creditCardExpYear.selectedIndex < 1) {
alert("A year selection is required.");
creditCardExpYear.focus();
return false;
}

}
return true;
}
</SCRIPT>This is for class and I was trying diff things to demonstrate various validations ... I know it's redundent and would not be this way in "real life", as the function first checks all the fields for blanks, and then I've added in the state name and then credit card month and year validations ... maybe that's why it's not working? Too much so it intertwines?

Since the chosen state name is not being captured, then that means I have the same issue with the credit card month and year selections not being captured.

Could/would you proof this when you have time in the next couple days or so, to see if you can determine what the flaws are? Thank you for whatever/whenever you can fit this in, if at all.

[CalifNina]

ahhhh that's the predicament, hmmmm ok ... but that's how one picks this up too, by trying and learning from attempts, then you know what not to do! haha as in my case ... but I hear ya, unless one knows their stuff it can become complicated.

OK, I'll relook at what I am doing then.

Thk you for replying so soon. At least I know why it's not functioning, that's a plus so no more time wasted on playing with it in this particular setup - I'll have to come up with something else.

alrighty forging onward ... another lesson learned.
Gracias. :cool:

[CalifNina]

Wow!! You worked on it how nice of you Dave! Thank you for going thru that effort. Totally unexpected, what a super surprise this morning. I did try it out !! --- but does not work, meaning it does not get past that first section of code you modified from WebMonkey.

Here's what I did.

(1) Removed old code and saved into another file.

(2) Inserted new code while replacing the three renditions of "myForm" with the name of my form "userData" ie., function IsFormComplete(userData) {
var x, len = userData.elements.length;
with (userData) {(3) Tested it by only filling in first three fields to see if that first section worked, it does not get past that point - meaning it provides no alerts on the next empty field. Only in the bottom left corner of the browser does an error symbol display. I tried various other fields to make sure it's the WebMonkey code, same response, nothing. So we know it's that code it's not getting past.

Here's how I state the FORM tag if you need to see for correctness:<FORM NAME=userData onSubmit="return IsFormComplete(this)">Here's how I state the button if you need to see for correctness:<INPUT TYPE="button" VALUE="Test Form" OnClick=IsFormComplete("userData")>Past that I looked over what you did, did not edit anything other than the form name. Oh well, you tried, very much appreciate your effort. That was cool of you to play with and try to make work.

[Exuro]

I was looking at that code from webmonkey, and I think that that should actually validate your select elements as well. You could set the dummy option for month, state, ect equal to "" and that would come up as invalid when it was tested at:

if (document.forms[userData].elements[x].value == '')

Hope that works for ya!

[CalifNina]

Been a busy day and just getting back to this ...

Exuro, hey thk you for your reply earlier today, I will save that and maybe try that another time. I'm not sure what to do with it right now, so that would be another version. But thank you for reviewing making a suggestion.

Dave really? hmm I thought the form name went in there, as I did that before and it worked in the other version. I'll go relook at it. Oh, also guess I was assuming you knew I did try it your way at first - I did leave it as you sent it, no modifications ... but when it did not work and I was reviewing the code to debug, I seen the "myForm" and thought it was supposed to be "userData." That's why I changed it. Dang, weird cuz I was basing it on the previous version working where I inserted the actual form name of "userData."

Ugh, well, I have a couple versions now, am keeping them and will play around to see what I can do.

Thank you for the responses, I know this has been beaten to death.

[CalifNina]

Got it Dave, thk u for that. Kind of as in the first version of the WebMonkey code in the while, if, and alert statements:<SCRIPT LANGUAGE=JavaScript>
function IsFormComplete(userData)
{
with (userData)
{

// This validates the form fields for blank values
// (http://www.hotwired.com/webmonkey/javascript/code_library/)

{
var x = 0
var FormOk = true

while ((x < document.forms[userData].elements.length) && (FormOk))
{
if (document.forms[userData].elements[x].value == '')
{
alert('Please enter the '+document.forms[userData].elements[x].name +' and try again.')
document.forms[userData].elements[x].focus()
FormOk = false
}
x ++
}
return FormOk
}
</SCRIPT>So you are saying that when I put in userData at the top in the function and with, that I really should not of -- and should of left it as "myForm", that the only reason it actually worked was because my form name (userData) was actually in the while, if, and alert statements? OK, now I know.

[CalifNina]

Ahhh OK, I've got it now -- will once again go back and edit my code .... wow I have copied/pasted so many notes from this thread the last few days that I now have a number of pages of all the renditions and tidbits discussed or demonstrated. Lotsa good points picked up, thks Dave.

Just so you can see where I started from, here is the very original code (before I started trying to validate the state, month, and year <SELECT> options and haphazardly adding it into this original function)... you can see where this code demonstrates form name, thus I read it as I was to enter my own form name:<script language="JavaScript">
<!--

// -----------------------------------------------------------------
// Function : IsFormComplete
// Language : JavaScript
// Description : Checks if all elements in a form have a non-blank value
// Copyright : (c) 1998 Shawn Dorman
// http://www.goodnet.com/~sdorman/web/IsFormComplete.html
// -----------------------------------------------------------------
// Ver Date Description of modification
// --- ---------- --------------------------------------------------
// 1.0 08/31/1996 Original write
// 1.1 09/30/1998 CHG: Use standard header format
// -----------------------------------------------------------------
// Source: Webmonkey Code Library
// (http://www.hotwired.com/webmonkey/javascript/code_library/)
// -----------------------------------------------------------------

function IsFormComplete(FormName)
{
var x = 0
var FormOk = true

while ((x < document.forms[FormName].elements.length) && (FormOk))
{
if (document.forms[FormName].elements[x].value == '')
{
alert('Please enter the '+document.forms[FormName].elements[x].name +' and try again.')
document.forms[FormName].elements[x].focus()
FormOk = false
}
x ++
}
return FormOk
}
// -->
</script>Now you can see how/why I went in to change the form name into my own form name. This function obviously worked fine alone -- only became complex or I thought it was not working when I was adding in add'l scripts you gave me, but I could never get them to work only to find out the "FormOK" was stopping the added functions from ever being gotten to, and so on ... thus the various iterations of this thread built up from there.

[CalifNina]

10-4 ... I'll give that a try too! thk you.