I've tried a few scripts I've found online, however I'm struggling to make any of them work for me. I have a simple form with 3 fields - name, username and email. I need to accomplish the following;
- Validate input on the name field (this can be as simple as making sure it's not left empty)
- Check username as it's entered - I'm thinking something very similar to the twitter signup form here. I have a div element alongside that holds the message, with various classes to style it. So, initially I would show a div with 'grey' class and a message 'choose a username'. As the user types, the database is checked to see if the name is already taken and returns the message and div styling as appropriate. If the name is available, I also have text below this I'd like to update to show how the username will be displayed (see form code/layout below for explanation).
- Validate Email address is correctly formatted.
- Disable the form submit until all of the above are ok
I can accomplish the validation and username checks *after* form submit (using simple <cfif>, but I'm struggling to figure out how to do this before form submit.
Any pointers much appreciated!
<!--- Current Form --->
<label for="name"><span>Full Name</span>
<input type="text" id="name" name="name" class="input" />
<div class="message grey">Enter your Name</div>
<input type="text" id="username" name="username" class="input" />
<div class="message grey">Choose Username</div>
<p>Your public profle will be http://www.site.com/CHOSENUSERNAME</p>
<label for="email"><span>Your Email</span>
<input type="text" id="email" name="email" class="input" />
<input type="submit" value="REGISTER" class="submit" />