CODEWITHSUNDEEP
javascript
AnchovyLegend
AnchovyLegend

Reputation: 12538

Validating forms using javascript only and preventing users from submitting JS disabled forms?

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>

Upvotes: 2

Views: 485

Answers (4)

Freddy
Freddy

Reputation: 192

You don't to reinvent the wheel. There are plenty of tools out there to validate using JavaScript. Check the jQuery validation plugin for instance; You can validate a form with a couple lines of code.

http://docs.jquery.com/Plugins/Validation

With regards to the server side validations, you should always validate your data on the server. JavaScript validations are meant to prevent user mistakes but they don't offer any security to your system at all.

Upvotes: 0

hugomg
hugomg

Reputation: 69944

The reason for checking things in the server as well is that a malicious user can send manually crafter POST or GET requests to your server, irrespective if those forms exist in your application or are disabled in your browser. Only disabling the forms would not be enough to solve this issue.

If you still want to disable the forms in non JS browsers though, what you could do is disable them by default and enable them on the JS.

Upvotes: 1

Richard
Richard

Reputation: 8280

You could disable the button by default, and then have JavaScript re-enable it. This however doesn't stop the user from re-enabling it themselves potentially using a cross-site script injection, or more realistically using something like FireBug or one of the browsers default built in developer tools.

I would strongly recommend having both client and server side validation, both for the user experience, and the integrity and security of your system. If you simply don't have time for both, then server-side definitely takes priority. The client-side of validation is a nicety aimed at making it nicer for the user; sadly users might not feel the same way about your code when it comes to breaking it.

Always have server-side validation. :)

Upvotes: 2

Kos
Kos

Reputation: 72271

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.

Upvotes: 7

Related Questions