A while back I had a project that required the submit button of the login form to be disabled unless both the username field AND the password field had values. There are probably several ways to skin that cat, but my good friend Boyan Kostadinov offered a more elegant solution (he's always good for the most elegant approach!), and I thought I'd share it with whoever else may benefit.
This solution uses the Prototype library (you need version 1.6). It also uses a small "login.js" file that Boyan wrote which looks for anything with the class "enableOnEntry" (the key to making this work) and then cycles through the form elements within that class, adding their IDs to an array (actually a delimited list, but it is split into an array later). Boyan then binds event listeners to each of the form fields which, while typing in values, will check to see if the submit button should be enabled or not. Anyway, you can read through the JS file if you like, but here's how to implement it, along with a working demo in this post:
1. acquire and reference the following js files in your template (in this order):
prototype.js
login.js
2. ensure that your form tag has the class "enableOnEntry";
3. ensure that your form has exactly one submit button (of type 'submit', not 'button');
That's it!
Working Demo:
For your convenience, here is the code used to create the working sample above:
and here are links to the js files:
<script src="/js/login.js"></script>
<fieldset style="width:200px;">
<legend>Login Form</legend>
<form class="enableOnEntry" name="login" id="login" onSubmit="alert('form submitting...');return false;">
Username:<br><input type="text" id="username" name="username" value="" /><br><br>
Password:<br><input type="password" id="password" name="password" value="" /><br>
<br>
<input name="submit" id="submit" type="submit" disabled="true" value="Login" /> <input type="reset" value="Clear" onClick="$('submit').disabled = true;" />
</form>
</fieldset>
Hope it helps.
You are not logged in, so your subscription status for this entry is unknown. You can login or register here.
Any thoughts on this? I have not come up with anything good.
But rather than disabling onSubmit, Doug's post is more about an alternative approach to client side validation of required fields. It sounds appealing but my only concern is that it gives less feedback to the user. They see they can't submit the form, but there's nothing explaining why: just a greyed out button. I think Joel Spolsky wrote about this recently, saying that you should never disable menus etc, but instead explain *why* an option isn't available. It may be obvious to the developer (required fields are empty) but not necessarily to the user.