Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    ...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:

    Code:
    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:
    Code:
    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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,924
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.
    Last edited by Philip M; 03-12-2012 at 11:13 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    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 :/

    Code:
    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;
    	}
    }

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,924
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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'.

    Code:
    <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):-

    Code:
    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";
    Last edited by Philip M; 03-12-2012 at 03:25 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •