Home/ Questions/Q 8534345
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T10:10:25+00:00

I am trying to get a basic data validation working on a form for

  • 0

I am trying to get a basic data validation working on a form for a uni project. However, the javascript function I am trying to call does not seem to be getting accessed at all, and I haven’t been able to figure out why.

Here is my HTML:

<!DOCTYPE HTML>

<HTML>

<HEAD>

<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 

<TITLE>Make an Order</TITLE>

<link href="design/css/style.css" rel="stylesheet" type="text/css">
<script src="design/scripts/Validator.js" language="javascript" type="text/javascript"></script>

</HEAD>

<BODY>

<div id="container">

    <form id="guestbook" method="post" action="index.html" onsubmit="return Validator(this);">
        <fieldset>
            <legend>
                Personal information
            </legend>
            <label for=name>Name:</label>
            <input id=name name=name type=text placeholder="Your name" required autofocus><br />
            <label for=email>Email:             </label>
            <input id=email name=email type=text placeholder="Your email address" required><br />
            <label for=phnumber>Phone number:       </label>
            <input id=phnumber name=phnumber type=text placeholder="Your telephone number" required><br />
        </fieldset>

        <fieldset>
            <legend>
                Order details
            </legend>
            Choose whether you would like to order an image, video, or both:<br />
            <input id=image name=order_type type=checkbox value="Image"><label for=image>$100 Image:</label><br />
            <input id=video name=order_type type=checkbox value="Video"><label for=video>$95/frame Video:</label><br />
            <label for=url>URL of image to modify:  </label>
            <input id=url name=url type=text placeholder="URL of image" required><br />
        </fieldset>

        <fieldset>
            <legend>
                Credit card details
            </legend>
            <label for=ccnumber>Credit card number:</label>
            <input id=ccnumber name=ccnumber type=text placeholder="Your credit card number" required><br />
            <label for=bsbnumber>BSB number:</label>
            <input id=bsbnumber name=bsbnumber type=text placeholder="Your BSB number" required><br />
        </fieldset>

        <div class="buttons">
            <input type="submit" value="Submit" />
            <input type="reset" value="Reset" />
        </div>

    </form>

    <div id="footer">
        <p>website by etc</p>
    </div>

</div>

</BODY>

</HTML>

And here is my external javascript file, Validator.js:

function Validator(theForm)
{
    var errorinit = "Error(s) detected. Please amend before continuing:\n";
    var error = errorinit;

    //check that at least one checkbox (to choose either image or video) has been selected
    var boxChecked = false;
    if (theForm.image.checked == true && theForm.video.checked == true)
    {
        boxChecked = true;
    }
    if (boxChecked == false)
    {
        error += " - You must select at least a video or an image.\n"
        break;
    }

    //check that numerical-only inputs have numbers (but allowing for habitual spaces or dashes) only
    var digits = "0123456789- ";
    var temp = null;
    for (var i = 0; i < theForm.phnumber.value.length; i++)
    {
        temp = theForm.phnumber.value.substring(i, i+1)

        if (digits.indexOf(temp) == -1 && theForm.phnumber.value != "")
        {
            error += " - Your phone number must be numerical only.\n";
            break;
        }
    }
    for (var i = 0; i < theForm.ccnumber.value.length; i++)
    {
        temp = theForm.ccnumber.value.substring(i, i+1)

        if (digits.indexOf(temp) == -1 && theForm.ccnumber.value != "")
        {
            error += " - Your credit card number must be numerical only.\n";
            break;
        }
    }
    for (var i = 0; i < theForm.bsbnumber.value.length; i++)
    {
        temp = theForm.bsbnumber.value.substring(i, i+1)

        if (digits.indexOf(temp) == -1 && theForm.bsbnumber.value != "")
        {
            error += " - Your bsb number must be numerical only.\n";
            break;
        }
    }

    //check that the email address contains an @ symbol
    if ((theForm.email.value.indexOf ('@',0) == -1 || theForm.email.value.indexOf ('.',0) == -1) && theForm.email.value != "")
    {
        error += " - Your email address is invalid.";
    }

    //check if there has been any error
    if (error != errorinit)
    {
        alert(error);
        return (false);
    } else {
        alert("no problems");
        return (true);
    }
}

Now this is fairly simple code, so and after checking and re-checking I am stumped as to why it is not working. As you can see in the javascript, I have set it to throw an alert whether there has been an error or not, but no alert is given at all; I am simply returned to index.html without any validation (apart from the ‘required’ fields).

Can anybody point out the reason that this is not working?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is the error that you have in your code:

    SyntaxError: unlabeled break must be inside loop or switch

    You are using break; at part below while you aren’t in any switch or loop to break it:

    if (boxChecked == false)
{
    error += " - You must select at least a video or an image.\n"
    break;
}

    To solve this problem, replace break; with return false; …

    • 0