How can I get my validation/navigation to work properly and how can I...

[APD1993]

...only allow for users to enter in characters from A-Z?

I have several small questions:

1) I have a validation function that allows for the user to navigate to the next webpage if they enter in all of the details correctly, then they can go to the Checkout. However, when I try it, what happens is that if the alert message about entering an invalid date appears and the user clicks on OK, then the confirmation message that is used to help the user navigate to the Checkout, when I do not want them to be able to override the validation. My coding is:

function ValidatePaymentDetails()
{
	var cardnum=document.forms["payment"]["cardnumber"].value;
	var cardexp=document.forms["payment"]["cardexpirydate"].value;
    var cardsec=document.forms["payment"]["cardsecuritynumber"].value;
	var href="checkout.html";
if (((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec))))
{
	alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if (((cardnum==null||cardnum=="")&&(cardexp==null||cardexp=="") && (cardsec==null||cardsec=="")))
{
alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values.");
}
else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp)))
{
	alert("You have not entered any suitable values for the Card Number or Card Expiry Date fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if ((cardnum==null||cardnum=="")&&(cardexp==null||cardexp==""))
{
	alert("You have not entered any suitable values for the Card Number or the Card Expiry fields. Enter in suitable values.");
}
else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardsec)))
{
	alert("You have not entered any suitable values for the Card Number or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if((cardnum==null||cardnum=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any suitable values for the Card Number or the Card Security Number fields. Enter in suitable values.");
}	
else if ((hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec)))
{
	alert("You have not entered any suitable values for the Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}				
else if((cardexp==null||cardexp=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any suitable values for the Card Expiry Date or the Card Security Number fields. Enter in suitable values.");
}
else if (hasWhiteSpace2(cardnum))
{
	alert("You have not entered in a suitable value for the Card Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardnum==null|| cardnum=="")
{
		alert("You have not entered a suitable value for the Card Number field. Enter in a suitable value.");
}
else if (hasWhiteSpace2(cardexp))
{
	alert("You have not entered in a suitable value for the Card Expiry Date field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardexp==null|| cardexp=="")
{
	alert("You have not entered a suitable value for the Card Expiry Date field. Enter in a suitable value.");
}
else if (hasWhiteSpace2(cardsec))
{
	alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardsec==null|| cardsec=="")
{
	alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value.");
}
else if (checknumber(cardnum)==false)
{
	alert("You have not entered in a valid Card Number in the Card Number field. Make sure that it is in the 0000-0000-0000-0000 format and remove any leading or trailing spaces. Enter in a suitable value.");
}
else if (checksecnumber(cardsec)==false)
{
	alert("You have not entered in a valid Card Security Number in the Card Security Number field. Make sure it is in the 000 format. Enter in a suitable value.");
}
else if (compareDate(cardexp)==true)
{
	return true;
}

else
{
	return contCheckout();
}
}

and the code for contCheckout() is:

function contCheckout()
{
	var nav=confirm("Are you sure you want to continue your order and go to the Checkout? Click OK to continue or click on Cancel to make changes to your payment details until you are ready to continue");
	if (nav===true)
	{
		location.href="checkout.html";
	}
	else
	{
		location.href="#";
	}
}

2). This question is I would like a function so that only characters between A-Z can be inputted and possibly have a capital letter as only the first character. I'm sure that a regexp function will be needed, but I'm not entirely sure how to implement it

3) Final quick question, for some reason some of my alert boxes appear twice (i.e. the user clicks on OK, and then the alert box opens up again). Is there any quick fix for this?

Any help is appreciated!

Thanks

[Philip M]

Do you not feel that the endless repetition of

alert("You have not entered in a suitable value for the Card Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}

suggests that you code can be simplfied? Add return false after the alert.

else if (((cardnum==null // a form field can never be null - only blank "".

You are using && when you intend ||.

if (cardnum=="") // is almost useless as the user can enter a ? or an x. This test is in any case not required - test the textbox value against a regex and then alert if appropriate (regex test fails).

If you are trying to validate credit card details you ought to apply the Luhn test. It is almost valueless if the user can enter any number. Google or use the serach feature of this forum to find plenty of Luhn test scripts.

Why should the card number not have spaces in it, as it appears on the card? Credit card numbers take the form of XXXX XXXX XXXX XXXX. If you wish to strip the spaces it is simple to do so.

You have three user inputs. Card Number, Expiry Date, Security Number. You should validate each of these separately and one at a time, not try to roll them together.

Your question about characters:-

var str = "Abcdef";
if (!/^[A-Z][a-z]+$/g.test(str)) {
//

"I am not a vegetarian because I love animals; I am a vegetarian because I hate plants." - A. Whitney Brown.

[APD1993]

Originally Posted by Philip M

Do you not feel that the endless repetition of

alert("You have not entered in a suitable value for the Card Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}

suggests that you code can be simplfied? Add return false after the alert.

else if (((cardnum==null // a form field can never be null - only blank "".

You are using && when you intend ||.

if (cardnum=="") // is almost useless as the user can enter a ? or an x.

If you are trying to validate credit card details you ought to apply the Luhn test. It is almost valueless if the user can enter any number. Google or use the serach feature of this forum to find plenty of Luhn test scripts.

Why should the card number not have spaces in it? Credit card numbers take the form of XXXX XXXX XXXX XXXX. If you wish to strip the spaces it is simple to do so.

You have three user inputs. Card Number, Expiry Date, Security Number. You should validate each of these separately and one at a time, not try to roll them together.

Your question about characters:-

var str = "Abcdef";
if (!/^[A-Z][a-z]+$/g.test(str)) {
//

"I am not a vegetarian because I love animals; I am a vegetarian because I hate plants." - A. Whitney Brown.

With the characters one, my coding now looks like this, but it doesn't seem to work :/

function name(name)
{
	var x=dcoument.forms["contact"]["name"].value;
	if(!/^[A-Z][a-z]+$/g.test(x))
	{
		alert("You have not entered in a valid nam in the First Name Address field. Enter in a suitable value (i.e. only characters between A and z)");
		return false;
	}
}

[Philip M]

Well, it might work if you spelt document correctly and did not use the word name for the name of a function, a Javascript variable and an HTML element. You should avoid giving names or id's to your variables/functions/arguments/forms words which are JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'href' or 'closed' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.

<form name = "contact">
<input type = "text" name = "username" onblur = "test(this.value)">
</form>

<script type = "text/javascript">

function test() {
var x=document.contact.username.value;
//var x=document["contact"]["username"].value;  // is fine as well, but not conventional to use square bracket notion here

if(!/^[A-Z][a-z]+$/g.test(x)) {
alert("You have not entered in a valid name in the First Name Address field. Enter in a suitable value (i.e. only characters between A and z)");
return false;
}
}
</script>

Depending on the context, a proper name may include a hyphen and/or an apostrophe. Mary-Lou O'Hara. And Mary-lou o'hara will not do!

Instead of requiring the user to enter data in a particular format, it is far better to use a function to capitalise the first letter of each word regardless of what the user enters (strip leading and trailing spaces, numbers and other unwanted characters first):-

str = str.replace(/^\s+|\s+$/g,"");  // strip leading and trailing spaces
str = str.replace(/[^a-z\s\'\-]/gi,"");  // strip all but letters, spaces, hyphens, apostrophes
str = str.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()});  // capitalise the first letter of each word

Alerts are a rather primitive and old-fashioned method of passing an error message to the user. Better to show a message (perhaps in red) in a <span> next to the field which contains the error using element.style.display = "inline";