jQuery实现响应HTML5表单

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
<script src="js/min/jquery.idealforms.js"></script>
<script>
 
 var options = {
 
 onFail: function() {
 alert( $myform.getInvalid().length +' invalid fields.' )
 },
 
 inputs: {
 'password': {
 filters: 'required pass',
 },
 'username': {
 filters: 'required username',
 data: {
 //ajax: { url:'validate.php' }
 }
 },
 'file': {
 filters: 'extension',
 data: { extension: ['jpg'] }
 },
 
 'comments': {
 filters: 'min max',
 data: { min: 50, max: 200 }
 },
 'states': {
 filters: 'exclude',
 data: { exclude: ['default'] },
 errors : {
 exclude: 'Select a State.'
 }
 },
 'langs[]': {
 filters: 'min max',
 data: { min: 2, max: 3 },
 errors: {
 min: 'Check at least <strong>2</strong> options.',
 max: 'No more than <strong>3</strong> options allowed.'
 }
 }
 }
 };
 
 var $myform = $('#my-form').idealforms(options).data('idealforms');
 
 $('#reset').click(function(){ $myform.reset().fresh().focusFirst() });
 $myform.focusFirst();
 
</script>