form validation help

Discussion in 'JavaScript' started by paulamccl, May 11, 2007.

0
  1. #1
    Somebody please help me! I have been working on this assignment for 4 whole days and just cant see where I am going wrong.

    the following code is in an external javascript file.

    var streetName =("");
    var postCode =("");
    var cardNum =("");
    var regExp =("");

    function valstreet() {
    if(document.getElementById)
    document.getElementById("error1").className = "invis";
    streetName = document.getElementById("shipStreetName").value
    regExp = /[A-Za-z]{3,}-?[A-Za-z]?/;
    if(regExp.test(streetName))
    {
    streetName = streetName.charAt(0).toUpperCase() + streetName.substring(1,streetName.length).toLowerCase();
    }
    else {
    document.getElementById("error1").className = "error1";
    document.getElementById("shipStreetName").value = '';
    }
    }

    function valcode() {
    if(document.getElementById)
    document.getElementById("error2").className = "invis";
    postCode = document.getElementById("shipPostalCode").value
    postCode = postCode.toUpperCase();
    regExp = /^([A-Za-z]{1,2})([0-9]{2,3})([A-Za-z]{2})$/;

    if(regExp.test(postCode))
    {
    postCode = postCode.substring(0,postCode.length-3) + " " + postCode.substring(postCode.length-3,postCode.length);
    }

    else {
    document.getElementById("error2").className = "error2";
    document.getElementById("shipPostalCode").value = '';
    }
    }

    The HTML for the elements it refers to is

    <tr>
    <td><label for="shipStreetName">Street Name</label></td>
    <td><input type="text" name="shipStreetName" id="shipStreetName" maxlength="30" onBlur="valstreet(document.details.shipStreetName.value)"><p class="invis" id="error1">Please enter valid street name</p></td>
    </tr>

    <tr>
    <td><label for="shipPostalCode">Postal Code</label></td>
    <td><input type="text" name="shipPostalCode" id="shipPostalCode" maxlength="30" onBlur="valcode(document.details.shipPostalCode.value)"><p class="invis" id="error2">Please enter valid Postcode</p></td>
    </tr>

    <tr>
    <td><label for="billCardNumber">Credit Card Number</label></td>
    <td><input type="text" name="billCardNumber" id="billCardNumber" maxlength="30" onBlur="valcard(document.details.billCardNumber.value)"><p class="invis" id="error3">please enter valid card number</p></td>

    </tr>

    there is also a bit of css in between the head tags to style the messages.

    The problem is the street name validates only on length and will not change to uppercase.

    The postCode validates wrong no matter what you put in valid or otherwise and clears to " " so I dont know if the toUppercase is working

    The card number does much the same as the postcode

    Can someone please tell me where I am going wrong.

    Thanks
     
    paulamccl, May 11, 2007 IP
  2. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #2
    I guess your need to change the assignment when test match, because you're assigning to a local variable, not to your 'shipPostalCode' element on DOM. So, instead of

    
if(regExp.test(postCode))
{
  postCode = postCode.substring(0,postCode.length-3) + " " + postCode.substring(postCode.length-3,postCode.length);
}
    Code (markup):
    try with
    
if(regExp.test(postCode))
{
  document.getElementById("shipPostalCode").value = postCode.substring(0,postCode.length-3) + " " + postCode.substring(postCode.length-3,postCode.length);
}
    Code (markup):
     
    ajsa52, May 11, 2007 IP
  3. paulamccl

    paulamccl Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks
    That works fine, but I think my regular expressions are a bit off. I have found a better one for the postcode but cant work out how to "regularly express"
    1234 1234 1234 1234 OR 1234561234561234 i.e. 4x4 numbers with or without spaces.

    /(\d{4}[-?]){3}\d{4}|\d{16}/;
    /[0-9]{4}\s?[0-9]{4}\s?[0-9]{4}\s?[0-9]{4}/ ;

    neither of these seem to work

    Any Ideas?
     
    paulamccl, May 11, 2007 IP
  4. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #4
    Try with this:

    /[0-9]{4}[\s]{0,1}[0-9]{4}[\s]{0,1}[0-9]{4}[\s]{0,1}[0-9]{4}/

    If does not work, try using [ ] (1 space inside) instead of [\s]
     
    ajsa52, May 11, 2007 IP
  5. paulamccl

    paulamccl Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks

    They all seem to work the same.I suppose there are a good number of ways to say the same thing with regular expressions. I am starting to think the error must be somewhere else.

    when any old thing is entered it returns as expected with a empty box and an error message.

    when 16 digits or 4 x 4 digits are input it returns a runtime error "cardNum is undefined"

    What exactly does that mean???
     
    paulamccl, May 11, 2007 IP
  6. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #6
    Use this, worked for me:

    
<html>
<head>

<script type="text/javascript">

var streetName =("");
var postCode =("");
var cardNum =("");
var regExp =("");

function valstreet(streetName) 
{
  // alert( "sn="+ streetName );
  if(document.getElementById)
    document.getElementById("error1").className = "invis";
  regExp = /[A-Za-z]{3,}-?[A-Za-z]?/;
  if(regExp.test(streetName))
  {
    alert( "true" );
    streetName = streetName.charAt(0).toUpperCase() + streetName.substring(1,streetName.length).toLowerCase();
  }
  else 
  {
    alert( "false" );
    document.getElementById("error1").className = "error1";
    document.getElementById("shipStreetName").value = '';
  }
}

function valcode(postCode) 
{
  postCode = postCode.toUpperCase();
  alert( "sn="+ postCode );
  if(document.getElementById)
    document.getElementById("error2").className = "invis";
  regExp = /^[0-9]{4}[\s]{0,1}[0-9]{4}[\s]{0,1}[0-9]{4}[\s]{0,1}[0-9]{4}$/;
  if(regExp.test(postCode))
  {
    alert( "true" );
    document.getElementById("shipPostalCode").value = postCode.substring(0,postCode.length-3) + " " + postCode.substring(postCode.length-3,postCode.length);
  }
  else 
  {
    alert( "false" );
    document.getElementById("error2").className = "error2";
    document.getElementById("shipPostalCode").value = '';
  }
}

function valcard(card) 
{
  alert( "ca="+ card );
  // the rest go here
}

</script>

</head>
<body>
<table>
<tr>
<td><label for="shipStreetName">Street Name</label></td>
<td><input type="text" name="shipStreetName" id="shipStreetName" maxlength="30" onBlur="valstreet(this.value)"><p class="invis" id="error1">Please enter valid street name</p></td>
</tr>

<tr>
<td><label for="shipPostalCode">Postal Code</label></td>
<td><input type="text" name="shipPostalCode" id="shipPostalCode" maxlength="30" onBlur="valcode(this.value)"><p class="invis" id="error2">Please enter valid Postcode</p></td>
</tr>

<tr>
<td><label for="billCardNumber">Credit Card Number</label></td>
<td><input type="text" name="billCardNumber" id="billCardNumber" maxlength="30" onBlur="valcard(this.value)"><p class="invis" id="error3">please enter valid card number</p></td>

</tr>
</table>


</body>
</html>
    Code (markup):
    EDIT: Also you should use parenthesis for each 4 digit group in valcode, then use $1, $2, $3 and $4 to fill the new format.
     
    ajsa52, May 11, 2007 IP
  7. paulamccl

    paulamccl Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks, but the idea is to avoid those annoying alerts!

    The whole thing works fine now except for the card number which still says cardNum is undefined when a correct number is input and does as expected when it has incorrect input.

    why is there always one field in a form that causes a nightmare!
     
    paulamccl, May 11, 2007 IP