https://github.com/timmywil/requiredfields

Minimalistic form validation for everyone. No more bloated plugin code you don't need.
https://github.com/timmywil/requiredfields

Last synced: about 1 month ago
JSON representation

Minimalistic form validation for everyone. No more bloated plugin code you don't need.

• Host: GitHub
• URL: https://github.com/timmywil/requiredfields
• Owner: timmywil
• Created: 2010-09-23T17:50:52.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2010-12-03T18:06:41.000Z (about 14 years ago)
• Last Synced: 2024-10-15T00:44:51.618Z (3 months ago)
• Language: JavaScript
• Homepage: http://timmywillison.com/samples/requiredfields/
• Size: 125 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
jquery.requiredfields.js


timmy willison

*Minimalistic form validation for all browsers (IE6+, Firefox, Opera, Safari, Chrome)*


*Version: 1.1, Last updated: 12/3/2010*

Demo         - http://timmywillison.com/samples/requiredfields/


GitHub       - http://github.com/timmywil/requiredfields


Source       - http://github.com/timmywil/requiredfields/raw/master/jquery.requiredfields.js (4.4kb)


(Minified)   - http://github.com/timmywil/requiredfields/raw/master/jquery.requiredfields.min.js (1.3kb)

License

Copyright (c) 2010 timmy willison


Dual licensed under the MIT and GPL licenses.


http://timmywillison.com/licence/

Support and Testing

Versions of jQuery and browsers this was tested on.

jQuery Versions - 1.3.0-1.4.4


Browsers Tested - Internet Explorer 6-8, Firefox 2-3.7, Safari 3-5, 


Chrome 4-7, Opera 9.6-10.5.

Release History

1.1   - (12/3/2010) Important update to email validation regex (wasn't anchored)


1.0   - (9/30/2010) Add individual field validation


0.9   - (9/23/2010) Initial release

PURPOSE OF THIS VALIDATION PLUGIN


To provide the most often needed requirements for client-side validation without getting bogged down in a ton of useful, but often unnecessary, form validation like the most popular plugins. At least for me, I like download sizes to be small.  If I don't use it, I don't want it.  I can handle what stuff looks like when they're invalid.  I can add my own error messages with less code than a plugin can do it for me and I bet you can too.  Nothing ever looks the same on two different sites anyway.  So which code do I actually use consistently?  Well, this.

VALIDATION USAGE


Initialize:


$('form').validate();



validate() applies a pre-made submit function to the selected form(s).


It runs checkForm() and stops submit if the form is invalid.


You may also use checkForm() in your own submit function instead. Like so:



  $('form').submit(function () {

      if ( !$(this).checkForm() ) {

          // The form is invalid

          // Invalid classes have been added to invalid fields

          // You can add error messages to the DOM, alerts, anything you want

          return false;

      }

      

      // If we're past the if statement, the form is valid and 

      // we can let the submit go through so we don't do anything

  });



checkForm() takes at most 1 form and returns a *boolean* indicating whether the form is valid.


It is the same function that applies the invalid classes to invalid fields.

Write your own css for .invalid inputs:


.invalid {

    color: red !important;

}



Add class 'reqd' to required text and select fields:


<input type="text" class="reqd"/>

<select class="reqd">

  <option value="">Pick Something</option>

  <option value="Barn">Yard</option>

</select>



Add class 'reqd-email' to required e-mail fields:


<input type="text" class="reqd-email"/>

<input type="email" class="reqd-email"/>



Summary

All this plugin does is add a class of 'invalid' to all required text inputs (and to labels that are placed before the inputs),


email inputs, and select fields that have not been properly filled out.


It is the responsibility of the user to make invalid states look how they should.