#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    4
    Rep Power
    0

    Form validation Issue - Empty field & field length


    Hi
    I am trying to carry out some form validation using javascript, I am very new to this and I am unable to get it to work.
    The form is for users to record their bank details, the javascript will check for empty fields but for the account number and sortcode it will also check to ensure they are of the accepted length. So for example it will check the field for account number to see if it is empty OR if is is not equal to 8.
    My logic seems correct but it will not prevent the form from being submitted if the account number is 7 digits.
    I would really appreciate it if anyone is able to spot where the issue is and help me to correct it.
    I have tried to put the code in tags but it comes out very messy so apologies in advance for that.

    <html>
    <head>
    <title>Bank Details Form</title>
    <link rel="stylesheet" type ="text/css" href ="style.css">

    <script>

    function validateForm(){

    var errorMessage ="";

    if(document.getElementById("bName").value===""){
    errorMessage+=("Please enter the name of your bank \n");
    document.getElementById("bName").style.bordercolor ="red";

    }


    if(document.getElementById("acName").value===""){
    errorMessage+=("Please enter your account name \n");
    document.getElementById("acName").style.bordercolor ="red";

    }

    if((document.getElementById("scode").value==="")||(document.getElementById("scode").value!="6"){
    errorMessage +=("Please enter a valid bank sortcode \n");
    document.getElementById("scode").style.bordercolor ="red";

    }

    if((document.getElementById("acNum").value==="")||(document.getElementById("acNum").value!="8"){
    errorMessage+=("Please enter a valid account number \n");
    document.getElementById("acNum").style.bordercolor ="red";

    }

    if(document.getElementById("bal").value===""){
    errorMessage +=("Please enter your balance \n");
    document.getElementById("bal").style.bordercolor ="red";

    }

    if(document.getElementById("odlimit").value===""){
    errorMessage +=("Please enter your overdraft limit \n If you do not have an overdraft enter 0");
    document.getElementById("odlimit").style.bordercolor="red";
    }

    if(errorMessage !== ""){
    alert(errorMessage);
    return false;
    }
    }

    </script>
    </head>

    <body>
    <h1><strong><u>BANK DETAILS</u></strong></h1>
    <div id="content2">
    <p>Please complete all the fields marked *.<br>
    </p>

    <form action ="#" method ="post" onsubmit= " return validateForm() ">
    <table border="1" cellpadding="1">
    <tr>
    <td>
    <p>Bank Name: *</p>
    </td>
    <td>
    <input type ="text" id="bName" name ="BankName" placeholder ="Name of your bank"/>
    </td>

    </tr>
    <tr>
    <td>
    <p>Account Name: *</p>
    </td>
    <td>
    <input type ="text" id="acName" name ="accName" placeholder="Name of your account"/>
    </td>

    </tr>
    <tr>
    <td>
    <p>Sortcode: *</p>
    </td>
    <td>
    <input type ="text" id="scode" name ="sortcode" placeholder="Your Sortcode"/>
    </td>

    </tr>
    <tr>
    <td>
    <p>Account Number: *</p>
    </td>
    <td>
    <input type ="text" id="acNum" name ="accNum" placeholder="Account Number"/>
    </td>

    </tr>
    <tr>
    <td>
    <p>Balance: *</p>
    </td>
    <td>
    <input type ="text" id="bal" name ="balance" placeholder ="Your Current Balance"/>
    </td>

    </tr>
    <tr>
    <td>
    <p>Password Hint :</p>
    </td>
    <td>
    <input type ="text" id="pHint" name ="passwordHint" placeholder="How to remember your password"/>
    </td>

    </tr>
    <tr>
    <td>
    <p>PIN :</p>
    </td>
    <td>
    <input type ="text" id="pn" name ="pin" placeholder="PIN"/>
    </td>

    </tr>
    <tr>
    <td>
    <p>Overdraft Limit: *</p>
    </td>
    <td>
    <input type ="text" id="odlimit" name ="overdraftlimit" placeholder="What is your O/D limit"/>
    </td>

    </tr>
    </table>

    <input type="submit" value="Submit">
    </div>
    </form>
    <form action ="creditCard_Form.php">
    <input type ="submit" value="Next"/>
    </form>

    <a href ="home.php">Go to Home Page</a>
    </body>
    </html>
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1045
    Hi,

    the JavaScript code isn't even syntactically valid, so either you haven't given us your actual code, or your script doesn't do anything at all (apart from crashing).

    Also, your checks don't look quite right:

    javascript Code:
    document.getElementById("scode").value!="6"

    This checks if the value is literally the string "6". I guess what you really mean is the length of the string:

    javascript Code:
    document.getElementById("scode").value.length != 6

    By the way, you realize that JavaScript validation doesn't prevent people from submitting invalid data, right?
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    4
    Rep Power
    0
    Thanks for pointing out the value.length, that was me being stupid.

    I dont understand what you mean by syntactically valid.
    As I said I am new to this but to psuedo code I thought I was getting the function to check each of the elements.
    If the value is "" its an empty string and will create an error
    Or else it checks the length of the input against a target
    i.e. if the length of the sortcode input is 4 it does not match the target which is 6 and thus returns false.

    If I have misunderstood could you show me where.

    thanks for you help.
  6. #4
  7. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1045
    Originally Posted by Steve_NI
    I dont understand what you mean by syntactically valid.
    The code above is not valid JavaScript syntax. Browsers cannot understand it at all. This is caused by a missing closing parantheses in line 25 and then again in line 31.

    You need to get familiar with the JavaScript console of your browser. In Chrome and Internet Explorer, you just have to hit F5. In Firefox, you need to install Firebug first. The JavaScript console will show you all errors which happened when the browser tried to run your code. Currently, I get this error:

    Code:
    Uncaught SyntaxError: Unexpected token {        [line 25]
    When you look at that line, you see that the paranthesis are not balanced. There's one missing at the end.



    Originally Posted by Steve_NI
    If the value is "" its an empty string and will create an error
    Or else it checks the length of the input against a target
    i.e. if the length of the sortcode input is 4 it does not match the target which is 6 and thus returns false.
    There's no point in making this extra check for empty strings. Simply check the length. This automatically includes empty strings which have a length of 0.

    And to ask again: Do you realize that your code doesn't prevent people from sending garbage data to your server? I'm saying this because many people don't and then wonder why their database is filled with garbage despite all their JavaScript checks.

    JavaScript runs on the client, which means you have absolutely no control over it. The user may manipulate the code or prevent it from running or turn off JavaScript altogether. They don't even have to use a browser to send data to your server. So all your checks can do is assist well-meaning users with filling out the form as long as JavaScript is turned on. They cannot prevent people from sending you garbage data. If that's what you need, you have to do the checks again on the server.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    4
    Rep Power
    0
    I think I get you now
    So by just checking to see if the value is a certain length will also check if its not 0. So if it the sortcode is not 8 digits long it will not matter if it is not empty is that what you are saying?
    Totally get what you mean by posting garbage I have been able t put in symbols and numbers for the bank name which of course should not happen
    I know I need to be validating this server side as well but its small steps at a time!
    I really appreciate your help with this though
  10. #6
  11. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1045
    Originally Posted by Steve_NI
    So if it the sortcode is not 8 digits long it will not matter if it is not empty is that what you are saying?
    Yes.



    Originally Posted by Steve_NI
    I know I need to be validating this server side as well but its small steps at a time!
    Sure. Just wanted to make sure there are no wrong expectations.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    4
    Rep Power
    0
    Just to let you know I made the changes and the code now works. It catches if the user omits to include data and it catches if the user has the incorrect length of account number and sortcode:
    I still cant get the code wrap to work but my final script looks like:

    function validateForm(){

    var errorMessage ="";

    if(document.getElementById("bName").value===""){
    errorMessage+=("Please enter the name of your bank \n");
    document.getElementById("bName").style.bordercolor ="red";

    }


    if(document.getElementById("acName").value===""){
    errorMessage+=("Please enter your account name \n");
    document.getElementById("acName").style.bordercolor ="red";

    }

    if(document.getElementById("scode").value.toString().length!=6){
    errorMessage +=("Please enter a valid bank sortcode \n");
    document.getElementById("scode").style.bordercolor ="red";

    }

    if(document.getElementById("acNum").value.toString().length!=8){
    errorMessage+=("Please enter a valid account number \n");
    document.getElementById("acNum").style.bordercolor ="red";

    }

    if(document.getElementById("bal").value===""){
    errorMessage +=("Please enter your balance \n");
    document.getElementById("bal").style.bordercolor ="red";

    }



    if(document.getElementById("odlimit").value===""){
    errorMessage +=("Please enter your overdraft limit \n If you do not have an overdraft enter 0");
    document.getElementById("odlimit").style.bordercolor="red";
    }



    if(errorMessage !== ""){
    alert(errorMessage);
    return false;
    }
    }


    I know its not professional but compared to what I knew a few weeks ago its quite a step for me!
    Thanks again for your patience.
  14. #8
  15. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,957
    Rep Power
    1045
    You can leave out the toString(), because the form value already is a string. Apart from that, It's looking good.
    The 6 worst sins of security ē How to (properly) access a MySQL database with PHP

    Why canít I use certain words like "drop" as part of my Security Question answers?
    There are certain words used by hackers to try to gain access to systems and manipulate data; therefore, the following words are restricted: "select," "delete," "update," "insert," "drop" and "null".

IMN logo majestic logo threadwatch logo seochat tools logo