CODEWITHSUNDEEP
javascriptvalidationformsfield
Rvddps
Rvddps

Reputation: 17

Javascript form field validation not working?

im doing a simple website for a university project, and one of the requirements is that i have javascript to validate the form fields input. I've implimented what i believe to be a working solution (took it off the W3C website) but it won't seem to run at all?

The HTML page is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Rubber Toy Dept. Inc. Ltd.</title>
    <link href="css/layout.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="scripts/java/validation.js"></script>
</head>

<body>
    <div  id="wrapper">
        <div id="header">
            <h1 id="headlines">Rubber Toy Dept. Inc. Ltd. </h1>
        </div>

        <div id="content">
            <div id="content-main">
                <form action="mailto:[email protected]" onsubmit="return validate_form(thisform)"  method="post">
                    <table width="858" border="0px">
                        <tr>
                            <td>
                                <input type="checkbox" name="cb1" value="1"></input>
                            </td>
                            <td>
                                Daniel
                            </td>
                            <td>
                                &pound;90
                            </td>
                            <td>
                                <a href="productpages/daniel.xhtml"><img src="pics/daniel_sml.jpg" width="75" height="75" alt="Daniel"></img></a>
                            </td>
                        </tr>
                              <tr>
                            <td>
                                <input type="checkbox" name="cb2" value="1"></input>
                            </td>
                            <td>
                                Graeme
                            </td>
                            <td>
                                &pound;80
                            </td>
                            <td>
                                <a href="productpages/graeme.xhtml"><img src="pics/graeme_sml.jpg" width="75" height="75" alt="Graeme"></img></a>
                            </td>
                          </tr>
                              <tr>
                            <td>
                                <input type="checkbox" name="cb3" value="1"></input>
                            </td>
                            <td>
                                Lewis
                            </td>
                            <td>
                                &pound;10
                            </td>
                            <td>
                                <a href="productpages/lewis.xhtml"><img src="pics/lewis_sml.jpg" width="75" height="75" alt="Lewis"></img></a>
                            </td>
                          </tr>
                              <tr>
                            <td>
                                <input type="checkbox" name="cb4" value="1"></input>
                            </td>
                            <td>
                                Conor
                            </td>
                            <td>
                                &pound;1 (bargain!)
                            </td>
                            <td>
                                <a href="productpages/conor.xhtml"><img src="pics/conor_sml.jpg" width="75" height="75" alt="Conor"></img></a>
                            </td>
                          </tr>
                        </table>

                    <table width="858" border="0px">
                        <tr>
                            <td>
                                Username
                            </td>
                            <td>
                                <input type="text" name="username" id="username"></input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                E-mail Address
                            </td>
                            <td>
                                <input type="text" name="email" id="email"></input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Address
                            </td>
                            <td>
                                <input type="text" name="address" id="address"></input>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input type="submit" name="submit" value="submit"></input>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>

            <div id="w3c">
                <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
            </div>

            <div id="footer">
                <i>Coded and Designed by G.A Tinsdale, D. Scott and L. Mclean</i>
                </div>
            </div>

            <div id="bottom">
        </div>
    </div>  
</body>

and the Javascript file contains:

function validate_required(field,alerttxt)
        {
            with (field)
            {
                if (value==null||value=="")
                {
                    alert(alerttxt);
                    return false;
                }
                else
                {
                    return true;
                }
            }
        }

        function validate_form(thisform)
        {
            with (thisform)
            {
                if (validate_required(email,"Email must be filled out!")==false)
                {
                    email.focus();
                    return false;
                }

                if (validate_required(username,"Username must be filled out!")==false)
                {
                    username.focus();
                    return false;
                }

                if (validate_required(address,"Address must be filled out!")==false)
                {
                    address.focus();
                    return false;
                }
            }
        }

Sorry if i've laid out the code wrong... i don't seem to understand how to do it properly :(

Thanks for any help given

Daniel.

Upvotes: 0

Views: 764

Answers (3)

Scott
Scott

Reputation: 3977

Looking at the URL you have given you have script tags all wrong

Line 7

<script type="text/javascript" src="script/java/validation.js">

Should be

<script type="text/javascript" src="script/java/validation.js"></script>

Line 8

<script>

should be

<script type="text/javascript">

And remove the extra script tag on line 50

</script>

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382806

Update:

There is 404 error for your validation file as rightly pointed out by @Matthew Wilson :

<script type="text/javascript" src="script/java/validation.js">
       ----------------------------------------^

Make sure that you are specifying the correct path and the file exists.

Problem here:

onsubmit="return validation.js:validate_form(thisform)"

Should be:

onsubmit="return validate_form(thisform)"

Upvotes: 1

Nathan
Nathan

Reputation: 11149

Have you included the script file in the of the page: <script type="text/javascript" src="validation.js"></script>. Next remove validation.js: from your form's onsubmit... that's not needed. If it still doesn't work, so some debugging. Stick an alert('form submitted') in your validate form function, and see if it fires. If not, you need to work out why, and if it does, put an alert further down the function tree to find out what's going on.

Upvotes: 0

Related Questions