Hello. Im not very good with javascript. My knowledge is very limited. I need your help.
See, this code is going to check if a user has inputted an empty field or not. As of now, Im testing it on 'first name' text field. If the user didn't input anything (the text field is empty) and clicks submit, an asterisk will be displayed at the right side of the text field. The asterisk is only temporary. If the user clicks the text field or refreshes the page, the asterisk at will disappear.
I've googled it already and I've tried every technique I can find but I can't get this code to obey.
Any suggestions? ideas?
<html>
<head>
<title>
Assignment
</title>
<link rel="stylesheet" type="text/css" href="acct.css">
<script type="text/javascript">
function aster(fn, ast)
{
if(fn.value.length==0)
ast.style.visibility="visible";
}
</script>
</head>
<body>
<form>
<table border="1">
<tr>
<td colspan="3"><p>Create Account</p></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="fn"></td>
<td><p id="ast1">*</p></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="ln"></td>
<td><p id="ast2" value="*">*</p></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" id="email"></td>
<td><p id="ast3">*</p></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" id="pass"></td>
<td><p id="ast4">*</p></td>
</tr>
<tr>
<td colspan="3"><input type="submit" value="Submit" onclick="aster(document.getElementById('fn', 'ast'))"/> </td>
</table>
</form>
</body>
</html>
/*External CSS*/
#ast1
{
color:red;
visibility:hidden;
}