jq-idealforms的是一个小的框架来构建很棒响应html5表单。
特点:
充分响应
键盘支持
可自定义的输入类型选择，单选，多选和文件
表单输入提示
自定义日期选择器
在线验证validation
支持:
浏览器: ie8+, webkit, firefox, opera, ios5+, android 4.0+
jquery: 1.7+, ui 1.8+
许可证: gpl or mit
<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>
以上就是jquery实现响应html5表单的内容。