Formly. The form glamorizer for jQuery

An unbelievably easy way to add style and validation to your forms. Forms are everywhere and, usually, suck. Formly makes adding forms to your site a bit more exciting. Easily add style, validation, and a more impressive user interaction with a single function.

Download

Formly is a light little fella. 17kb in total for the full and 14kb for the minified version.

Download full Download minified GitHub

How-to use

It's really easy to get Formly working for you. jQuery is the only prerequisite so make sure you include it, along with Formly's source files, in the head section of your file.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/formly.js"></script>
<link rel="stylesheet" href="css/formly.css" type="text/css" />

Now, build your form using the same standard HTML markup you've always used.

<form id="MyForm" width="400px">
Your name: <input type="text" name="Name" />
Email address: <input type="text" name="Email" validate="email" />
Username: <input type="text" name="Username" place="No spaces" label="Username" require="true" />
Password: <input type="password" name="Password" label="Password" require="true" />
<input type="submit" value="Sign up" /><input type="reset" value="Clear" />
</form>

Your name:
Email address:
Username:
Password:

Okay, now that we've built the form and have added a few commands, it's time to let Formly work it's magic.

<script>
$(document).ready(function() { $('#MyForm').formly(); }); </script>

Your name:
Email address:
Username:
Password:

Now that we've got the hang of it, let's stretch Formly's muscles a bit.

<form id="BetaSignup" width="200px" title="Sign up" subtitle="for exclusive beta access">
<input type="text" name="Name" place="Your name" />
<input type="text" name="Email" validate="email" place="Email address" />
<input type="text" name="Username" place="Choose a username" require="true" label="Username" pre-fix="@" />
<input type="password" name="Password" require="true" label="Password" place="Password" />
<input type="password" name="PasswordMatch" match="Password" label="Password" place="Re-type password" />
<input type="submit" value="Sign up" /><input type="reset" value="Clear" />
</form>
<script>
$(document).ready(function() { 

	$('#BetaSignup').formly({'onBlur':false, 'theme':'Light'}); });
</script>

Notice that a "validate" command does not need a "require" tag as well. This is because validation requires the correct data to by inputted by the user. We're also using the "match" command, which cannot simply be true. It must specify the name of which input it is to match. Finally, take note that the placeholders we specified for the password fields are showing in plain text. We aren't changing the type of the input, but simply adding a new text input that will show the placeholder text then hide itself on focus.







Alright, now we're having fun. Let's add some more options in a more complex form and see how well Formly does.

<form id="ContactInfo" width="600px" title="Member sign up">
<input type="text" name="first_name" place="Your first name" size="30" /> 
<input type="text" name="last_name" place="Your last name" size="30" style="margin-left:10px;" />
<input type="text" name="email" validate="email" place="Email address" size="30" />
<input type="text" name="website" place="Your website" size="30" pre-fix="http://" validate="http" style="margin-left:10px;" />
<select id="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<input type="radio" name="membership" value="new" style="margin-left:10px;" /> New member
<input type="radio" name="membership" value="existing" /> Existing member

<input type="password" name="pword" require="true" label="Password" place="Password" />
<input type="password" name="pwordm" match="pword" label="Password" place="Re-type password" />
<input type="checkbox" name="agree" require="true" label="Terms" value="agree" /> I agree to the terms
<input type="submit" value="Sign up" /><input type="reset" value="Clear" />
</form>
<script>
$(document).ready(function() { 

	$('#ContactInfo').formly({'theme':'Dark'}, function(e) { 
		
		$('.callback').html(e); 
	});
});
</script>




New member Existing member

I agree to the terms

This time, we setup a callback function which will give us the data in URL format. This is not the safest method of transferring user data and should not be used with secure information. Also, you can easily change the callback method to .serializeArray() to receive the data in JSON.

Returned:

Documentation

Formly scans your form's input elements, looking for commands. Here is a quick reference of all commands that Formly will understand and implement.

label : (string) useful for notifications
place : (string) place holder
pre-fix : (string) pretty self-explanatory
require : (true or false) force user input
match : (string) name of input that it must match
validate : (string) 'email' or 'http'

In closing

Forms are touchy and can be taken in numerous different directions. If Formly doesn't have exactly what you need or doesn't work exactly how you'd like, I'm sorry. Let me know what improvements can/need to be made and I will do my best to implement them. As always, be careful with your user's data and enjoy!

License

Licensed under the MIT License

Please note that this is an outdated library and may not function as it once did. Please use at your own risk and know that I will do my best to release an updated version of this in the near future.