I am trying to create a validated registration form for my website and am currently coding up a demo of it for practice. I was able to validate the form using javascript. However, I read somewhere that forms should be validated both client and server side because JS can be disabled. I was wondering if there is a way to simply disable the submit button if all javascript validations aren’t satisfied (I noticed that eBay uses a similar method with their registration forms) and if so, how would I go about accomplishing this?
This is where I am at so far:
<script type="text/javascript">
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(re.test(email)) {
document.getElementById('result').innerHTML = '<img src="http://iconlet.com/icons/kensaunders/4/CheckMark.png" style="width:15px;"/> Valid';
} else {
document.getElementById('result').innerHTML = '<img src="http://biglistbigsales.com/m/templates/GPT/images/x_xMarkRed4.png" style="width:15px;"/> Invalid';
}
}
function validatePass(pass){
if(pass.length < 6){
document.getElementById('pass-result').innerHTML='<img src="http://biglistbigsales.com/m/templates/GPT/images/x_xMarkRed4.png" style="width:15px;"/>Your password must be at least 6 characters';
}else{
document.getElementById('pass-result').innerHTML='<img src="http://iconlet.com/icons/kensaunders/4/CheckMark.png" style="width:15px;"/>valid';
}
}
function validateCPass(cpass){
var pass = document.getElementById('pass').value;
if(cpass != pass){
document.getElementById('cpass-result').innerHTML="Passwords must match";
}else{
document.getElementById('cpass-result').innerHTML='<img src="http://iconlet.com/icons/kensaunders/4/CheckMark.png" style="width:15px;"/>';
}
}
</script>
</head>
<body>
<form action="practice.php" method="post">
e-mail:<br/><input id="email" type="text" onblur="validateEmail(this.value)" /><span id="result"></span>
<br/><br/>Password:<br/><input type="password" id="pass" onblur="validatePass(this.value)"><span id="pass-result"> </span>
<br/><br/>Confirm Password:<br/><input type="password" id="confpass" onblur="validateCPass(this.value)"> <span id="cpass-result"></span>
<br/><input type="submit">
</form>
</body>
Nay, that’s not possible for a number of reasons:
Accessibility. Your customer’s browser might not support Javascript, or the user might have disabled it (yes, some people do).
Security. A web application exposes an HTTP interface to the whole internet. You don’t even need to have a browser to send HTTP request in the first place! Hence, your backend needs to treat any HTTP request as untrusted and validate it. This is true for all data which comes from an untrustable source.
Hence:
Server-side validation is a must for any correct web application.
Client-side validation is an UI enhancement which exists to make the user experience better by providing faster feedback.