Javascript form field validation not working?

Question

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.

By the way, your browser should have given you error messages for this page that would have been along the lines of "object not found: validation". And if you didn't get useful messages, get a better browser for this kind of work! Paying attention to this output will help you pinpoint errors more easily. — Andrzej Doyle
– Andrzej Doyle, Commented Nov 11, 2010 at 11:11

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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)"

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 11, 2010 at 11:07

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Andrzej Doyle Over a year ago

Indeed. When you reference an external JS file, all of its global declarations are imported into the page's namespace, so they don't need to be prefixed with the script name.

Rvddps Over a year ago

Ok, but that still doesn't seem to work. Ive uploaded the files here, and you can check for yourself? rvddps.com/Updated%20Structure/index.xhtml

Matthew Wilson Over a year ago

There's a 404 error from the attempt to load the Javascript file.

Rvddps Over a year ago

It seems to say there's an error with the with (field) line in the javascript? i have no idea what that is though?

Matthew Wilson Over a year ago

'with' is a pretty nasty construct and can lead to subtle errors. It should probably be OK here though.

|

Nathan · Accepted Answer · 2010-11-11 11:13:24Z

0

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.

answered Nov 11, 2010 at 11:13

Nathan

11.2k4 gold badges41 silver badges50 bronze badges

Comments

Scott · Accepted Answer · 2010-11-11 11:33:56Z

0

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>

answered Nov 11, 2010 at 11:33

Scott

3,98710 gold badges40 silver badges56 bronze badges

2 Comments

Dan Hanly Over a year ago

The default type for a <script> tag is always "text/javascript", the page may not be standards compliant without them but it'll still be functional

zedd45 Over a year ago

With HTML5 I don't believe you need the type attribute at all, but this is XHTML, so it is a required attribute for this doctype, although I think it only impacts HTML Validation, as modern browsers will still execute the block as JavaScript. stackoverflow.com/questions/5265202/…

Collectives™ on Stack Overflow

Javascript form field validation not working?

3 Answers 3

Update:

12 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update:

12 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related