javascript - JS verify login form - where I went wrong? -
i have nut crack, cracks head time now.
i'm programming beginner, that's introducing. try achieve js form validation, checks input fields email , password , if match criteria, unset "disabled" attribute on login button.
i tried components of js code , works fine, when merge function validate(), dont works , cannot find reason why.
here html:
<!doctype html> <head> <meta charset='utf-8' /> <title>$title</title> <link href='css/style.css' rel='stylesheet' type='text/css' /> <script type='text/javascript' charset='utf-8' src='js/validateinput.js'></script> </head> <body> <div id='header'><h1>$title<h1></div> <form name='login' method='post' action=''> <table border='0'> <tr> <th>e-mail:</th> <td colspan='2'><input type='text' name='email' id='email' size='30' value='$posted_email' onkeyup='validate()' onclick='validate()' onchange='validate()' /> </td> </tr> <tr> <th>heslo:</th> <td><input type='password' name='pword' id='pword' size='21' onkeyup='validate()' onclick='validate()' onchange='validate()'/></td> <td><input type='submit' name='login' class='submit' id='loginbtn' value='ok' /></td> </tr> </table> </form> </body> now js:
function $(id) { if (id.indexof('#') == 0 || id.indexof('.') == 0) { var name = id.substr(1); return id.indexof('#') == 0 ? document.getelementbyid(name) : document.getelementsbyclassname(name); } return (typeof document.getelementbyid('id') !== 'undefined') ? document.getelementbyid(id) : document.getelementsbyclassname(id); } function validateemail(string) { var re = /[\w\s\.\$\*\+\/\?\^\{\|\}\(\)]{1,64}@[\w]{1,250}\.[\w]{2,3}/; return re.test(string); } function validate() { var login = $('#loginbtn'); var email = $('#email'); var pword = $('#pword'); if (!validateemail(email.value)) { email.style.color = 'orange'; } else if (pword.length > 0) { login.disabled = false; } return false; } window.onload = function() {$('#loginbtn').disabled = true;}; any thoughts?
the problem located @ condition :
if (!validateemail(email.value)) { email.style.color = 'orange'; } else if (pword.length > 0) { login.disabled = false; } change function validate() below :
function validate() { var login = $('#loginbtn'); var email = $('#email'); var pword = $('#pword'); var result = false; if (!validateemail(email.value)) { email.style.color = 'orange'; } else { email.style.color = 'black'; result = true; } if (result && pword.value.length > 0) { login.disabled = false; } else { login.disabled = true; } } hopefully help.
Comments
Post a Comment