My javascript form validation doesn't work

Question

I'm trying to validate the form, but when I press the submit button, it doesn't do anything... I want it to send me to the next page which is game.html.

HTML:

<!--[if IEMobile]>
<link rel="stylesheet" type="text/css"
href="/styles/mobile.css" media="screen"/>
<![end if]-->

</head>
<body>
<img class="notmobile" id="imgtop1" src="image/card10.jpg"> 
<img class="notmobile" id="imgtop2" src="image/card11.jpg">
<img class="notmobile" id="imgtop3" src="image/card12.jpg">
<img class="notmobile" id="imgtop4" src="image/card13.jpg">
<img class="notmobile" id="imgtop5" src="image/card1.jpg">
<img class="notmobile" id="imgleft1" src="image/back.jpg">
<img class="notmobile" id="imgleft2" src="image/back.jpg">
<img class="notmobile" id="imgleft3" src="image/back.jpg">
<img class="notmobile" id="imgleft4" src="image/back.jpg">
<img class="notmobile" id="imgleft5" src="image/back.jpg">
<img class="notmobile" id="imgright1" src="image/back.jpg">
<img class="notmobile" id="imgright2" src="image/back.jpg">
<img class="notmobile" id="imgright3" src="image/back.jpg">
<img class="notmobile" id="imgright4" src="image/back.jpg">
<img class="notmobile" id="imgright5" src="image/back.jpg">

<div id="title"> <h1> Grand Palace Casino </h1> </div>
<div id="content"> 
<div id="formbox">
<fieldset>
<form id="fback" name="fback" method="get" action="game.html" onsubmit="return validateForm();">

<label class="form"> First name: </label> <br />
<input type="text" maxlength="30" size="30" name="fname" id="fname" /> <br /><br />

<label class="form"> Last name: </label>  <br />
<input type="text" maxlength="30" size="30" name="lname" id="lname"/> <br /><br />

<label class="form"> Phone number: </label> <br />
<input type="text" maxlength="30" size="30" name="pnum" id="pnum"/> <br /><br />

<label class="form"> Postal code: </label> <br />
<input type="text" maxlength="30" size="30" name="postCode" id="postCode"/> <br /><br />

<label class="form"> Starting amount of money: </label> <br />
<input type="text" maxlength="30" size="30" name="startMoney" id="startMoney"/> <br /><br />

<input name="button" type="button" id="button" value="Submit" />

</form>
</fieldset>




</div>



</div>
</body>
</html>

Javascript

// JavaScript Document
var $ = function(id) { return document.getElementById(id); }

function validateForm(){
    var nextPage = true;
    var regFName = /^([A-Z])[a-z]{1,20}$/;
    var regLName = /^([A-Z])[a-z]{1,30}$/;
    var regPnum = /^\d{3}\-\d{3}\-\d{4}$/;
    var regPostCode = /^[A-Za-z]{1}\d{1}[A-Za-z]{1} \ *\d{1}[A-Za-z]{1}\d{1}$/;
    var myMoney = $("startMoney").value;
    var regMoney = /[\.\,]/;
    document.fback.postCode.value = document.fback.postCode.value.toUpperCase();

    if ($("fname").value == "")
    {
        alert ("Enter your first name");
        nextPage = false;
    }

    else if (!$("fname").value.match(regFName))
    {
        alert ("You must capitalize your first character, and then the rest are lower-case. Only letters allowed. E.G: Charlie");
        nextPage = false;
    }

    else if ($("lname").value == "")
    {
        alert ("Enter your last name");
        nextPage = false;
    }

    else if (!$("lname").value.match(regLName))
    {
        alert ("You must capitalize your first character, and then the rest are lower-case. Only letters allowed. E.G: Kaing");
        nextPage = false;
    }

    else if ($("pnum").value == "")
    {
        alert ("Enter your phone number");
        nextPage = false;
    }

    else if (!$("pnum").value.match(regPnum))
    {
        alert ("You must use numbers only. Enter your phone in the following format: ###-###-#### E.G: 613-600-6991");
        nextPage = false;
    }

    else if ($("postCode").value == "")
    {
        alert ("Enter your postal code");
        nextPage = false;
    }

    else if (!$("postCode").value.match(regPostCode))
    {
        alert ("Enter your postal code in the following format: ANA NAN");
        nextPage = false;
    }

    else if ($("startMoney").value == "")
    {
        alert ("Enter your starting amount of money");
        nextPage = false;
    }

    else if (isNaN(myMoney) || parseInt(myMoney) < 5 || parseInt(myMoney) > 5000 || $("startMoney").value.match(regMoney))
    {
        alert ("You must enter money between 5$ and $5000. Only numbers allowed. No cents. E.G: 5000");
        nextPage = false;
    }
    nextPage = true;
}

Check javascript console log. Also for a quick debug, working with all navigator, add alerts inside you chekform function to detect where it stops. — Cedric Simon
– Cedric Simon, Commented Mar 21, 2014 at 21:50

Josh Crozier · Accepted Answer · 2015-12-12 02:10:37Z

2

Your function does not return anything, and as @fizz stated your input type should be type="submit" and not "button".

...
else if (isNaN(myMoney) || parseInt(myMoney) < 5 || parseInt(myMoney) > 5000 || $("startMoney").value.match(regMoney))
{
alert ("You must enter money between 5$ and $5000. Only numbers allowed. No cents. E.G: 5000");
nextPage = false;

}
return nextPage;
}

edited Dec 12, 2015 at 2:10

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

answered Mar 21, 2014 at 21:53

Cedric Simon

4,6694 gold badges43 silver badges53 bronze badges

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

1 Comment

Fizz Over a year ago

Didn't warrant its own answer but your submit button should be of type submit not button. Else it won't call the onsubmit handler.

fabolous · Accepted Answer · 2014-03-21 22:32:23Z

0

In jquery to access id of an element syntax is $("#elementID") and to get the value of an element is by using val() fn.

ex.

   if ($("#fname").val() == "")
{
    alert ("Enter your first name");
    nextPage = false;
}

var myMoney = $("#startMoney").value;

answered Mar 21, 2014 at 22:32

fabolous

757 bronze badges

1 Comment

fabolous Over a year ago

Include Jquery library to accress jquery object.

Collectives™ on Stack Overflow

My javascript form validation doesn't work

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related