I crafted this javascript and html code to validate the username and password input. Strangely, the regular expression for the password is not being acknowledged.
function checkDetails() {
var uname = document.getElementById("uname").value;
var pass = document.getElementById("pass").value;
var reuname = /^[a-zA-Z]\w*$/;
var repass = /^\w+{4,8}$/; // This line is causing issues
if (reuname.test(uname)) alert(uname);
else {
alert("username should be alphanumeric and start with an alphabet");
return false;
}
if (repass.test(pass)) alert(pass);
else {
alert("password should be alphanumeric with 4-8 characters");
return false;
}
}body {
background-color: teal;
}
#content {
width: 550px;
margin-left: auto;
margin-right: auto;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
#content table td {
height: 30px;
}<div id="content">
<h1>Registration Form</h1>
<form method="post" action="" onsubmit="return checkDetails(); return false;">
<table>
<tr>
<td>Enter Username:</td>
<td>
<input type="text" name="uname" size="20" id="uname" />
</td>
</tr>
<tr>
<td>Enter Password:</td>
<td>
<input type="password" name="pass" size="20" id="pass" />
</td>
</tr>
<tr>
<td>Re-Enter Password:</td>
<td>
<input type="password" name="repass" size="20" id="repass" />
</td>
</tr>
<tr>
<td>Enter E-mail Address:</td>
<td>
<input type="text" name="email" id="email" />
<td>
</tr>
<tr>
<td>Re-Enter E-mail Address:</td>
<td>
<input type="text" name="reemail" id="reemail" />
<td>
</tr>
<tr>
<td>Enter Full Address:</td>
<td>
<textarea rows="10" cols="50" name="address" id="address"></textarea>
<td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" name="submit" value="submit" style="width: 100px; height: 30px;" />
</td>
</tr>
</table>
</form>
</div>It works fine when I comment out that specific line.
/*var repass = /^\w+{4,8}$/;*/
Any idea why this strange behavior is happening?