External Javascript form validation isn't working, not sure why?
Question
So I have written a Javascript external file which I will put below. It is to validate input in a form in the HTML site/file. I still have more functions to add but won't worry about them until I've got it working correctly. The Javascript code is:
// JavaScript source code
function fourDigit(ID)
{
"use strict";
var pattern = /^[1-9]\d{0,3}$/g;
var result = pattern.test(document.getElementById(ID).value);
if (result == false)
{
alert("Please insert a valid numeric value between 1-9999");
return false;
}
else
{
return true;
}
}
function runner()
{
"use strict";
fourDigit('RunnerID');
}
function event()
{
"use strict";
fourDigit('EventID');
}
function validate()
{
"use strict";
var result = runner() && event();
if (result == true)
{
alert("all good");
return true;
}
else
{
alert("doesn't work");
return false;
}
}
When I test this on the HTML file (I call the validate() function on the submit button of the form), it always give me the alert("Please insert a valid numeric value between 1-9999"); and alert("doesn't work"); even when I insert valid numbers into the RunnerID and EventID form fields. I can't figure out why hence the question. May be something simple but only started learning Javascript recently.
The HTML file I'm calling it in is:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"/>
<title>Submit a runner time</title>
<script language="javascript" src="validate.js"></script>
</head>
<body>
<hr/>
<h1>Submit a runner time</h1>
<hr/>
Note: all fields marked '*' are mandatory.
<p/>
<form onSubmit="return validate()">
<table>
<tr><td>Runner ID*</td>
<td><input type="text" id="RunnerID" name="RunnerID" size="4" maxlength="4"/></td>
</tr>
<tr><td>Event ID*</td>
<td><input type="text" id="EventID" name="EventID" size="4" maxlength="4"/></td>
</tr>
<tr><td>Date (YYYY-MM-DD)*</td>
<td><input type="text" name="Date" size="10" maxlength="10"/></td>
</tr>
<tr><td>Finish time (HH:MM:SS)*</td>
<td><input type="text" name="FinishTime" size="8" maxlength="8"/></td>
</tr>
<tr><td>Position</td>
<td><input type="text" name="Position" size="5" maxlength="5"/></td>
</tr>
<tr><td>Category ID</td>
<td><input type="text" name="CategoryID" size="3" maxlength="2"/></td>
</tr>
<tr><td>Age grade</td>
<td><input type="text" name="AgeGrade" size="5" maxlength="5"/></td>
</tr>
<tr><td>Personal best</td>
<td><input type="text" name="PB" size="1" maxlength="2"/></td>
</tr>
</table>
<input type="submit" name="submitrunnertime" value="submit"/>
<hr/>
</form>
</body>
</html>
Thanks
2 answers
solution1
1 2017-01-10 09:48:28
Your regex is wrong!
[1-9999] means 1 digit number in the range of 1 to 9
You need ^[1-9]\\d{0,3}$
meaning:
^ : start of string
[1-9] : 1 digit from 1-9
\\d : a number
{0,3} : 0 to 3 digits long
$ : end of string
this will not allow 0111 or any number starting with 0
solution2
1 2017-01-10 09:53:20
Pure JS.
// JavaScript source code
function fourDigit(ID)
{
var pattern = /^([1-9][0-9]{0,3})$/;;
var result = pattern.test(document.getElementsByName(ID)[0].value);
if (result == false)
{
alert("Please insert a valid numeric value between 1-9999");
return false;
}
else
{
return true;
}
}
function runner()
{
return fourDigit('RunnerID');
}
function event()
{
return fourDigit('EventID');
}
function validate()
{
var result = runner() && event();
if (result == true)
{
alert("all good");
return true;
}
else
{
alert("doesn't work");
return false;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.