界面框架初步提交
This commit is contained in:
chiguangxu
@@ -0,0 +1,41 @@
|
||||
[jQuery Validation Plugin](http://bassistance.de/jquery-plugins/jquery-plugin-validation/) - Form validation made easy
|
||||
================================
|
||||
|
||||
[](http://travis-ci.org/jzaefferer/jquery-validation)
|
||||
|
||||
The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.
|
||||
|
||||
## [Help the project](http://pledgie.com/campaigns/18159)
|
||||
|
||||
[](http://pledgie.com/campaigns/18159)
|
||||
|
||||
This project is looking for help! [You can donate to the ongoing pledgie campaign](http://pledgie.com/campaigns/18159)
|
||||
and help spread the word. If you've used the plugin, or plan to use, consider a donation - any amount will help.
|
||||
|
||||
You can find the plan for how to spend the money on the [pledgie page](http://pledgie.com/campaigns/18159).
|
||||
|
||||
## Getting Started
|
||||
|
||||
Include jQuery and the plugin on a page. Then select a form to validate and call the `validate` method.
|
||||
|
||||
```html
|
||||
<form>
|
||||
<input required>
|
||||
</form>
|
||||
<script src="jquery.js"></script>
|
||||
<script src="jquery.validation.js"></script>
|
||||
<script>
|
||||
$("form").validate();
|
||||
</script>
|
||||
```
|
||||
|
||||
For more information on how to setup a rules and customizations, [check the documentation](http://docs.jquery.com/Plugins/Validation).
|
||||
|
||||
## Contributing
|
||||
Follow the [jQuery style guide](http://contribute.jquery.com/style-guides/js), even if existing code doesn't. Add unit tests for any new or changed functionality. Lint and test your code using [grunt](https://github.com/gruntjs/grunt/).
|
||||
|
||||
If you've wrote custom methods that you'd like to contribute to additional-methods.js, create a branch, add the method there and send a pull request for that branch.
|
||||
|
||||
## License
|
||||
Copyright (c) 2013 Jörn Zaefferer
|
||||
Licensed under the MIT license.
|
||||
@@ -0,0 +1,444 @@
|
||||
/*! jQuery Validation Plugin - v1.11.0 - 2/4/2013
|
||||
* https://github.com/jzaefferer/jquery-validation
|
||||
* Copyright (c) 2013 Jörn Zaefferer; Licensed MIT */
|
||||
|
||||
/*!
|
||||
* jQuery Validation Plugin 1.11.0
|
||||
*
|
||||
* http://bassistance.de/jquery-plugins/jquery-plugin-validation/
|
||||
* http://docs.jquery.com/Plugins/Validation
|
||||
*
|
||||
* Copyright 2013 Jörn Zaefferer
|
||||
* Released under the MIT license:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
||||
function stripHtml(value) {
|
||||
// remove html tags and space chars
|
||||
return value.replace(/<.[^<>]*?>/g, ' ').replace(/ | /gi, ' ')
|
||||
// remove punctuation
|
||||
.replace(/[.(),;:!?%#$'"_+=\/\-]*/g,'');
|
||||
}
|
||||
jQuery.validator.addMethod("maxWords", function(value, element, params) {
|
||||
return this.optional(element) || stripHtml(value).match(/\b\w+\b/g).length <= params;
|
||||
}, jQuery.validator.format("Please enter {0} words or less."));
|
||||
|
||||
jQuery.validator.addMethod("minWords", function(value, element, params) {
|
||||
return this.optional(element) || stripHtml(value).match(/\b\w+\b/g).length >= params;
|
||||
}, jQuery.validator.format("Please enter at least {0} words."));
|
||||
|
||||
jQuery.validator.addMethod("rangeWords", function(value, element, params) {
|
||||
var valueStripped = stripHtml(value);
|
||||
var regex = /\b\w+\b/g;
|
||||
return this.optional(element) || valueStripped.match(regex).length >= params[0] && valueStripped.match(regex).length <= params[1];
|
||||
}, jQuery.validator.format("Please enter between {0} and {1} words."));
|
||||
|
||||
}());
|
||||
|
||||
jQuery.validator.addMethod("letterswithbasicpunc", function(value, element) {
|
||||
return this.optional(element) || /^[a-z\-.,()'"\s]+$/i.test(value);
|
||||
}, "Letters or punctuation only please");
|
||||
|
||||
jQuery.validator.addMethod("alphanumeric", function(value, element) {
|
||||
return this.optional(element) || /^\w+$/i.test(value);
|
||||
}, "Letters, numbers, and underscores only please");
|
||||
|
||||
jQuery.validator.addMethod("lettersonly", function(value, element) {
|
||||
return this.optional(element) || /^[a-z]+$/i.test(value);
|
||||
}, "Letters only please");
|
||||
|
||||
jQuery.validator.addMethod("nowhitespace", function(value, element) {
|
||||
return this.optional(element) || /^\S+$/i.test(value);
|
||||
}, "No white space please");
|
||||
|
||||
jQuery.validator.addMethod("ziprange", function(value, element) {
|
||||
return this.optional(element) || /^90[2-5]\d\{2\}-\d{4}$/.test(value);
|
||||
}, "Your ZIP-code must be in the range 902xx-xxxx to 905-xx-xxxx");
|
||||
|
||||
jQuery.validator.addMethod("zipcodeUS", function(value, element) {
|
||||
return this.optional(element) || /\d{5}-\d{4}$|^\d{5}$/.test(value);
|
||||
}, "The specified US ZIP Code is invalid");
|
||||
|
||||
jQuery.validator.addMethod("integer", function(value, element) {
|
||||
return this.optional(element) || /^-?\d+$/.test(value);
|
||||
}, "A positive or negative non-decimal number please");
|
||||
|
||||
/**
|
||||
* Return true, if the value is a valid vehicle identification number (VIN).
|
||||
*
|
||||
* Works with all kind of text inputs.
|
||||
*
|
||||
* @example <input type="text" size="20" name="VehicleID" class="{required:true,vinUS:true}" />
|
||||
* @desc Declares a required input element whose value must be a valid vehicle identification number.
|
||||
*
|
||||
* @name jQuery.validator.methods.vinUS
|
||||
* @type Boolean
|
||||
* @cat Plugins/Validate/Methods
|
||||
*/
|
||||
jQuery.validator.addMethod("vinUS", function(v) {
|
||||
if (v.length !== 17) {
|
||||
return false;
|
||||
}
|
||||
var i, n, d, f, cd, cdv;
|
||||
var LL = ["A","B","C","D","E","F","G","H","J","K","L","M","N","P","R","S","T","U","V","W","X","Y","Z"];
|
||||
var VL = [1,2,3,4,5,6,7,8,1,2,3,4,5,7,9,2,3,4,5,6,7,8,9];
|
||||
var FL = [8,7,6,5,4,3,2,10,0,9,8,7,6,5,4,3,2];
|
||||
var rs = 0;
|
||||
for(i = 0; i < 17; i++){
|
||||
f = FL[i];
|
||||
d = v.slice(i,i+1);
|
||||
if (i === 8) {
|
||||
cdv = d;
|
||||
}
|
||||
if (!isNaN(d)) {
|
||||
d *= f;
|
||||
} else {
|
||||
for (n = 0; n < LL.length; n++) {
|
||||
if (d.toUpperCase() === LL[n]) {
|
||||
d = VL[n];
|
||||
d *= f;
|
||||
if (isNaN(cdv) && n === 8) {
|
||||
cdv = LL[n];
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
rs += d;
|
||||
}
|
||||
cd = rs % 11;
|
||||
if (cd === 10) {
|
||||
cd = "X";
|
||||
}
|
||||
if (cd === cdv) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}, "The specified vehicle identification number (VIN) is invalid.");
|
||||
|
||||
/**
|
||||
* Return true, if the value is a valid date, also making this formal check dd/mm/yyyy.
|
||||
*
|
||||
* @example jQuery.validator.methods.date("01/01/1900")
|
||||
* @result true
|
||||
*
|
||||
* @example jQuery.validator.methods.date("01/13/1990")
|
||||
* @result false
|
||||
*
|
||||
* @example jQuery.validator.methods.date("01.01.1900")
|
||||
* @result false
|
||||
*
|
||||
* @example <input name="pippo" class="{dateITA:true}" />
|
||||
* @desc Declares an optional input element whose value must be a valid date.
|
||||
*
|
||||
* @name jQuery.validator.methods.dateITA
|
||||
* @type Boolean
|
||||
* @cat Plugins/Validate/Methods
|
||||
*/
|
||||
jQuery.validator.addMethod("dateITA", function(value, element) {
|
||||
var check = false;
|
||||
var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
|
||||
if( re.test(value)) {
|
||||
var adata = value.split('/');
|
||||
var gg = parseInt(adata[0],10);
|
||||
var mm = parseInt(adata[1],10);
|
||||
var aaaa = parseInt(adata[2],10);
|
||||
var xdata = new Date(aaaa,mm-1,gg);
|
||||
if ( ( xdata.getFullYear() === aaaa ) && ( xdata.getMonth() === mm - 1 ) && ( xdata.getDate() === gg ) ){
|
||||
check = true;
|
||||
} else {
|
||||
check = false;
|
||||
}
|
||||
} else {
|
||||
check = false;
|
||||
}
|
||||
return this.optional(element) || check;
|
||||
}, "Please enter a correct date");
|
||||
|
||||
jQuery.validator.addMethod("dateNL", function(value, element) {
|
||||
return this.optional(element) || /^(0?[1-9]|[12]\d|3[01])[\.\/\-](0?[1-9]|1[012])[\.\/\-]([12]\d)?(\d\d)$/.test(value);
|
||||
}, "Vul hier een geldige datum in.");
|
||||
|
||||
jQuery.validator.addMethod("time", function(value, element) {
|
||||
return this.optional(element) || /^([01]\d|2[0-3])(:[0-5]\d){1,2}$/.test(value);
|
||||
}, "Please enter a valid time, between 00:00 and 23:59");
|
||||
jQuery.validator.addMethod("time12h", function(value, element) {
|
||||
return this.optional(element) || /^((0?[1-9]|1[012])(:[0-5]\d){1,2}( ?[AP]M))$/i.test(value);
|
||||
}, "Please enter a valid time in 12-hour format");
|
||||
|
||||
/**
|
||||
* matches US phone number format
|
||||
*
|
||||
* where the area code may not start with 1 and the prefix may not start with 1
|
||||
* allows '-' or ' ' as a separator and allows parens around area code
|
||||
* some people may want to put a '1' in front of their number
|
||||
*
|
||||
* 1(212)-999-2345 or
|
||||
* 212 999 2344 or
|
||||
* 212-999-0983
|
||||
*
|
||||
* but not
|
||||
* 111-123-5434
|
||||
* and not
|
||||
* 212 123 4567
|
||||
*/
|
||||
jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
|
||||
phone_number = phone_number.replace(/\s+/g, "");
|
||||
return this.optional(element) || phone_number.length > 9 &&
|
||||
phone_number.match(/^(\+?1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
|
||||
}, "Please specify a valid phone number");
|
||||
|
||||
jQuery.validator.addMethod('phoneUK', function(phone_number, element) {
|
||||
phone_number = phone_number.replace(/\(|\)|\s+|-/g,'');
|
||||
return this.optional(element) || phone_number.length > 9 &&
|
||||
phone_number.match(/^(?:(?:(?:00\s?|\+)44\s?)|(?:\(?0))(?:(?:\d{5}\)?\s?\d{4,5})|(?:\d{4}\)?\s?(?:\d{5}|\d{3}\s?\d{3}))|(?:\d{3}\)?\s?\d{3}\s?\d{3,4})|(?:\d{2}\)?\s?\d{4}\s?\d{4}))$/);
|
||||
}, 'Please specify a valid phone number');
|
||||
|
||||
jQuery.validator.addMethod('mobileUK', function(phone_number, element) {
|
||||
phone_number = phone_number.replace(/\s+|-/g,'');
|
||||
return this.optional(element) || phone_number.length > 9 &&
|
||||
phone_number.match(/^(?:(?:(?:00\s?|\+)44\s?|0)7(?:[45789]\d{2}|624)\s?\d{3}\s?\d{3})$/);
|
||||
}, 'Please specify a valid mobile number');
|
||||
|
||||
//Matches UK landline + mobile, accepting only 01-3 for landline or 07 for mobile to exclude many premium numbers
|
||||
jQuery.validator.addMethod('phonesUK', function(phone_number, element) {
|
||||
phone_number = phone_number.replace(/\s+|-/g,'');
|
||||
return this.optional(element) || phone_number.length > 9 &&
|
||||
phone_number.match(/^(?:(?:(?:00\s?|\+)44\s?|0)(?:1\d{8,9}|[23]\d{9}|7(?:[45789]\d{8}|624\d{6})))$/);
|
||||
}, 'Please specify a valid uk phone number');
|
||||
// On the above three UK functions, do the following server side processing:
|
||||
// Compare with ^((?:00\s?|\+)(44)\s?)?\(?0?(?:\)\s?)?([1-9]\d{1,4}\)?[\d\s]+)
|
||||
// Extract $2 and set $prefix to '+44<space>' if $2 is '44' otherwise set $prefix to '0'
|
||||
// Extract $3 and remove spaces and parentheses. Phone number is combined $2 and $3.
|
||||
// A number of very detailed GB telephone number RegEx patterns can also be found at:
|
||||
// http://www.aa-asterisk.org.uk/index.php/Regular_Expressions_for_Validating_and_Formatting_UK_Telephone_Numbers
|
||||
|
||||
//Matches UK postcode. based on http://snipplr.com/view/3152/postcode-validation/
|
||||
jQuery.validator.addMethod('postcodeUK', function(postcode, element) {
|
||||
postcode = (postcode.toUpperCase()).replace(/\s+/g,'');
|
||||
return this.optional(element) || postcode.match(/^([^QZ][^IJZ]{0,1}\d{1,2})(\d[^CIKMOV]{2})$/) || postcode.match(/^([^QV]\d[ABCDEFGHJKSTUW])(\d[^CIKMOV]{2})$/) || postcode.match(/^([^QV][^IJZ]\d[ABEHMNPRVWXY])(\d[^CIKMOV]{2})$/) || postcode.match(/^(GIR)(0AA)$/) || postcode.match(/^(BFPO)(\d{1,4})$/) || postcode.match(/^(BFPO)(C\/O\d{1,3})$/);
|
||||
}, 'Please specify a valid postcode');
|
||||
|
||||
// TODO check if value starts with <, otherwise don't try stripping anything
|
||||
jQuery.validator.addMethod("strippedminlength", function(value, element, param) {
|
||||
return jQuery(value).text().length >= param;
|
||||
}, jQuery.validator.format("Please enter at least {0} characters"));
|
||||
|
||||
// same as email, but TLD is optional
|
||||
jQuery.validator.addMethod("email2", function(value, element, param) {
|
||||
return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)*(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(value);
|
||||
}, jQuery.validator.messages.email);
|
||||
|
||||
// same as url, but TLD is optional
|
||||
jQuery.validator.addMethod("url2", function(value, element, param) {
|
||||
return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)*(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
|
||||
}, jQuery.validator.messages.url);
|
||||
|
||||
// NOTICE: Modified version of Castle.Components.Validator.CreditCardValidator
|
||||
// Redistributed under the the Apache License 2.0 at http://www.apache.org/licenses/LICENSE-2.0
|
||||
// Valid Types: mastercard, visa, amex, dinersclub, enroute, discover, jcb, unknown, all (overrides all other settings)
|
||||
jQuery.validator.addMethod("creditcardtypes", function(value, element, param) {
|
||||
if (/[^0-9\-]+/.test(value)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
value = value.replace(/\D/g, "");
|
||||
|
||||
var validTypes = 0x0000;
|
||||
|
||||
if (param.mastercard) {
|
||||
validTypes |= 0x0001;
|
||||
}
|
||||
if (param.visa) {
|
||||
validTypes |= 0x0002;
|
||||
}
|
||||
if (param.amex) {
|
||||
validTypes |= 0x0004;
|
||||
}
|
||||
if (param.dinersclub) {
|
||||
validTypes |= 0x0008;
|
||||
}
|
||||
if (param.enroute) {
|
||||
validTypes |= 0x0010;
|
||||
}
|
||||
if (param.discover) {
|
||||
validTypes |= 0x0020;
|
||||
}
|
||||
if (param.jcb) {
|
||||
validTypes |= 0x0040;
|
||||
}
|
||||
if (param.unknown) {
|
||||
validTypes |= 0x0080;
|
||||
}
|
||||
if (param.all) {
|
||||
validTypes = 0x0001 | 0x0002 | 0x0004 | 0x0008 | 0x0010 | 0x0020 | 0x0040 | 0x0080;
|
||||
}
|
||||
if (validTypes & 0x0001 && /^(5[12345])/.test(value)) { //mastercard
|
||||
return value.length === 16;
|
||||
}
|
||||
if (validTypes & 0x0002 && /^(4)/.test(value)) { //visa
|
||||
return value.length === 16;
|
||||
}
|
||||
if (validTypes & 0x0004 && /^(3[47])/.test(value)) { //amex
|
||||
return value.length === 15;
|
||||
}
|
||||
if (validTypes & 0x0008 && /^(3(0[012345]|[68]))/.test(value)) { //dinersclub
|
||||
return value.length === 14;
|
||||
}
|
||||
if (validTypes & 0x0010 && /^(2(014|149))/.test(value)) { //enroute
|
||||
return value.length === 15;
|
||||
}
|
||||
if (validTypes & 0x0020 && /^(6011)/.test(value)) { //discover
|
||||
return value.length === 16;
|
||||
}
|
||||
if (validTypes & 0x0040 && /^(3)/.test(value)) { //jcb
|
||||
return value.length === 16;
|
||||
}
|
||||
if (validTypes & 0x0040 && /^(2131|1800)/.test(value)) { //jcb
|
||||
return value.length === 15;
|
||||
}
|
||||
if (validTypes & 0x0080) { //unknown
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}, "Please enter a valid credit card number.");
|
||||
|
||||
jQuery.validator.addMethod("ipv4", function(value, element, param) {
|
||||
return this.optional(element) || /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/i.test(value);
|
||||
}, "Please enter a valid IP v4 address.");
|
||||
|
||||
jQuery.validator.addMethod("ipv6", function(value, element, param) {
|
||||
return this.optional(element) || /^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))$/i.test(value);
|
||||
}, "Please enter a valid IP v6 address.");
|
||||
|
||||
/**
|
||||
* Return true if the field value matches the given format RegExp
|
||||
*
|
||||
* @example jQuery.validator.methods.pattern("AR1004",element,/^AR\d{4}$/)
|
||||
* @result true
|
||||
*
|
||||
* @example jQuery.validator.methods.pattern("BR1004",element,/^AR\d{4}$/)
|
||||
* @result false
|
||||
*
|
||||
* @name jQuery.validator.methods.pattern
|
||||
* @type Boolean
|
||||
* @cat Plugins/Validate/Methods
|
||||
*/
|
||||
jQuery.validator.addMethod("pattern", function(value, element, param) {
|
||||
if (this.optional(element)) {
|
||||
return true;
|
||||
}
|
||||
if (typeof param === 'string') {
|
||||
param = new RegExp('^(?:' + param + ')$');
|
||||
}
|
||||
return param.test(value);
|
||||
}, "Invalid format.");
|
||||
|
||||
|
||||
/*
|
||||
* Lets you say "at least X inputs that match selector Y must be filled."
|
||||
*
|
||||
* The end result is that neither of these inputs:
|
||||
*
|
||||
* <input class="productinfo" name="partnumber">
|
||||
* <input class="productinfo" name="description">
|
||||
*
|
||||
* ...will validate unless at least one of them is filled.
|
||||
*
|
||||
* partnumber: {require_from_group: [1,".productinfo"]},
|
||||
* description: {require_from_group: [1,".productinfo"]}
|
||||
*
|
||||
*/
|
||||
jQuery.validator.addMethod("require_from_group", function(value, element, options) {
|
||||
var validator = this;
|
||||
var selector = options[1];
|
||||
var validOrNot = $(selector, element.form).filter(function() {
|
||||
return validator.elementValue(this);
|
||||
}).length >= options[0];
|
||||
|
||||
if(!$(element).data('being_validated')) {
|
||||
var fields = $(selector, element.form);
|
||||
fields.data('being_validated', true);
|
||||
fields.valid();
|
||||
fields.data('being_validated', false);
|
||||
}
|
||||
return validOrNot;
|
||||
}, jQuery.format("Please fill at least {0} of these fields."));
|
||||
|
||||
/*
|
||||
* Lets you say "either at least X inputs that match selector Y must be filled,
|
||||
* OR they must all be skipped (left blank)."
|
||||
*
|
||||
* The end result, is that none of these inputs:
|
||||
*
|
||||
* <input class="productinfo" name="partnumber">
|
||||
* <input class="productinfo" name="description">
|
||||
* <input class="productinfo" name="color">
|
||||
*
|
||||
* ...will validate unless either at least two of them are filled,
|
||||
* OR none of them are.
|
||||
*
|
||||
* partnumber: {skip_or_fill_minimum: [2,".productinfo"]},
|
||||
* description: {skip_or_fill_minimum: [2,".productinfo"]},
|
||||
* color: {skip_or_fill_minimum: [2,".productinfo"]}
|
||||
*
|
||||
*/
|
||||
jQuery.validator.addMethod("skip_or_fill_minimum", function(value, element, options) {
|
||||
var validator = this;
|
||||
var numberRequired = options[0];
|
||||
var selector = options[1];
|
||||
var numberFilled = $(selector, element.form).filter(function() {
|
||||
return validator.elementValue(this);
|
||||
}).length;
|
||||
var valid = numberFilled >= numberRequired || numberFilled === 0;
|
||||
|
||||
if(!$(element).data('being_validated')) {
|
||||
var fields = $(selector, element.form);
|
||||
fields.data('being_validated', true);
|
||||
fields.valid();
|
||||
fields.data('being_validated', false);
|
||||
}
|
||||
return valid;
|
||||
}, jQuery.format("Please either skip these fields or fill at least {0} of them."));
|
||||
|
||||
// Accept a value from a file input based on a required mimetype
|
||||
jQuery.validator.addMethod("accept", function(value, element, param) {
|
||||
// Split mime on commas in case we have multiple types we can accept
|
||||
var typeParam = typeof param === "string" ? param.replace(/\s/g, '').replace(/,/g, '|') : "image/*",
|
||||
optionalValue = this.optional(element),
|
||||
i, file;
|
||||
|
||||
// Element is optional
|
||||
if (optionalValue) {
|
||||
return optionalValue;
|
||||
}
|
||||
|
||||
if ($(element).attr("type") === "file") {
|
||||
// If we are using a wildcard, make it regex friendly
|
||||
typeParam = typeParam.replace(/\*/g, ".*");
|
||||
|
||||
// Check if the element has a FileList before checking each file
|
||||
if (element.files && element.files.length) {
|
||||
for (i = 0; i < element.files.length; i++) {
|
||||
file = element.files[i];
|
||||
|
||||
// Grab the mimtype from the loaded file, verify it matches
|
||||
if (!file.type.match(new RegExp( ".?(" + typeParam + ")$", "i"))) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Either return true because we've validated each file, or because the
|
||||
// browser does not support element.files and the FileList feature
|
||||
return true;
|
||||
}, jQuery.format("Please enter a value with a valid mimetype."));
|
||||
|
||||
// Older "accept" file extension method. Old docs: http://docs.jquery.com/Plugins/Validation/Methods/accept
|
||||
jQuery.validator.addMethod("extension", function(value, element, param) {
|
||||
param = typeof param === "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
|
||||
return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
|
||||
}, jQuery.format("Please enter a value with a valid extension."));
|
||||
4
src/main/webapp/static/global/plugins/jquery-validation/1.11.0/additional-methods.min.js
vendored
Normal file
4
src/main/webapp/static/global/plugins/jquery-validation/1.11.0/additional-methods.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,361 @@
|
||||
|
||||
1.11.0 / 2013-02-04
|
||||
==================
|
||||
|
||||
* Remove clearing as numbers of `min`, `max` and `range` rules. Fixes #455. Closes gh-528.
|
||||
* Update pre-existing labels - fixes #430 closes gh-436
|
||||
* Fix $.validator.format to avoid group interpolation, where at least IE8/9 replaces -bash with the match. Fixes #614
|
||||
* Fix mimetype regex
|
||||
* Add plugin manifest and update headers to just MIT license, drop unnecessary dual-licensing (like jQuery).
|
||||
* Hebrew messages: Removed dots at end of sentences - Fixes gh-568
|
||||
* French translation for require_from_group validation. Fixes gh-573.
|
||||
* Allow groups to be an array or a string - Fixes #479
|
||||
* Removed spaces with multiple MIME types
|
||||
* Fix some date validations, JS syntax errors.
|
||||
* Remove support for metadata plugin, replace with data-rule- and data-msg- (added in 907467e8) properties.
|
||||
* Added sftp as a valid url-pattern
|
||||
* Add Malay (my) localization
|
||||
* Update localization/messages_hu.js
|
||||
* Remove focusin/focusout polyfill. Fixes #542 - Inclusion of jquery.validate interfers with focusin and focusout events in IE9
|
||||
* Localization: Fixed typo in finnish translation
|
||||
* Fix RTM demo to show invalid icon when going from valid back to invalid
|
||||
* Fixed premature return in remote function which prevented ajax call from being made in case an input was entered too quickly. Ensures remote validation always validates the newest value.
|
||||
* Undo fix for #244. Fixes #521 - E-mail validation fires immediately when text is in the field.
|
||||
|
||||
1.10.0 / 2012-09-07
|
||||
===================
|
||||
|
||||
* Corrected French strings for nowhitespace, phoneUS, phoneUK and mobileUK based upon community feedback.
|
||||
* rename files for language_REGION according to the standard ISO_3166-1 (http://en.wikipedia.org/wiki/ISO_3166-1), for Taiwan tha language is Chinese (zh) and the region is Taiwan (TW)
|
||||
* Optimise RegEx patterns, especially for UK phone numbers.
|
||||
* Add Language Name for each file, rename the language code according to the standard ISO 639 for Estonian, Georgian, Ukrainian and Chinese (http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes)
|
||||
* Added croatian (HR) localization
|
||||
* Existing French translations were edited and French translations for the additional methods were added.
|
||||
* Merged in changes for specifying custom error messages in data attributes
|
||||
* Updated UK Mobile phone number regex for new numbers. Fixes #154
|
||||
* Add element to success call with test. Fixes #60
|
||||
* Fixed regex for time additional method. Fixes #131
|
||||
* resetForm now clears old previousValue on form elements. Fixes #312
|
||||
* Added checkbox test to require_from_group and changed require_from_group to use elementValue. Fixes #359
|
||||
* Fixed dataFilter response issues in jQuery 1.5.2+. Fixes #405
|
||||
* Added jQuery Mobile demo. Fixes #249
|
||||
* Deoptimize findByName for correctness. Fixes #82 - $.validator.prototype.findByName breaks in IE7
|
||||
* Added US zip code support and test. Fixes #90
|
||||
* Changed lastElement to lastActive in keyup, skip validation on tab or empty element. Fixes #244
|
||||
* Removed number stripping from stripHtml. Fixes #2
|
||||
* Fixed invalid count on invalid to valid remote validation. Fixes #286
|
||||
* Add link to file_input to demo index
|
||||
* Moved old accept method to extension additional-method, added new accept method to handle standard browser mimetype filtering. Fixes #287 and supersedes #369
|
||||
* Disables blur event when onfocusout is set to false. Test added.
|
||||
* Fixed value issue for radio buttons and checkboxes. Fixes #363
|
||||
* Added test for rangeWords and fixed regex and bounds in method. Fixes #308
|
||||
* Fixed TinyMCE Demo and added link on demo page. Fixes #382
|
||||
* Changed localization message for min/max. Fixes #273
|
||||
* Added pseudo selector for text input types to fix issue with default empty type attribute. Added tests and some test markup. Fixes #217
|
||||
* Fixed delegate bug for dynamic-totals demo. Fixes #51
|
||||
* Fix incorrect message for alphanumeric validator
|
||||
* Removed incorrect false check on required attribute
|
||||
* required attribute fix for non-html5 browsers. Fixes #301
|
||||
* Added methods "require_from_group" and "skip_or_fill_minimum"
|
||||
* Use correct iso code for swedish
|
||||
* Updated demo HTML files to use HTML5 doctype
|
||||
* Fixed regex issue for decimals without leading zeroes. Added new methods test. Fixes #41
|
||||
* Introduce a elementValue method that normalizes only string values (don't touch array value of multi-select). Fixes #116
|
||||
* Support for dynamically added submit buttons, and updated test case. Uses validateDelegate. Code from PR #9
|
||||
* Fix bad double quote in test fixtures
|
||||
* Fix maxWords method to include the upper bound, not exclude it. Fixes #284
|
||||
* Fixed grammar error in german range validator message. Fixes #315
|
||||
* Fixed handling of multiple class names for errorClass option. Test by Max Lynch. Fixes #280
|
||||
* Fix jQuery.format usage, should be $.validator.format. Fixes #329
|
||||
* Methods for 'all' UK phone numbers + UK postcodes
|
||||
* Pattern method: Convert string param to RegExp. Fixes issue #223
|
||||
* grammar error in german localization file
|
||||
* Added Estonian localization for messages
|
||||
* Improve tooltip handling on themerollered demo
|
||||
* Add type="text" to input fields without type attribute to please qSA
|
||||
* Update themerollered demo to use tooltip to show errors as overlay.
|
||||
* Update themerollered demo to use latest jQuery UI (along with newer jQuery version). Move code around to speed up page load.
|
||||
* Fixed min error message broken in Japanese.
|
||||
* Update form plugin to latest version. Enhance the ajaxSubmit demo.
|
||||
* Drop dateDE and numberDE methods from classRuleSettings, leftover from moving those to localized methods
|
||||
* Passing submit event to submitHandler callback
|
||||
* Fixed #219 - Fix valid() on elements with dependency-callback or dependency-expression.
|
||||
* Improve build to remove dist dir to ensure only the current release gets zipped up
|
||||
|
||||
1.9.0
|
||||
---
|
||||
* Added Basque (EU) localization
|
||||
* Added Slovenian (SL) localization
|
||||
* Fixed issue #127 - Finnish translations has one : instead of ;
|
||||
* Fixed Russian localization, minor syntax issue
|
||||
* Added in support for HTML5 input types, fixes #97
|
||||
* Improved HTML5 support by setting novalidate attribute on the form, and reading the type attribute.
|
||||
* Fixed showLabel() removing all classes from error element. Remove only settings.validClass. Fixes #151.
|
||||
* Added 'pattern' to additional-methods to validate against arbitraty regular expressions.
|
||||
* Improved email method to not allow the dot at the end (valid by RFC, but unwanted here). Fixes #143
|
||||
* Fixed swedish and norwedian translations, min/max messages got switched. Fixes #181
|
||||
* Fixed #184 - resetForm: should unset lastElement
|
||||
* Fixed #71 - improve existing time method and add time12h method for 12h am/pm time format
|
||||
* Fixed #177 - Fix validation of a single radio or checkbox input
|
||||
* Fixed #189 - :hidden elements are now ignored by default
|
||||
* Fixed #194 - Required as attribute fails if jQuery>=1.6 - Use .prop instead of .attr
|
||||
* Fixed #47, #39, #32 - Allowed credit card numbers to contain spaces as well as dashes (spaces are commonly input by users).
|
||||
|
||||
1.8.1
|
||||
---
|
||||
* Added Thai (TH) localization, fixes #85
|
||||
* Added Vietnamese (VI) localization, thanks Ngoc
|
||||
* Fixed issue #78. Error/Valid styling applies to all radio buttons of same group for required validation.
|
||||
* Don't use form.elements as that isn't supported in jQuery 1.6 anymore. Its buggy as hell anyway (IE6-8: form.elements === form).
|
||||
|
||||
1.8.0
|
||||
---
|
||||
* Improved NL localization (http://plugins.jquery.com/node/14120)
|
||||
* Added Georgian (GE) localization, thanks Avtandil Kikabidze
|
||||
* Added Serbian (SR) localization, thanks Aleksandar Milovac
|
||||
* Added ipv4 and ipv6 to additional methods, thanks Natal Ngétal
|
||||
* Added Japanese (JA) localization, thanks Bryan Meyerovich
|
||||
* Added Catalan (CA) localization, thanks Xavier de Pedro
|
||||
* Fixed missing var statements within for-in loops
|
||||
* Fix for remote validation, where a formatted message got messed up (https://github.com/jzaefferer/jquery-validation/issues/11)
|
||||
* Bugfixes for compability with jQuery 1.5.1, while maintaining backwards-compability
|
||||
|
||||
1.7
|
||||
---
|
||||
* Added Lithuanian (LT) localization
|
||||
* Added Greek (EL) localization (http://plugins.jquery.com/node/12319)
|
||||
* Added Latvian (LV) localization (http://plugins.jquery.com/node/12349)
|
||||
* Added Hebrew (HE) localization (http://plugins.jquery.com/node/12039)
|
||||
* Fixed Spanish (ES) localization (http://plugins.jquery.com/node/12696)
|
||||
* Added jQuery UI themerolled demo
|
||||
* Removed cmxform.js
|
||||
* Fixed four missing semicolons (http://plugins.jquery.com/node/12639)
|
||||
* Renamed phone-method in additional-methods.js to phoneUS
|
||||
* Added phoneUK and mobileUK methods to additional-methods.js (http://plugins.jquery.com/node/12359)
|
||||
* Deep extend options to avoid modifying multiple forms when using the rules-method on a single element (http://plugins.jquery.com/node/12411)
|
||||
* Bugfixes for compability with jQuery 1.4.2, while maintaining backwards-compability
|
||||
|
||||
1.6
|
||||
---
|
||||
* Added Arabic (AR), Portuguese (PTPT), Persian (FA), Finnish (FI) and Bulgarian (BR) localization
|
||||
* Updated Swedish (SE) localization (some missing html iso characters)
|
||||
* Fixed $.validator.addMethod to properly handle empty string vs. undefined for the message argument
|
||||
* Fixed two accidental global variables
|
||||
* Enhanced min/max/rangeWords (in additional-methods.js) to strip html before counting; good when counting words in a richtext editor
|
||||
* Added localized methods for DE, NL and PT, removing the dateDE and numberDE methods (use messages_de.js and methods_de.js with date and number methods instead)
|
||||
* Fixed remote form submit synchronization, kudos to Matas Petrikas
|
||||
* Improved interactive select validation, now validating also on click (via option or select, inconsistent across browsers); doesn't work in Safari, which doesn't trigger a click event at all on select elements; fixes http://plugins.jquery.com/node/11520
|
||||
* Updated to latest form plugin (2.36), fixing http://plugins.jquery.com/node/11487
|
||||
* Bind to blur event for equalTo target to revalidate when that target changes, fixes http://plugins.jquery.com/node/11450
|
||||
* Simplified select validation, delegating to jQuery's val() method to get the select value; should fix http://plugins.jquery.com/node/11239
|
||||
* Fixed default message for digits (http://plugins.jquery.com/node/9853)
|
||||
* Fixed issue with cached remote message (http://plugins.jquery.com/node/11029 and http://plugins.jquery.com/node/9351)
|
||||
* Fixed a missing semicolon in additional-methods.js (http://plugins.jquery.com/node/9233)
|
||||
* Added automatic detection of substitution parameters in messages, removing the need to provide format functions (http://plugins.jquery.com/node/11195)
|
||||
* Fixed an issue with :filled/:blank somewhat caused by Sizzle (http://plugins.jquery.com/node/11144)
|
||||
* Added an integer method to additional-methods.js (http://plugins.jquery.com/node/9612)
|
||||
* Fixed errorsFor method where the for-attribute contains characters that need escaping to be valid inside a selector (http://plugins.jquery.com/node/9611)
|
||||
|
||||
1.5.5
|
||||
---
|
||||
* Fix for http://plugins.jquery.com/node/8659
|
||||
* Fixed trailing comma in messages_cs.js
|
||||
|
||||
1.5.4
|
||||
---
|
||||
* Fixed remote method bug (http://plugins.jquery.com/node/8658)
|
||||
|
||||
1.5.3
|
||||
---
|
||||
* Fixed a bug related to the wrapper-option, where all ancestor-elements that matched the wrapper-option where selected (http://plugins.jquery.com/node/7624)
|
||||
* Updated multipart demo to use latest jQuery UI accordion
|
||||
* Added dateNL and time methods to additionalMethods.js
|
||||
* Added Traditional Chinese (Taiwan, tw) and Kazakhstan (KK) localization
|
||||
* Moved jQuery.format (fomerly String.format) to jQuery.validator.format, jQuery.format is deprecated and will be removed in 1.6 (see http://code.google.com/p/jquery-utils/issues/detail?id=15 for details)
|
||||
* Cleaned up messages_pl.js and messages_ptbr.js (still defined messages for max/min/rangeValue, which were removed in 1.4)
|
||||
* Fixed flawed boolean logic in valid-plugin-method for multiple elements; now all elements need to be valid for a boolean-true result (http://plugins.jquery.com/node/8481)
|
||||
* Enhancement $.validator.addMethod: An undefined third message-argument won't overwrite an existing message (http://plugins.jquery.com/node/8443)
|
||||
* Enhancement to submitHandler option: When used, click events on submit buttons are captured and the submitting button is inserted into the form before calling submitHandler, and removed afterwards; keeps submit buttons intact (http://plugins.jquery.com/node/7183#comment-3585)
|
||||
* Added option validClass, default "valid", which adds that class to all valid elements, after validation (http://dev.jquery.com/ticket/2205)
|
||||
* Added creditcardtypes method to additionalMethods.js, including tests (via http://dev.jquery.com/ticket/3635)
|
||||
* Improved remote method to allow serverside message as a string, or true for valid, or false for invalid using the clientside defined message (http://dev.jquery.com/ticket/3807)
|
||||
* Improved accept method to also accept a Drupal-style comma-seperated list of values (http://plugins.jquery.com/node/8580)
|
||||
|
||||
1.5.2
|
||||
---
|
||||
* Fixed messages in additional-methods.js for maxWords, minWords, and rangeWords to include call to $.format
|
||||
* Fixed value passed to methods to exclude carriage return (\r), same as jQuery's val() does
|
||||
* Added slovak (sk) localization
|
||||
* Added demo for intergration with jQuery UI tabs
|
||||
* Added selects-grouping example to tabs demo (see second tab, birthdate field)
|
||||
|
||||
1.5.1
|
||||
---
|
||||
* Updated marketo demo to use invalidHandler option instead of binding invalid-form event
|
||||
* Added TinyMCE integration example
|
||||
* Added ukrainian (ua) localization
|
||||
* Fixed length validation to work with trimmed value (regression from 1.5 where general trimming before validation was removed)
|
||||
* Various small fixes for compability with both 1.2.6 and 1.3
|
||||
|
||||
1.5
|
||||
---
|
||||
* Improved basic demo, validating confirm-password field after password changed
|
||||
* Fixed basic validation to pass the untrimmed input value as the first parameter to validation methods, changed required accordingly; breaks existing custom method that rely on the trimming
|
||||
* Added norwegian (no), italian (it), hungarian (hu) and romanian (ro) localization
|
||||
* Fixed #3195: Two flaws in swedish localization
|
||||
* Fixed #3503: Extended rules("add") to accept messages propery: use to specify add custom messages to an element via rules("add", { messages: { required: "Required! " } });
|
||||
* Fixed #3356: Regression from #2908 when using meta-option
|
||||
* Fixed #3370: Added ignoreTitle option, set to skip reading messages from the title attribute, helps to avoid issues with Google Toolbar; default is false for compability
|
||||
* Fixed #3516: Trigger invalid-form event even when remote validation is involved
|
||||
* Added invalidHandler option as a shortcut to bind("invalid-form", function() {})
|
||||
* Fixed Safari issue for loading indicator in ajaxSubmit-integration-demo (append to body first, then hide)
|
||||
* Added test for creditcard validation and improved default message
|
||||
* Enhanced remote validation, accepting options to passthrough to $.ajax as paramter (either url string or options, including url property plus everything else that $.ajax supports)
|
||||
|
||||
1.4
|
||||
---
|
||||
* Fixed #2931, validate elements in document order and ignore type=image inputs
|
||||
* Fixed usage of $ and jQuery variables, now fully comptible with all variations of noConflict usage
|
||||
* Implemented #2908, enabling custom messages via metadata ala class="{required:true,messages:{required:'required field'}}", added demo/custom-messages-metadata-demo.html
|
||||
* Removed deprecated methods minValue (min), maxValue (max), rangeValue (rangevalue), minLength (minlength), maxLength (maxlength), rangeLength (rangelength)
|
||||
* Fixed #2215 regression: Call unhighlight only for current elements, not everything
|
||||
* Implemented #2989, enabling image button to cancel validation
|
||||
* Fixed issue where IE incorrectly validates against maxlength=0
|
||||
* Added czech (cs) localization
|
||||
* Reset validator.submitted on validator.resetForm(), enabling a full reset when necessary
|
||||
* Fixed #3035, skipping all falsy attributes when reading rules (0, undefined, empty string), removed part of the maxlength workaround (for 0)
|
||||
* Added dutch (nl) localization (#3201)
|
||||
|
||||
1.3
|
||||
---
|
||||
* Fixed invalid-form event, now only triggered when form is invalid
|
||||
* Added spanish (es), russian (ru), portuguese brazilian (ptbr), turkish (tr), and polish (pl) localization
|
||||
* Added removeAttrs plugin to facilate adding and removing multiple attributes
|
||||
* Added groups option to display a single message for multiple elements, via groups: { arbitraryGroupName: "fieldName1 fieldName2[, fieldNameN" }
|
||||
* Enhanced rules() for adding and removing (static) rules: rules("add", "method1[, methodN]"/{method1:param[, method_n:param]}) and rules("remove"[, "method1[, method_n]")
|
||||
* Enhanced rules-option, accepts space-seperated string-list of methods, eg. {birthdate: "required date"}
|
||||
* Fixed checkbox group validation with inline rules: As long as the rules are specified on the first element, the group is now properly validated on click
|
||||
* Fixed #2473, ignoring all rules with an explicit parameter of boolean-false, eg. required:false is the same as not specifying required at all (it was handled as required:true so far)
|
||||
* Fixed #2424, with a modified patch from #2473: Methods returning a dependency-mismatch don't stop other rules from being evaluated anymore; still, success isn't applied for optional fields
|
||||
* Fixed url and email validation to not use trimmed values
|
||||
* Fixed creditcard validation to accept only digits and dashes ("asdf" is not a valid creditcard number)
|
||||
* Allow both button and input elements for cancel buttons (via class="cancel")
|
||||
* Fixed #2215: Fixed message display to call unhighlight as part of showing and hiding messages, no more visual side-effects while checking an element and extracted validator.checkForm to validate a form without UI sideeffects
|
||||
* Rewrote custom selectors (:blank, :filled, :unchecked) with functions for compability with AIR
|
||||
|
||||
1.2.1
|
||||
-----
|
||||
|
||||
* Bundled delegeate plugin with validate plugin - its always required anyway
|
||||
* Improved remote validation to include parts from the ajaxQueue plugin for proper synchronization (no additional plugin necessary)
|
||||
* Fixed stopRequest to prevent pendingRequest < 0
|
||||
* Added jQuery.validator.autoCreateRanges property, defaults to false, enable to convert min/max to range and minlength/maxlength to rangelength; this basically fixes the issue introduced by automatically creating ranges in 1.2
|
||||
* Fixed optional-methods to not highlight anything at all if the field is blank, that is, don't trigger success
|
||||
* Allow false/null for highlight/unhighlight options instead of forcing a do-nothing-callback even when nothing needs to be highlighted
|
||||
* Fixed validate() call with no elements selected, returning undefined instead of throwing an error
|
||||
* Improved demo, replacing metadata with classes/attributes for specifying rules
|
||||
* Fixed error when no custom message is used for remote validation
|
||||
* Modified email and url validation to require domain label and top label
|
||||
* Fixed url and email validation to require TLD (actually to require domain label); 1.2 version (TLD is optional) is moved to additionals as url2 and email2
|
||||
* Fixed dynamic-totals demo in IE6/7 and improved templating, using textarea to store multiline template and string interpolation
|
||||
* Added login form example with "Email password" link that makes the password field optional
|
||||
* Enhanced dynamic-totals demo with an example of a single message for two fields
|
||||
|
||||
1.2
|
||||
---
|
||||
|
||||
* Added AJAX-captcha validation example (based on http://psyrens.com/captcha/)
|
||||
* Added remember-the-milk-demo (thanks RTM team for the permission!)
|
||||
* Added marketo-demo (thanks Glen Lipka!)
|
||||
* Added support for ajax-validation, see method "remote"; serverside returns JSON, true for valid elements, false or a String for invalid, String is used as message
|
||||
* Added highlight and unhighlight options, by default toggles errorClass on element, allows custom highlighting
|
||||
* Added valid() plugin method for easy programmatic checking of forms and fields without the need to use the validator API
|
||||
* Added rules() plguin method to read and write rules for an element (currently read only)
|
||||
* Replaced regex for email method, thanks to the contribution by Scott Gonzalez, see http://projects.scottsplayground.com/email_address_validation/
|
||||
* Restructured event architecture to rely solely on delegation, both improving performance, and ease-of-use for the developer (requires jquery.delegate.js)
|
||||
* Moved documentation from inline to http://docs.jquery.com/Plugins/Validation - including interactive examples for all methods
|
||||
* Removed validator.refresh(), validation is now completey dynamic
|
||||
* Renamed minValue to min, maxValue to max and rangeValue to range, deprecating the previous names (to be removed in 1.3)
|
||||
* Renamed minLength to minlength, maxLength to maxlength and rangeLength to rangelength, deprecating the previous names (to be removed in 1.3)
|
||||
* Added feature to merge min + max into and range and minlength + maxlength into rangelength
|
||||
* Added support for dynamic rule parameters, allowing to specify a function as a parameter eg. for minlength, called when validating the element
|
||||
* Allow to specify null or an empty string as a message to display nothing (see marketo demo)
|
||||
* Rules overhaul: Now supports combination of rules-option, metadata, classes (new) and attributes (new), see rules() for details
|
||||
|
||||
1.1.2
|
||||
---
|
||||
|
||||
* Replaced regex for URL method, thanks to the contribution by Scott Gonzalez, see http://projects.scottsplayground.com/iri/
|
||||
* Improved email method to better handle unicode characters
|
||||
* Fixed error container to hide when all elements are valid, not only on form submit
|
||||
* Fixed String.format to jQuery.format (moving into jQuery namespace)
|
||||
* Fixed accept method to accept both upper and lowercase extensions
|
||||
* Fixed validate() plugin method to create only one validator instance for a given form and always return that one instance (avoids binding events multiple times)
|
||||
* Changed debug-mode console log from "error" to "warn" level
|
||||
|
||||
1.1.1
|
||||
-----
|
||||
|
||||
* Fixed invalid XHTML, preventing error label creation in IE since jQuery 1.1.4
|
||||
* Fixed and improved String.format: Global search & replace, better handling of array arguments
|
||||
* Fixed cancel-button handling to use validator-object for storing state instead of form element
|
||||
* Fixed name selectors to handle "complex" names, eg. containing brackets ("list[]")
|
||||
* Added button and disabled elements to exclude from validation
|
||||
* Moved element event handlers to refresh to be able to add handlers to new elements
|
||||
* Fixed email validation to allow long top level domains (eg. ".travel")
|
||||
* Moved showErrors() from valid() to form()
|
||||
* Added validator.size(): returns the number of current errors
|
||||
* Call submitHandler with validator as scope for easier access of it's methods, eg. to find error labels using errorsFor(Element)
|
||||
* Compatible with jQuery 1.1.x and 1.2.x
|
||||
|
||||
1.1
|
||||
---
|
||||
|
||||
* Added validation on blur, keyup and click (for checkboxes and radiobutton). Replaces event-option.
|
||||
* Fixed resetForm
|
||||
* Fixed custom-methods-demo
|
||||
|
||||
1.0
|
||||
---
|
||||
|
||||
* Improved number and numberDE methods to check for correct decimal numbers with delimiters
|
||||
* Only elements that have rules are checked (otherwise success-option is applied to all elements)
|
||||
* Added creditcard number method (thanks to Brian Klug)
|
||||
* Added ignore-option, eg. ignore: "[@type=hidden]", using that expression to exclude elements to validate. Default: none, though submit and reset buttons are always ignored
|
||||
* Heavily enhanced Functions-as-messages by providing a flexible String.format helper
|
||||
* Accept Functions as messages, providing runtime-custom-messages
|
||||
* Fixed exclusion of elements without rules from successList
|
||||
* Fixed custom-method-demo, replaced the alert with message displaying the number of errors
|
||||
* Fixed form-submit-prevention when using submitHandler
|
||||
* Completely removed dependency on element IDs, though they are still used (when present) to link error labels to inputs. Achieved by using
|
||||
an array with {name, message, element} instead of an object with id:message pairs for the internal errorList.
|
||||
* Added support for specifying simple rules as simple strings, eg. "required" is equivalent to {required: true}
|
||||
* Added feature: Add errorClass to invalid field<6C>s parent element, making it easy to style the label/field container or the label for the field.
|
||||
* Added feature: focusCleanup - If enabled, removes the errorClass from the invalid elements and hides all errors messages whenever the element is focused.
|
||||
* Added success option to show the a field was validated successfully
|
||||
* Fixed Opera select-issue (avoiding a attribute-collision)
|
||||
* Fixed problems with focussing hidden elements in IE
|
||||
* Added feature to skip validation for submit buttons with class "cancel"
|
||||
* Fixed potential issues with Google Toolbar by prefering plugin option messages over title attribute
|
||||
* submitHandler is only called when an actual submit event was handled, validator.form() returns false only for invalid forms
|
||||
* Invalid elements are now focused only on submit or via validator.focusInvalid(), avoiding all trouble with focus-on-blur
|
||||
* IE6 error container layout issue is solved
|
||||
* Customize error element via errorElement option
|
||||
* Added validator.refresh() to find new inputs in the form
|
||||
* Added accept validation method, checks file extensions
|
||||
* Improved dependecy feature by adding two custom expressions: ":blank" to select elements with an empty value and <20>:filled<65> to select elements with a value, both excluding whitespace
|
||||
* Added a resetForm() method to the validator: Resets each form element (using the form plugin, if available), removes classes on invalid elements and hides all error messages
|
||||
* Fixed docs for validator.showErrors()
|
||||
* Fixed error label creation to always use html() instead of text(), allowing arbitrary HTML passed in as messages
|
||||
* Fixed error label creation to use specified error class
|
||||
* Added dependency feature: The requires method accepts both String (jQuery expressions) and Functions as the argument
|
||||
* Heavily improved customizing of error message display: Use normal messages and show/hide an additional container; Completely replace message display with own mechanism (while being able to delegate to the default handler; Customize placing of generated labels (instead of default below-element)
|
||||
* Fixed two major bugs in IE (error containers) and Opera (metadata)
|
||||
* Modified validation methods to accept empty fields as valid (exception: of course <20>required<65> and also <20>equalTo<54> methods)
|
||||
* Renamed "min" to "minLength", "max" to "maxLength", "length" to "rangeLength"
|
||||
* Added "minValue", "maxValue" and "rangeValue"
|
||||
* Streamlined API for support of different events. The default, submit, can be disabled. If any event is specified, that is applied to each element (instead of the entire form). Combining keyup-validation with submit-validation is now extremely easy to setup
|
||||
* Added support for one-message-per-rule when defining messages via plugin settings
|
||||
* Added support to wrap metadata in some parent element. Useful when metadata is used for other plugins, too.
|
||||
* Refactored tests and demos: Less files, better demos
|
||||
* Improved documentation: More examples for methods, more reference texts explaining some basics
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
||||
<title>Test for jQuery validate() plugin</title>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
|
||||
<style type="text/css">
|
||||
.warning { color: red; }
|
||||
</style>
|
||||
<script src="../lib/jquery.js" type="text/javascript"></script>
|
||||
<script src="../lib/jquery.form.js" type="text/javascript"></script>
|
||||
<script src="../jquery.validate.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(function() {
|
||||
// show a simple loading indicator
|
||||
var loader = jQuery('<div id="loader"><img src="images/loading.gif" alt="loading..." /></div>')
|
||||
.css({position: "relative", top: "1em", left: "25em", display: "inline"})
|
||||
.appendTo("body")
|
||||
.hide();
|
||||
jQuery().ajaxStart(function() {
|
||||
loader.show();
|
||||
}).ajaxStop(function() {
|
||||
loader.hide();
|
||||
}).ajaxError(function(a, b, e) {
|
||||
throw e;
|
||||
});
|
||||
|
||||
var v = jQuery("#form").validate({
|
||||
submitHandler: function(form) {
|
||||
jQuery(form).ajaxSubmit({
|
||||
target: "#result"
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
jQuery("#reset").click(function() {
|
||||
v.resetForm();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
|
||||
<div id="main">
|
||||
|
||||
<form method="post" class="cmxform" id="form" action="form.php">
|
||||
<fieldset>
|
||||
<legend>Login Form (Enter "foobar" as password)</legend>
|
||||
<p>
|
||||
<label for="user">Username</label>
|
||||
<input id="user" name="user" title="Please enter your username (at least 3 characters)" class="required" minlength="3" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="pass">Password</label>
|
||||
<input type="password" name="password" id="password" class="required" minlength"5" />
|
||||
</p>
|
||||
<p>
|
||||
<input class="submit" type="submit" value="Login"/>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<div id="result">Please login!</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<button id="reset">Programmatically reset above form!</button>
|
||||
|
||||
<p>Backend file: <a href="form.phps">form.phps</a></p>
|
||||
|
||||
<a href="index.html">Back to main page</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
$(function(){
|
||||
$("#refreshimg").click(function(){
|
||||
$.post('newsession.php');
|
||||
$("#captchaimage").load('image_req.php');
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#captchaform").validate({
|
||||
rules: {
|
||||
captcha: {
|
||||
required: true,
|
||||
remote: "process.php"
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
captcha: "Correct captcha is required. Click the captcha to generate a new one"
|
||||
},
|
||||
submitHandler: function() {
|
||||
alert("Correct captcha!");
|
||||
},
|
||||
success: function(label) {
|
||||
label.addClass("valid").text("Valid captcha!")
|
||||
},
|
||||
onkeyup: false
|
||||
});
|
||||
|
||||
});
|
||||
Binary file not shown.
@@ -0,0 +1,6 @@
|
||||
<?php
|
||||
|
||||
// Echo the image - timestamp appended to prevent caching
|
||||
echo '<a href="index.php" onclick="refreshimg(); return false;" title="Click to refresh image"><img src="images/image.jpg?' . time() . '" width="132" height="46" alt="Captcha image" /></a>';
|
||||
|
||||
?>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,35 @@
|
||||
<?php
|
||||
|
||||
// Begin the session
|
||||
session_start();
|
||||
|
||||
// If the session is not present, set the variable to an error message
|
||||
if(!isset($_SESSION['captcha_id']))
|
||||
$str = 'ERROR!';
|
||||
// Else if it is present, set the variable to the session contents
|
||||
else
|
||||
$str = $_SESSION['captcha_id'];
|
||||
|
||||
// Set the content type
|
||||
//header('Content-type: image/png');
|
||||
header('Cache-control: no-cache');
|
||||
|
||||
// Create an image from button.png
|
||||
$image = imagecreatefrompng('button.png');
|
||||
|
||||
// Set the font colour
|
||||
$colour = imagecolorallocate($image, 183, 178, 152);
|
||||
|
||||
// Set the font
|
||||
$font = '../fonts/Anorexia.ttf';
|
||||
|
||||
// Set a random integer for the rotation between -15 and 15 degrees
|
||||
$rotate = rand(-15, 15);
|
||||
|
||||
// Create an image using our original image and adding the detail
|
||||
imagettftext($image, 14, $rotate, 18, 30, $colour, $font, $str);
|
||||
|
||||
// Output the image as a png
|
||||
imagepng($image);
|
||||
|
||||
?>
|
||||
@@ -0,0 +1,66 @@
|
||||
<?php
|
||||
|
||||
// Make the page validate
|
||||
ini_set('session.use_trans_sid', '0');
|
||||
|
||||
// Include the random string file
|
||||
require 'rand.php';
|
||||
|
||||
// Begin the session
|
||||
session_start();
|
||||
|
||||
// Set the session contents
|
||||
$_SESSION['captcha_id'] = $str;
|
||||
|
||||
?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
|
||||
<head>
|
||||
<title>AJAX CAPTCHA</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="keywords" content="AJAX,JHR,PHP,CAPTCHA,download,PHP CAPTCHA,AJAX CAPTCHA,AJAX PHP CAPTCHA,download AJAX CAPTCHA,download AJAX PHP CAPTCHA" />
|
||||
<meta name="description" content="An AJAX CAPTCHA script, written in PHP" />
|
||||
|
||||
<script type="text/javascript" src="../../lib/jquery.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.validate.js"></script>
|
||||
<script type="text/javascript" src="captcha.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<style type="text/css">
|
||||
img { border: 1px solid #eee; }
|
||||
p#statusgreen { font-size: 1.2em; background-color: #fff; color: #0a0; }
|
||||
p#statusred { font-size: 1.2em; background-color: #fff; color: #a00; }
|
||||
fieldset label { display: block; }
|
||||
fieldset div#captchaimage { float: left; margin-right: 15px; }
|
||||
fieldset input#captcha { width: 25%; border: 1px solid #ddd; padding: 2px; }
|
||||
fieldset input#submit { display: block; margin: 2% 0% 0% 0%; }
|
||||
#captcha.success {
|
||||
border: 1px solid #49c24f;
|
||||
background: #bcffbf;
|
||||
}
|
||||
#captcha.error {
|
||||
border: 1px solid #c24949;
|
||||
background: #ffbcbc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1><acronym title="Asynchronous JavaScript And XML">AJAX</acronym> <acronym title="Completely Automated Public Turing test to tell Computers and Humans Apart">CAPTCHA</acronym>, based on <a href="http://psyrens.com/captcha/">http://psyrens.com/captcha/</a></h1>
|
||||
|
||||
<form id="captchaform" action="">
|
||||
<fieldset>
|
||||
<div id="captchaimage"><a href="<?php echo $_SERVER['PHP_SELF']; ?>" id="refreshimg" title="Click to refresh image"><img src="images/image.php?<?php echo time(); ?>" width="132" height="46" alt="Captcha image" /></a></div>
|
||||
<label for="captcha">Enter the characters as seen on the image above (case insensitive):</label>
|
||||
<input type="text" maxlength="6" name="captcha" id="captcha" />
|
||||
<input type="submit" name="submit" id="submit" value="Check" />
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<p>If you can't decipher the text on the image, click it to dynamically generate a new one.</p>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,12 @@
|
||||
<?php
|
||||
|
||||
// Include the random string file
|
||||
require 'rand.php';
|
||||
|
||||
// Begin a new session
|
||||
session_start();
|
||||
|
||||
// Set the session contents
|
||||
$_SESSION['captcha_id'] = $str;
|
||||
|
||||
?>
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
// Begin the session
|
||||
session_start();
|
||||
|
||||
// To avoid case conflicts, make the input uppercase and check against the session value
|
||||
// If it's correct, echo '1' as a string
|
||||
if(strtoupper($_GET['captcha']) == $_SESSION['captcha_id'])
|
||||
echo 'true';
|
||||
// Else echo '0' as a string
|
||||
else
|
||||
echo 'false';
|
||||
|
||||
?>
|
||||
@@ -0,0 +1,11 @@
|
||||
<?php
|
||||
|
||||
// Create a random string, leaving out 'o' to avoid confusion with '0'
|
||||
$char = strtoupper(substr(str_shuffle('abcdefghjkmnpqrstuvwxyz'), 0, 4));
|
||||
|
||||
// Concatenate the random string onto the random numbers
|
||||
// The font 'Anorexia' doesn't have a character for '8', so the numbers will only go up to 7
|
||||
// '0' is left out to avoid confusion with 'O'
|
||||
$str = rand(1, 7) . rand(1, 7) . $char;
|
||||
|
||||
?>
|
||||
@@ -0,0 +1,140 @@
|
||||
body {
|
||||
margin: 3% 5%;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font: 0.9em/1.3 Helvetica, Arial, Verdana, Sans-serif;
|
||||
}
|
||||
|
||||
a:link, a:visited {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:hover, a:focus, a:active {
|
||||
background-color: #ffb;
|
||||
color: #454545;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 2% 0%;
|
||||
padding: 1%;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #f8f8f8;
|
||||
color: #666;
|
||||
font: normal 1.5em Helvetica, Arial, Verdana, Sans-serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 2% 0%;
|
||||
padding: 1%;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #f8f8f8;
|
||||
color: #666;
|
||||
font: normal 1.3em Helvetica, Arial, Verdana, Sans-serif;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 2% 0%;
|
||||
padding: 1%;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #f8f8f8;
|
||||
color: #666;
|
||||
font: normal 1.2em Helvetica, Arial, Verdana, Sans-serif;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table th {
|
||||
border: 1px solid #ddd;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
dl, dt, dd {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #ddd;
|
||||
margin: 0% 0% 2% 0%;
|
||||
padding: 2%;
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
margin: 0;
|
||||
padding: 0 4px;
|
||||
background-color: inherit;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
code {
|
||||
font: 1em "Courier New", Courier, Monospace;
|
||||
}
|
||||
|
||||
pre code {
|
||||
font: 1.1em "Courier New", Courier, Monospace;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
p#statusgreen {
|
||||
font-size: 1.2em;
|
||||
background-color: #fff;
|
||||
color: #0a0;
|
||||
}
|
||||
|
||||
p#statusred {
|
||||
font-size: 1.2em;
|
||||
background-color: #fff;
|
||||
color: #a00;
|
||||
}
|
||||
|
||||
fieldset label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
fieldset label.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
fieldset label.valid {
|
||||
color: green;
|
||||
}
|
||||
|
||||
fieldset div#captchaimage {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
fieldset input#captcha {
|
||||
width: 25%;
|
||||
border: 1px solid #ddd;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
fieldset input#submit {
|
||||
display: block;
|
||||
margin: 2% 0% 0% 0%;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
.jscom, .mix htcom { color: #4040c2; }
|
||||
.com { color: green; }
|
||||
.regexp { color: maroon; }
|
||||
.string { color: teal; }
|
||||
.keywords { color: blue; }
|
||||
.global { color: #008; }
|
||||
.numbers { color: #880; }
|
||||
.comm { color: green; }
|
||||
.tag { color: blue; }
|
||||
.entity { color: blue; }
|
||||
.string { color: teal; }
|
||||
.aname { color: maroon; }
|
||||
.avalue { color: maroon; }
|
||||
.jquery { color: #00a; }
|
||||
.plugin { color: red; }
|
||||
@@ -0,0 +1,46 @@
|
||||
/**********************************
|
||||
|
||||
Name: cmxform Styles
|
||||
|
||||
***********************************/
|
||||
form.cmxform {
|
||||
width: 370px;
|
||||
font-size: 1.0em;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
form.cmxform legend {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
form.cmxform legend, form.cmxform label {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
form.cmxform fieldset {
|
||||
border: none;
|
||||
border-top: 1px solid #C9DCA6;
|
||||
background: url(../images/cmxform-fieldset.gif) left bottom repeat-x;
|
||||
background-color: #F8FDEF;
|
||||
}
|
||||
|
||||
form.cmxform fieldset fieldset {
|
||||
background: none;
|
||||
}
|
||||
|
||||
form.cmxform fieldset p, form.cmxform fieldset fieldset {
|
||||
padding: 5px 10px 7px;
|
||||
background: url(../images/cmxform-divider.gif) left bottom repeat-x;
|
||||
}
|
||||
|
||||
form.cmxform label.error, label.error {
|
||||
/* remove the next line when you have trouble in IE6 with labels in list */
|
||||
color: red;
|
||||
font-style: italic
|
||||
}
|
||||
div.error { display: none; }
|
||||
input { border: 1px solid black; }
|
||||
input.checkbox { border: none }
|
||||
input:focus { border: 1px dotted black; }
|
||||
input.error { border: 1px dotted red; }
|
||||
form.cmxform .gray * { color: gray; }
|
||||
@@ -0,0 +1,55 @@
|
||||
/**********************************
|
||||
|
||||
Use: cmxform template
|
||||
|
||||
***********************************/
|
||||
form.cmxform fieldset {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
form.cmxform legend {
|
||||
padding: 0 2px;
|
||||
font-weight: bold;
|
||||
_margin: 0 -7px; /* IE Win */
|
||||
}
|
||||
|
||||
form.cmxform label {
|
||||
display: inline-block;
|
||||
line-height: 1.8;
|
||||
vertical-align: top;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
form.cmxform fieldset p {
|
||||
list-style: none;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form.cmxform fieldset fieldset {
|
||||
border: none;
|
||||
margin: 3px 0 0;
|
||||
}
|
||||
|
||||
form.cmxform fieldset fieldset legend {
|
||||
padding: 0 0 5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
form.cmxform fieldset fieldset label {
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
form.cmxform label { width: 100px; } /* Width of labels */
|
||||
form.cmxform fieldset fieldset label { margin-left: 103px; } /* Width plus 3 (html space) */
|
||||
form.cmxform label.error {
|
||||
margin-left: 103px;
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
form.cmxform input.submit {
|
||||
margin-left: 103px;
|
||||
}
|
||||
|
||||
/*\*//*/ form.cmxform legend { display: inline-block; } /* IE Mac legend fix */
|
||||
@@ -0,0 +1,21 @@
|
||||
body, div { font-family: 'lucida grande', helvetica, verdana, arial, sans-serif }
|
||||
body { margin: 0; padding: 0; font-size: small; color: #333 }
|
||||
h1, h2 { font-family: 'trebuchet ms', verdana, arial; padding: 10px; margin: 0 }
|
||||
h1 { font-size: large }
|
||||
#main { padding: 1em; }
|
||||
#banner { padding: 15px; background-color: #06b; color: white; font-size: large; border-bottom: 1px solid #ccc;
|
||||
background: url(../images/bg.gif) repeat-x; text-align: center }
|
||||
#banner a { color: white; }
|
||||
|
||||
p { margin: 10px 0; }
|
||||
|
||||
li { margin-left: 10px; }
|
||||
|
||||
h3 { margin: 1em 0 0; }
|
||||
|
||||
h1 { font-size: 2em; }
|
||||
h2 { font-size: 1.8em; }
|
||||
h3 { font-size: 1.6em; }
|
||||
h4 { font-size: 1.4em; }
|
||||
h5 { font-size: 1.2em; }
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
/**********************************
|
||||
|
||||
Use: Reset Styles for all browsers
|
||||
|
||||
***********************************/
|
||||
|
||||
body, p, blockquote {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a img, iframe { border: none; }
|
||||
|
||||
/* Headers
|
||||
------------------------------*/
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/* Lists
|
||||
------------------------------*/
|
||||
|
||||
ul, ol, dl, li, dt, dd {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Links
|
||||
------------------------------*/
|
||||
|
||||
a, a:link {}
|
||||
a:visited {}
|
||||
a:hover {}
|
||||
a:active {}
|
||||
|
||||
/* Forms
|
||||
------------------------------*/
|
||||
|
||||
form, fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
fieldset { border: 1px solid #000; }
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
margin: 0;
|
||||
padding: 1px;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
select { padding: 0; }
|
||||
@@ -0,0 +1,11 @@
|
||||
/**********************************
|
||||
|
||||
Use: Main Screen Import
|
||||
|
||||
***********************************/
|
||||
|
||||
@import "reset.css";
|
||||
@import "core.css";
|
||||
|
||||
@import "cmxformTemplate.css";
|
||||
@import "cmxform.css";
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
||||
<title>jQuery validation plug-in - comment form example</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
|
||||
|
||||
<script src="../lib/jquery.js" type="text/javascript"></script>
|
||||
<script src="../jquery.validate.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$("#commentForm").validate();
|
||||
$("#commentForm2").validate({
|
||||
messages: {
|
||||
email: {
|
||||
required: 'Enter this!'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
form { width: 500px; }
|
||||
form label { width: 250px; }
|
||||
form label.error,
|
||||
form input.submit { margin-left: 253px; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
|
||||
<div id="main">
|
||||
|
||||
<p>Take a look at the source to see how messages can be customized with metadata.</p>
|
||||
|
||||
<!-- Custom rules and messages via data- attributes -->
|
||||
<form class="cmxform" id="commentForm" method="post" action="">
|
||||
<fieldset>
|
||||
<legend>Please enter your email address</legend>
|
||||
<p>
|
||||
|
||||
<label for="cemail">E-Mail *</label>
|
||||
<input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="Please enter your email address" data-msg-email="Please enter a valid email address" />
|
||||
</p>
|
||||
<p>
|
||||
<input class="submit" type="submit" value="Submit"/>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<!-- Custom message for "required" in metadata is overriden by a validate option -->
|
||||
<form class="cmxform" id="commentForm2" method="post" action="">
|
||||
<fieldset>
|
||||
<legend>Please enter your email address</legend>
|
||||
<p>
|
||||
|
||||
<label for="cemail">E-Mail *</label>
|
||||
<input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address" />
|
||||
</p>
|
||||
<p>
|
||||
<input class="submit" type="submit" value="Submit"/>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<a href="index.html">Back to main page</a>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
||||
<title>Test for jQuery validate() plugin</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
|
||||
|
||||
<script src="../lib/jquery.js" type="text/javascript"></script>
|
||||
<script src="../jquery.validate.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
// extend the current rules with new groovy ones
|
||||
|
||||
// this one requires the text "buga", we define a default message, too
|
||||
$.validator.addMethod("buga", function(value) {
|
||||
return value == "buga";
|
||||
}, 'Please enter "buga"!');
|
||||
|
||||
// this one requires the value to be the same as the first parameter
|
||||
$.validator.methods.equal = function(value, element, param) {
|
||||
return value == param;
|
||||
};
|
||||
|
||||
$().ready(function() {
|
||||
var validator = $("#texttests").bind("invalid-form.validate", function() {
|
||||
$("#summary").html("Your form contains " + validator.numberOfInvalids() + " errors, see details below.");
|
||||
}).validate({
|
||||
debug: true,
|
||||
errorElement: "em",
|
||||
errorContainer: $("#warning, #summary"),
|
||||
errorPlacement: function(error, element) {
|
||||
error.appendTo( element.parent("td").next("td") );
|
||||
},
|
||||
success: function(label) {
|
||||
label.text("ok!").addClass("success");
|
||||
},
|
||||
rules: {
|
||||
number: {
|
||||
required:true,
|
||||
minlength:3,
|
||||
maxlength:15,
|
||||
number:true
|
||||
},
|
||||
secret: "buga",
|
||||
math: {
|
||||
equal: 11
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
form.cmxform { width: 50em; }
|
||||
em.error {
|
||||
background:url("images/unchecked.gif") no-repeat 0px 0px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
em.success {
|
||||
background:url("images/checked.gif") no-repeat 0px 0px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
form.cmxform label.error {
|
||||
margin-left: auto;
|
||||
width: 250px;
|
||||
}
|
||||
em.error { color: black; }
|
||||
#warning { display: none; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
|
||||
<div id="main">
|
||||
|
||||
<form class="cmxform" id="texttests" method="get" action="foo.html">
|
||||
<h2 id="summary"></h2>
|
||||
|
||||
<fieldset>
|
||||
<legend>Example with custom methods and heavily customized error display</legend>
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="number">textarea</label></td>
|
||||
<td><input id="number" name="number"
|
||||
title="Please enter a number with at least 3 and max 15 characters!" />
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="secret">Secret</label></td>
|
||||
<td><input name="secret" id="secret" /></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="math">7 + 4 = </label></td>
|
||||
<td><input id="math" name="math" title="Please enter the correct result!" /></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<input class="submit" type="submit" value="Submit"/>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<h3 id="warning">Your form contains tons of errors! Please try again.</h3>
|
||||
|
||||
<p><a href="index.html">Back to main page</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
||||
<title>jQuery validation plug-in - dynamic forms demo</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
|
||||
|
||||
<script src="../lib/jquery.js" type="text/javascript"></script>
|
||||
<script src="../jquery.validate.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
// only for demo purposes
|
||||
$.validator.setDefaults({
|
||||
submitHandler: function() {
|
||||
alert("submitted!");
|
||||
}
|
||||
});
|
||||
$.validator.messages.max = jQuery.format("Your totals musn't exceed {0}!");
|
||||
|
||||
$.validator.addMethod("quantity", function(value, element) {
|
||||
return !this.optional(element) && !this.optional($(element).parent().prev().children("select")[0]);
|
||||
}, "Please select both the item and its amount.");
|
||||
|
||||
$().ready(function() {
|
||||
$("#orderform").validate({
|
||||
errorPlacement: function(error, element) {
|
||||
error.appendTo( element.parent().next() );
|
||||
},
|
||||
highlight: function(element, errorClass) {
|
||||
$(element).addClass(errorClass).parent().prev().children("select").addClass(errorClass);
|
||||
}
|
||||
});
|
||||
|
||||
var template = jQuery.format($("#template").val());
|
||||
function addRow() {
|
||||
$(template(i++)).appendTo("#orderitems tbody");
|
||||
}
|
||||
|
||||
var i = 1;
|
||||
// start with one row
|
||||
addRow();
|
||||
// add more rows on click
|
||||
$("#add").click(addRow);
|
||||
|
||||
// check keyup on quantity inputs to update totals field
|
||||
$("#orderform").validateDelegate("input.quantity", "keyup", function(event) {
|
||||
var totals = 0;
|
||||
$("#orderitems input.quantity").each(function() {
|
||||
totals += +this.value;
|
||||
});
|
||||
$("#totals").attr("value", totals).valid();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
form.cmxform { width: 50em; }
|
||||
em.error {
|
||||
background:url("images/unchecked.gif") no-repeat 0px 0px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
em.success {
|
||||
background:url("images/checked.gif") no-repeat 0px 0px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
form.cmxform label.error {
|
||||
margin-left: auto;
|
||||
width: 250px;
|
||||
}
|
||||
form.cmxform input.submit {
|
||||
margin-left: 0;
|
||||
}
|
||||
em.error { color: black; }
|
||||
#warning { display: none; }
|
||||
select.error {
|
||||
border: 1px dotted red;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
|
||||
<div id="main">
|
||||
|
||||
<textarea style="display:none" id="template">
|
||||
<tr>
|
||||
<td>
|
||||
<label>{0}. Item</label>
|
||||
</td>
|
||||
<td class='type'>
|
||||
<select name="item-type-{0}">
|
||||
<option value="">Select...</option>
|
||||
<option value="0">Learning jQuery</option>
|
||||
<option value="1">jQuery Reference Guide</option>
|
||||
<option value="2">jQuery Cookbook</option>
|
||||
<option vlaue="3">jQuery In Action</option>
|
||||
<option value="4">jQuery For Designers</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class='quantity'>
|
||||
<input size='4' class="quantity" min="1" id="item-quantity-{0}" name="item-quantity-{0}" />
|
||||
</td>
|
||||
<td class='quantity-error'></td>
|
||||
</tr>
|
||||
</textarea>
|
||||
|
||||
<form id="orderform" class="cmxform" method="get" action="foo.html">
|
||||
<h2 id="summary"></h2>
|
||||
|
||||
<fieldset>
|
||||
<legend>Example with custom methods and heavily customized error display</legend>
|
||||
<table id="orderitems">
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"><label>Totals (max 25)</label></td>
|
||||
<td class="totals"><input id="totals" name="totals" value="0" max="25" readonly="readonly" size='4' /></td>
|
||||
<td class="totals-error"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"> </td>
|
||||
<td><input class="submit" type="submit" value="Submit"/></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<button id="add">Add another input to the form</button>
|
||||
|
||||
<h1 id="warning">Your form contains tons of errors! Please try again.</h1>
|
||||
|
||||
<p><a href="index.html">Back to main page</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,155 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
||||
<title>Test for jQuery validate() plugin</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
|
||||
|
||||
<script src="../lib/jquery.js" type="text/javascript"></script>
|
||||
<script src="../lib/jquery.metadata.js" type="text/javascript"></script>
|
||||
<script src="../jquery.validate.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
.cmxform fieldset p.error label { color: red; }
|
||||
div.container {
|
||||
background-color: #eee;
|
||||
border: 1px solid red;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
div.container ol li {
|
||||
list-style-type: disc;
|
||||
margin-left: 20px;
|
||||
}
|
||||
div.container { display: none }
|
||||
.container label.error {
|
||||
display: inline;
|
||||
}
|
||||
form.cmxform { width: 30em; }
|
||||
form.cmxform label.error {
|
||||
display: block;
|
||||
margin-left: 1em;
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
// only for demo purposes
|
||||
$.validator.setDefaults({
|
||||
submitHandler: function() {
|
||||
alert("submitted! (skipping validation for cancel button)");
|
||||
}
|
||||
});
|
||||
|
||||
$().ready(function() {
|
||||
$("#form1").validate({
|
||||
errorLabelContainer: $("#form1 div.error")
|
||||
});
|
||||
|
||||
var container = $('div.container');
|
||||
// validate the form when it is submitted
|
||||
var validator = $("#form2").validate({
|
||||
errorContainer: container,
|
||||
errorLabelContainer: $("ol", container),
|
||||
wrapper: 'li',
|
||||
meta: "validate"
|
||||
});
|
||||
|
||||
$(".cancel").click(function() {
|
||||
validator.resetForm();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
|
||||
<div id="main">
|
||||
|
||||
<form method="get" class="cmxform" id="form1" action="">
|
||||
<fieldset>
|
||||
<legend>Login Form</legend>
|
||||
<p>
|
||||
<label>Username</label>
|
||||
<input name="user" title="Please enter your username (at least 3 characters)" class="{required:true,minlength:3}" />
|
||||
</p>
|
||||
<p>
|
||||
<label>Password</label>
|
||||
<input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" class="{required:true,minlength:5}" />
|
||||
</p>
|
||||
<div class="error">
|
||||
</div>
|
||||
<p>
|
||||
<input class="submit" type="submit" value="Login"/>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<!-- our error container -->
|
||||
<div class="container">
|
||||
<h4>There are serious errors in your form submission, please see below for details.</h4>
|
||||
<ol>
|
||||
<li><label for="email" class="error">Please enter your email address</label></li>
|
||||
<li><label for="phone" class="error">Please enter your phone <b>number</b> (between 2 and 8 characters)</label></li>
|
||||
<li><label for="address" class="error">Please enter your address (at least 3 characters)</label></li>
|
||||
<li><label for="avatar" class="error">Please select an image (png, jpg, jpeg, gif)</label></li>
|
||||
<li><label for="cv" class="error">Please select a document (doc, docx, txt, pdf)</label></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form class="cmxform" id="form2" method="get" action="">
|
||||
<fieldset>
|
||||
<legend>Validating a complete form</legend>
|
||||
<p>
|
||||
<label for="email">Email</label>
|
||||
<input id="email" name="email" class="{validate:{required:true,email:true}}" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="agree">Favorite Color</label>
|
||||
<select id="color" name="color" title="Please select your favorite color!" class="{validate:{required:true}}">
|
||||
<option></option>
|
||||
<option>Red</option>
|
||||
<option>Blue</option>
|
||||
<option>Yellow</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="phone">Phone</label>
|
||||
<input id="phone" name="phone" class="some styles {validate:{required:true,number:true, rangelength:[2,8]}}" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="address">Address</label>
|
||||
<input id="address" name="address" class="some other styles {validate:{required:true,minlength:3}}" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="avatar">Avatar</label>
|
||||
<input type="file" id="avatar" name="avatar" class="{validate:{required:true,accept:true}}" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="agree">Please agree to our policy</label>
|
||||
<input type="checkbox" class="checkbox" id="agree" title="Please agree to our policy!" name="agree" class="{validate:{required:true}}" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="cv">CV</label>
|
||||
<input type="file" id="cv" name="cv" class="{validate:{required:true,accept:'docx?|txt|pdf'}}" />
|
||||
</p>
|
||||
<p>
|
||||
<input class="submit" type="submit" value="Submit"/>
|
||||
<input class="cancel" type="submit" value="Cancel"/>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<div class="container">
|
||||
<h4>There are serious errors in your form submission, please see details above the form!</h4>
|
||||
</div>
|
||||
|
||||
<a href="index.html">Back to main page</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
||||
<title>jQuery validation plug-in - comment form example</title>
|
||||
|
||||
<link rel="stylesheet" href="css/screen.css" />
|
||||
<link rel="stylesheet" href="css/cmxform.css" />
|
||||
|
||||
<script src="../lib/jquery.js"></script>
|
||||
<script src="../jquery.validate.js"></script>
|
||||
<script src="../additional-methods.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$("#fileForm").validate();
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="cmxform" id="fileForm" method="post" action="">
|
||||
<fieldset>
|
||||
<legend>Select the indicated type of files?</legend>
|
||||
<p>
|
||||
<label for="file1">Select a plain text file (e.g. *.txt)</label>
|
||||
<input type="file" id="file1" name="file1" class="required" accept="text/plain" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="file2">Select any image file</label>
|
||||
<input type="file" id="file2" name="file2" class="required" accept="image/*"/>
|
||||
</p>
|
||||
<p>
|
||||
<label for="file3">Select either a PDF or a EPS file</label>
|
||||
<input type="file" id="file3" name="file3" class="required" accept="image/x-eps,application/pdf"/>
|
||||
</p>
|
||||
<p>
|
||||
<label for="file4">Select any audio or image file</label>
|
||||
<input type="file" id="file4" name="file4" class="required" accept="image/*,audio/*"/>
|
||||
</p>
|
||||
<p>
|
||||
<label for="file5">Select one or more plain text files (e.g. *.txt)</label>
|
||||
<input type="file" id="file5" name="file5" class="required" multiple accept="text/plain" />
|
||||
</p>
|
||||
<p>
|
||||
<input class="submit" type="submit" value="Submit"/>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
<?php
|
||||
// wait a second to simulate a some latency
|
||||
usleep(500000);
|
||||
$user = $_REQUEST['user'];
|
||||
$pw = $_REQUEST['password'];
|
||||
if($user && $pw && $pw == "foobar")
|
||||
echo "Hi $user, welcome back.";
|
||||
else
|
||||
echo "Your password is wrong (must be foobar).";
|
||||
?>
|
||||
@@ -0,0 +1,10 @@
|
||||
<?php
|
||||
// wait a second to simulate a some latency
|
||||
usleep(500000);
|
||||
$user = $_REQUEST['user'];
|
||||
$pw = $_REQUEST['password'];
|
||||
if($user && $pw && $pw == "foobar")
|
||||
echo "Hi $user, welcome back.";
|
||||
else
|
||||
echo "Your password is wrong (must be foobar).";
|
||||
?>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 B |
Binary file not shown.
|
After Width: | Height: | Size: 43 B |
Binary file not shown.
|
After Width: | Height: | Size: 314 B |
Binary file not shown.
|
After Width: | Height: | Size: 418 B |
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
@@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
||||
<title>jQuery validation plug-in - main demo</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
|
||||
|
||||
<script src="../lib/jquery.js" type="text/javascript"></script>
|
||||
<script src="../jquery.validate.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$.validator.setDefaults({
|
||||
submitHandler: function() { alert("submitted!"); }
|
||||
});
|
||||
|
||||
$().ready(function() {
|
||||
// validate the comment form when it is submitted
|
||||
$("#commentForm").validate();
|
||||
|
||||
// validate signup form on keyup and submit
|
||||
$("#signupForm").validate({
|
||||
rules: {
|
||||
firstname: "required",
|
||||
lastname: "required",
|
||||
username: {
|
||||
required: true,
|
||||
minlength: 2
|
||||
},
|
||||
password: {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
confirm_password: {
|
||||
required: true,
|
||||
minlength: 5,
|
||||
equalTo: "#password"
|
||||
},
|
||||
email: {
|
||||
required: true,
|
||||
email: true
|
||||
},
|
||||
topic: {
|
||||
required: "#newsletter:checked",
|
||||
minlength: 2
|
||||
},
|
||||
agree: "required"
|
||||
},
|
||||
messages: {
|
||||
firstname: "Please enter your firstname",
|
||||
lastname: "Please enter your lastname",
|
||||
username: {
|
||||
required: "Please enter a username",
|
||||
minlength: "Your username must consist of at least 2 characters"
|
||||
},
|
||||
password: {
|
||||
required: "Please provide a password",
|
||||
minlength: "Your password must be at least 5 characters long"
|
||||
},
|
||||
confirm_password: {
|
||||
required: "Please provide a password",
|
||||
minlength: "Your password must be at least 5 characters long",
|
||||
equalTo: "Please enter the same password as above"
|
||||
},
|
||||
email: "Please enter a valid email address",
|
||||
agree: "Please accept our policy"
|
||||
}
|
||||
});
|
||||
|
||||
// propose username by combining first- and lastname
|
||||
$("#username").focus(function() {
|
||||
var firstname = $("#firstname").val();
|
||||
var lastname = $("#lastname").val();
|
||||
if(firstname && lastname && !this.value) {
|
||||
this.value = firstname + "." + lastname;
|
||||
}
|
||||
});
|
||||
|
||||
//code to hide topic selection, disable for demo
|
||||
var newsletter = $("#newsletter");
|
||||
// newsletter topics are optional, hide at first
|
||||
var inital = newsletter.is(":checked");
|
||||
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
|
||||
var topicInputs = topics.find("input").attr("disabled", !inital);
|
||||
// show when newsletter is checked
|
||||
newsletter.click(function() {
|
||||
topics[this.checked ? "removeClass" : "addClass"]("gray");
|
||||
topicInputs.attr("disabled", !this.checked);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
#commentForm { width: 500px; }
|
||||
#commentForm label { width: 250px; }
|
||||
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
|
||||
#signupForm { width: 670px; }
|
||||
#signupForm label.error {
|
||||
margin-left: 10px;
|
||||
width: auto;
|
||||
display: inline;
|
||||
}
|
||||
#newsletter_topics label.error {
|
||||
display: none;
|
||||
margin-left: 103px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
|
||||
<div id="main">
|
||||
|
||||
<p>Default submitHandler is set to display an alert into of submitting the form</p>
|
||||
|
||||
<form class="cmxform" id="commentForm" method="get" action="">
|
||||
<fieldset>
|
||||
<legend>Please provide your name, email address (won't be published) and a comment</legend>
|
||||
<p>
|
||||
<label for="cname">Name (required, at least 2 characters)</label>
|
||||
<input id="cname" name="name" minlength="2" type="text" required />
|
||||
<p>
|
||||
<label for="cemail">E-Mail (required)</label>
|
||||
<input id="cemail" type="email" name="email" required />
|
||||
</p>
|
||||
<p>
|
||||
<label for="curl">URL (optional)</label>
|
||||
<input id="curl" type="url" name="url" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="ccomment">Your comment (required)</label>
|
||||
<textarea id="ccomment" name="comment" required></textarea>
|
||||
</p>
|
||||
<p>
|
||||
<input class="submit" type="submit" value="Submit"/>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<form class="cmxform" id="signupForm" method="get" action="">
|
||||
<fieldset>
|
||||
<legend>Validating a complete form</legend>
|
||||
<p>
|
||||
<label for="firstname">Firstname</label>
|
||||
<input id="firstname" name="firstname" type="text" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="lastname">Lastname</label>
|
||||
<input id="lastname" name="lastname" type="text" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="username">Username</label>
|
||||
<input id="username" name="username" type="text" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="password">Password</label>
|
||||
<input id="password" name="password" type="password" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="confirm_password">Confirm password</label>
|
||||
<input id="confirm_password" name="confirm_password" type="password" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="email">Email</label>
|
||||
<input id="email" name="email" type="email" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="agree">Please agree to our policy</label>
|
||||
<input type="checkbox" class="checkbox" id="agree" name="agree" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="newsletter">I'd like to receive the newsletter</label>
|
||||
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
|
||||
</p>
|
||||
<fieldset id="newsletter_topics">
|
||||
<legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
|
||||
<label for="topic_marketflash">
|
||||
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
|
||||
Marketflash
|
||||
</label>
|
||||
<label for="topic_fuzz">
|
||||
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
|
||||
Latest fuzz
|
||||
</label>
|
||||
<label for="topic_digester">
|
||||
<input type="checkbox" id="topic_digester" value="digester" name="topic" />
|
||||
Mailing list digester
|
||||
</label>
|
||||
<label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
|
||||
</fieldset>
|
||||
<p>
|
||||
<input class="submit" type="submit" value="Submit"/>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<h3>Syntetic examples</h3>
|
||||
<ul>
|
||||
<li><a href="errorcontainer-demo.html">Error message containers in action</a></li>
|
||||
<li><a href="custom-messages-data-demo.html">Custom Messages as Element Data</a></li>
|
||||
<li><a href="radio-checkbox-select-demo.html">Radio and checkbox buttons and selects</a></li>
|
||||
<li><a href="ajaxSubmit-intergration-demo.html">Integration with Form Plugin (AJAX submit)</a></li>
|
||||
<li><a href="custom-methods-demo.html">Custom methods and message display.</a></li>
|
||||
<li><a href="dynamic-totals.html">Dynamic forms</a></li>
|
||||
<li><a href="themerollered.html">Forms styled with jQuery UI Themeroller</a></li>
|
||||
<li><a href="tinymce/">TinyMCE Demo</a></li>
|
||||
<li><a href="file_input.html">File inputs</a></li>
|
||||
<li><a href="jquerymobile.html">jQuery Mobile Form Validation</a></li>
|
||||
</ul>
|
||||
<h3>Real-world examples</h3>
|
||||
<ul>
|
||||
<li><a href="milk/">Remember The Milk signup form</a></li>
|
||||
<li><a href="marketo/">Marketo signup form</a></li>
|
||||
<li><a href="multipart/">Buy and Sell a House multipart form</a></li>
|
||||
<li><a href="captcha/">Remote captcha validation</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Testsuite</h3>
|
||||
<ul>
|
||||
<li><a href="../test/">Validation Testsuite</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My Page</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
|
||||
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
|
||||
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
|
||||
<script src="../jquery.validate.js"></script>
|
||||
<style>
|
||||
label.error {
|
||||
color: red;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 1.4;
|
||||
margin-top: 0.5em;
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
|
||||
@media screen and (orientation: portrait){
|
||||
label.error { margin-left: 0; display: block; }
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape){
|
||||
label.error { display: inline-block; margin-left: 22%; }
|
||||
}
|
||||
|
||||
em { color: red; font-weight: bold; padding-right: .25em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="page1" data-role="page">
|
||||
|
||||
<div data-role="header">
|
||||
<h1>Welcome</h1>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
<form method="GET">
|
||||
<div data-role="fieldcontain">
|
||||
<label for="email">Email:</label>
|
||||
<input type="email" name="email" id="email" />
|
||||
</div>
|
||||
<div data-role="fieldcontain">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password" id="password" />
|
||||
</div>
|
||||
<input data-role="submit" type="submit" value="Login" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$('#page1').bind('pageinit', function(event) {
|
||||
$('form').validate({
|
||||
rules: {
|
||||
email: {
|
||||
required: true
|
||||
},
|
||||
password: {
|
||||
required: true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 89 B |
Binary file not shown.
|
After Width: | Height: | Size: 442 B |
Binary file not shown.
|
After Width: | Height: | Size: 664 B |
Binary file not shown.
|
After Width: | Height: | Size: 121 B |
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>Login Form with Email Password Link</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
|
||||
|
||||
<script type="text/javascript" src="../../lib/jquery.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.validate.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function() {
|
||||
// highlight
|
||||
var elements = $("input[type!='submit'], textarea, select");
|
||||
elements.focus(function(){
|
||||
$(this).parents('li').addClass('highlight');
|
||||
});
|
||||
elements.blur(function(){
|
||||
$(this).parents('li').removeClass('highlight');
|
||||
});
|
||||
|
||||
$("#forgotpassword").click(function() {
|
||||
$("#password").removeClass("required");
|
||||
$("#login").submit();
|
||||
$("#password").addClass("required");
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#login").validate()
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
|
||||
<div id="header">
|
||||
<h1>Login</h1>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<p id="status"></p>
|
||||
<form action="" method="get" id="login">
|
||||
<fieldset>
|
||||
<legend>User details</legend>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="email"><span class="required">Email address</span></label>
|
||||
<input id="email" name="email" class="text required email" type="text" />
|
||||
<label for="email" class="error">This must be a valid email address</label>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<label for="password"><span class="required">Password</span></label>
|
||||
<input name="password" type="password" class="text required" id="password" minlength="4" maxlength="20" />
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<label class="centered info"><a id="forgotpassword" href="#">Email my password...</a></label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
|
||||
<fieldset class="submit">
|
||||
<input type="submit" class="button" value="Login..." />
|
||||
</fieldset>
|
||||
|
||||
<div class="clear"></div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,457 @@
|
||||
/*******************************************************************************
|
||||
********************************************************************************
|
||||
**
|
||||
* - GENERAL
|
||||
*
|
||||
* - PAGE CONTAINERS
|
||||
*
|
||||
* - HEADER
|
||||
*
|
||||
* - CONTENT
|
||||
**
|
||||
********************************************************************************
|
||||
******************************************************************************/
|
||||
|
||||
|
||||
|
||||
|
||||
/* GENERAL ------------------------------------------------------------------ */
|
||||
|
||||
html
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Zero default margin & padding around common elements */
|
||||
body, dd, dl, dt, form, h1, h2, h3, h4, h5, h6, ul, ol, li, p
|
||||
{
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
height: 100%;
|
||||
background-color: #333333;
|
||||
background-image: url(images/bg.gif);
|
||||
background-position: 0% 0;
|
||||
color: #000000;
|
||||
line-height: 1.5;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 62.5%;
|
||||
text-align: center;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
a:link
|
||||
{
|
||||
color: #003399;
|
||||
}
|
||||
|
||||
a:visited
|
||||
{
|
||||
color: #B266B2;
|
||||
}
|
||||
|
||||
a:hover
|
||||
{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* PAGE CONTAINERS ---------------------------------------------------------- */
|
||||
|
||||
#page
|
||||
{
|
||||
width: 636px;
|
||||
w\idth: 600px;
|
||||
min-height: 100%;
|
||||
margin: 17px auto;
|
||||
padding: 0 18px;
|
||||
background-image: url(images/page.gif);
|
||||
background-repeat: repeat-y;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
* html #page
|
||||
{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* HEADER ------------------------------------------------------------------- */
|
||||
|
||||
#header
|
||||
{
|
||||
height: 90px;
|
||||
background-color: #B2DD32;
|
||||
background-image: url(images/header1.jpg);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
h1
|
||||
{
|
||||
padding: 0 35px;
|
||||
font-size: 2.2em;
|
||||
font-weight: normal;
|
||||
line-height: 82px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* CONTENT ------------------------------------------------------------------ */
|
||||
|
||||
#content
|
||||
{
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
font-size:1.1em;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
form
|
||||
{
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*** MASTER FORM WIDTHS - CUSTOMIZE THIS TO CHANGE THE FORM LAYOUT ***/
|
||||
|
||||
/*
|
||||
form width: 550px
|
||||
left column: 190px / 180px + 10px padding
|
||||
mid column: 200px
|
||||
right column: 160px
|
||||
*/
|
||||
|
||||
form{
|
||||
width:550px !important;
|
||||
}
|
||||
|
||||
fieldset.submit
|
||||
{
|
||||
padding-left: 190px !important;
|
||||
}
|
||||
|
||||
form label{
|
||||
padding:0px 10px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
form label.error,
|
||||
form input.submit
|
||||
{
|
||||
margin-left:180px !important;
|
||||
}
|
||||
|
||||
form fieldset fieldset label.error
|
||||
{
|
||||
margin-left:0px !important;
|
||||
width:200px !important;
|
||||
}
|
||||
|
||||
|
||||
form .centered{
|
||||
margin-left:180px !important;
|
||||
width:200px !important;
|
||||
}
|
||||
|
||||
form .text,
|
||||
form .button,
|
||||
form .group,
|
||||
form .control,
|
||||
form .submit,
|
||||
form textarea,
|
||||
form select
|
||||
{
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*** FIELDSETS AND LEGENDS ***/
|
||||
|
||||
form{
|
||||
width:550px;
|
||||
margin-bottom:25px;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
form fieldset
|
||||
{
|
||||
margin: 0 0 1.5em 0;
|
||||
padding: 0 0 10px 0px;
|
||||
|
||||
border: 1px solid #BFBAB0;
|
||||
|
||||
background-color: #F2EFE9;
|
||||
background-image: url(images/fieldset_gradient.jpg);
|
||||
background-repeat: repeat-x;
|
||||
|
||||
background-color: #fff;
|
||||
background-image: url(images/fieldset-gradient-02.jpg);
|
||||
background-position:bottom;
|
||||
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
form fieldset.submit
|
||||
{
|
||||
padding: 0px 10px 10px 190px;
|
||||
border-style: none;
|
||||
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
|
||||
float: none;
|
||||
width: auto;
|
||||
|
||||
}
|
||||
|
||||
form legend
|
||||
{
|
||||
color: #000000;
|
||||
|
||||
font-size:1.3em;
|
||||
font-weight: bold;
|
||||
font-variant:small-caps;
|
||||
|
||||
margin-left: 1em;
|
||||
padding:0px 5px;
|
||||
}
|
||||
|
||||
form fieldset p{
|
||||
margin:10px 0px 0px 10px;
|
||||
}
|
||||
|
||||
/*** FORM BLOCKS ***/
|
||||
|
||||
form ul
|
||||
{
|
||||
padding:5px 10px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
form li
|
||||
{
|
||||
width: 100%;
|
||||
|
||||
padding:5px 0px 10px 0;
|
||||
border-top:1px dotted #ccc;
|
||||
|
||||
display:block;
|
||||
float: left;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
form li:first-child
|
||||
{
|
||||
border:none;
|
||||
}
|
||||
|
||||
|
||||
/*** FORM BLOCK ELEMENTS ***/
|
||||
|
||||
form label
|
||||
{
|
||||
padding:0px 10px;
|
||||
width: 160px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
form .error{
|
||||
color: #c00;
|
||||
}
|
||||
|
||||
form label.error
|
||||
{
|
||||
color: #c00;
|
||||
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
font-variant:small-caps;
|
||||
|
||||
width:308px;
|
||||
display: none;
|
||||
|
||||
margin:8px 0px 0px 180px;
|
||||
padding:3px 0px 0px 5px;
|
||||
border-top:1px dotted #ccc;
|
||||
|
||||
clear:both;
|
||||
}
|
||||
|
||||
form label.info{
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
font-variant:small-caps;
|
||||
|
||||
margin:8px 0px 0px 180px;
|
||||
padding:3px 0px 0px 5px;
|
||||
}
|
||||
|
||||
form fieldset fieldset,
|
||||
form .group
|
||||
{
|
||||
width:200px;
|
||||
|
||||
margin: 0;
|
||||
border:none;
|
||||
|
||||
background:none;
|
||||
|
||||
float:left;
|
||||
clear: none;
|
||||
|
||||
}
|
||||
|
||||
form fieldset fieldset label
|
||||
{
|
||||
width:auto !important;
|
||||
white-space:nowrap;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
display:block;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
form label label.error{
|
||||
margin-left:0px;
|
||||
}
|
||||
|
||||
form label.centered{
|
||||
padding:0px 0px;
|
||||
width:200px !important;
|
||||
}
|
||||
|
||||
/* see also the error class at the foot of the page */
|
||||
|
||||
form fieldset fieldset label.spaced
|
||||
{
|
||||
margin-bottom:3px;
|
||||
}
|
||||
|
||||
/*** FORM ELEMENT COLUMNS ***/
|
||||
|
||||
.col-1,
|
||||
fieldset fieldset.col-1 label
|
||||
{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.col-2,
|
||||
fieldset fieldset.col-2 label
|
||||
{
|
||||
width:50%;
|
||||
}
|
||||
|
||||
.col-3,
|
||||
fieldset fieldset.col-3 label
|
||||
{
|
||||
width:33%;
|
||||
}
|
||||
|
||||
.col-4,
|
||||
fieldset fieldset.col-4 label
|
||||
{
|
||||
width:25%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*** FORM ELEMENTS ***/
|
||||
|
||||
form input.submit{
|
||||
margin:10px 0px 10px 180px;
|
||||
padding:0px 2px;
|
||||
}
|
||||
|
||||
form input, textarea, select,
|
||||
form label
|
||||
{
|
||||
font-size:1.1em;
|
||||
line-height:1.6em;
|
||||
}
|
||||
|
||||
form input, textarea, select
|
||||
{
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
form .input[type="text"],
|
||||
form textarea
|
||||
{
|
||||
padding:1px;
|
||||
}
|
||||
|
||||
form .input[type="radio"],
|
||||
form .input[type="checkbox"]
|
||||
{
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
position:relative;
|
||||
top:3px;
|
||||
}
|
||||
|
||||
/*** SUPPORTING CLASSES ***/
|
||||
|
||||
form label.required{
|
||||
background-image:url(images/required_star.gif);
|
||||
background-position:right;
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
|
||||
form span.required{
|
||||
padding-right:15px;
|
||||
}
|
||||
|
||||
form .clean
|
||||
{
|
||||
border:none;
|
||||
}
|
||||
|
||||
form .info{
|
||||
padding-top:0.5em;
|
||||
font-size:80%;
|
||||
line-height:100%;
|
||||
color:#aaa;
|
||||
}
|
||||
|
||||
form .indent{
|
||||
padding:2px 20px;
|
||||
width:auto !important;
|
||||
white-space:nowrap;
|
||||
padding-left: 25px !important;
|
||||
}
|
||||
|
||||
form label.disabled{
|
||||
color:#aaa;
|
||||
}
|
||||
|
||||
form .highlight{
|
||||
background-color:#e2e2e2;
|
||||
}
|
||||
|
||||
.off{
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
.clear{
|
||||
clear:both;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<?php
|
||||
$request = trim(strtolower($_REQUEST['email']));
|
||||
$emails = array('glen@marketo.com', 'george@bush.gov', 'me@god.com', 'aboutface@cooper.com', 'steam@valve.com', 'bill@gates.com');
|
||||
$valid = 'true';
|
||||
foreach($emails as $email) {
|
||||
if( strtolower($email) == $request )
|
||||
$valid = 'false';
|
||||
}
|
||||
echo $valid;
|
||||
?>
|
||||
@@ -0,0 +1,10 @@
|
||||
<?php
|
||||
$request = trim(strtolower($_REQUEST['value']));
|
||||
$emails = array('glen@marketo.com', 'george@bush.gov', 'me@god.com', 'aboutface@cooper.com', 'steam@valve.com', 'bill@gates.com');
|
||||
$valid = 'true';
|
||||
foreach($emails as $email) {
|
||||
if( strtolower($email) == $request )
|
||||
$valid = 'false';
|
||||
}
|
||||
echo $valid;
|
||||
?>
|
||||
@@ -0,0 +1,35 @@
|
||||
img.png {
|
||||
background-image: expression(
|
||||
this.runtimeStyle.backgroundImage = "none",
|
||||
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
|
||||
this.src = "images/blank.gif"
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hidden {
|
||||
display:none
|
||||
}
|
||||
|
||||
|
||||
|
||||
div.login { width: 120px;}
|
||||
div.nav-global LI,
|
||||
div.nav-global LI A { display:inline !important; zoom: 1;}
|
||||
|
||||
div.nav-global LI A:hover,
|
||||
div.nav-left li a:hover { text-decoration: none;}
|
||||
|
||||
div.buttonSubmit { height: 36px;}
|
||||
|
||||
div.buttonSubmit input { position: absolute;}
|
||||
|
||||
div.offerHeader {margin-left: 3px;}
|
||||
|
||||
#col-left { height: 340px;}
|
||||
|
||||
span#cancellation {
|
||||
position: relative;
|
||||
top: 20px;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 137 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 799 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 793 B |
Binary file not shown.
|
After Width: | Height: | Size: 845 B |
Binary file not shown.
|
After Width: | Height: | Size: 234 B |
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Subscription Signup | Marketo" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="description" content="Marketo Search Marketing application" />
|
||||
<meta name="keywords" content="Marketo, Search Marketing" />
|
||||
<meta name="language" content="en" />
|
||||
<title>Subscription Signup | Marketo</title>
|
||||
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
|
||||
<script src="../../lib/jquery.js" type="text/javascript"></script>
|
||||
<script src="../../jquery.validate.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript" src="jquery.maskedinput.js"></script>
|
||||
<script type="text/javascript" src="mktSignup.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lte IE 6]>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="ie6.css" />
|
||||
<![endif]-->
|
||||
|
||||
<!-- start page wrapper --><div id="letterbox">
|
||||
|
||||
<!-- start header container -->
|
||||
<div id="header-background">
|
||||
<div class="nav-global-container">
|
||||
|
||||
<div class="login"><a href="#"><span></span>Customer Login</a></div>
|
||||
<div class="logo"><a href="#"><img src="images/logo_marketo.gif" width="168" height="73" alt="Marketo" /></a></div>
|
||||
<div class="nav-global">
|
||||
<ul>
|
||||
<li><a href="#" class="nav-g01"><span></span>Home</a></li>
|
||||
<li><a href="#" class="nav-g02"><span></span>Products</a></li>
|
||||
<li><a href="#" class="nav-g04"><span></span>B2B Marketing Resources</a></li>
|
||||
|
||||
<li><a href="#" class="nav-g05"><span></span>About Marketo</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end header container -->
|
||||
<div class="line-grey-tier"></div>
|
||||
|
||||
<!-- start page container 2 div-->
|
||||
<div id="page-container" class="resize"><div id="page-content-inner" class="resize">
|
||||
|
||||
<!-- start col-main -->
|
||||
|
||||
<div id="col-main" class="resize" style="">
|
||||
|
||||
|
||||
|
||||
<!-- start main content -->
|
||||
<div class="main-content resize">
|
||||
|
||||
<div class="action-container" style="display:none;"></div>
|
||||
|
||||
|
||||
<h1>Step 1 of 2 </h1>
|
||||
<p>
|
||||
</p>
|
||||
<br clear="all" />
|
||||
<div>
|
||||
<form id="profileForm" type="actionForm" action="step2.htm" method="get" >
|
||||
|
||||
|
||||
<div class="error" style="display:none;">
|
||||
<img src="images/warning.gif" alt="Warning!" width="24" height="24" style="float:left; margin: -5px 10px 0px 0px; " />
|
||||
|
||||
<span></span>.<br clear="all"/>
|
||||
</div>
|
||||
|
||||
|
||||
<table cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td class="label"><label for="co_name">Company Name:</label></td>
|
||||
<td class="field">
|
||||
<input id="co_name" class="required" maxlength="40" name="co_name" size="20" type="text" tabindex="1" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="co_url">Company URL:</label></td>
|
||||
<td class="field">
|
||||
<input id="co_url" class="required defaultInvalid url" maxlength="40" name="co_url" style="width:163px" type="text" tabindex="2" value="http://" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td/><td/>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="first_name">First Name:</label></td>
|
||||
<td class="field">
|
||||
<input id="first_name" class="required" maxlength="40" name="first_name" size="20" type="text" tabindex="3" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="last_name">Last Name:</label></td>
|
||||
<td class="field">
|
||||
<input id="last_name" class="required" maxlength="40" name="last_name" size="20" type="text" tabindex="4" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="address1">Company Address:</label></td>
|
||||
<td class="field">
|
||||
<input maxlength="40" class="required" name="address1" size="20" type="text" tabindex="5" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"></td>
|
||||
<td class="field">
|
||||
<input maxlength="40" name="address2" size="20" type="text" tabindex="6" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="city">City:</label></td>
|
||||
<td class="field">
|
||||
<input maxlength="40" class="required" name="city" size="20" type="text" tabindex="7" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="state">State:</label></td>
|
||||
<td class="field">
|
||||
<select id="state" class="required" name="state" style="margin-left: 4px;" tabindex="8">
|
||||
<option value="">Choose State:</option>
|
||||
<option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="label"><label for="zip">Zip:</label></td>
|
||||
<td class="field">
|
||||
<input maxlength="10" name="zip" style="width: 100px" type="text" class="required zipcode" tabindex="9" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="phone">Phone:</label></td>
|
||||
<td class="field">
|
||||
<input id="phone" maxlength="14" name="phone" type="text" class="required phone" tabindex="10" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<h2 style="border-bottom: 1px solid #CCCCCC;">Login Information</h2>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td class="label"><label for="email">Email:</label></td>
|
||||
<td class="field">
|
||||
<input id="email" class="required email" remote="emails.php" maxlength="40" name="email" size="20" type="text" tabindex="11" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="label"><label for="password1">Password:</label></td>
|
||||
<td class="field">
|
||||
<input id="password1" class="required password" maxlength="40" name="password1" size="20" type="password" tabindex="12" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="password2">Retype Password:</label></td>
|
||||
<td class="field">
|
||||
<input id="password2" class="required" equalTo="#password1" maxlength="40" name="password2" size="20" type="password" tabindex="13" value="" />
|
||||
<div class="formError"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<div class="buttonSubmit">
|
||||
<span></span>
|
||||
<input class="formButton" type="submit" value="Next" style="width: 140px" tabindex="14" />
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table><br /><br />
|
||||
</form>
|
||||
<br clear="all"/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div> <!-- end main content -->
|
||||
<br />
|
||||
</div> <!-- end col-main -->
|
||||
|
||||
<!-- start left col -->
|
||||
<div id="col-left" class="nav-left-back empty resize" style="position: absolute; min-height: 450px;">
|
||||
<div class="col-left-header-tab" style="position: absolute;">Signup</div>
|
||||
<div class="nav-left">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="left-nav-callout png" style="top: 15px; margin-bottom: 100px;">
|
||||
<img src="images/left-nav-callout-long.png" class="png" alt="" />
|
||||
<h6>Sign Up Process</h6>
|
||||
<a style="background-image: url(images/step1-24.gif); font-weight: normal; text-decoration: none; cursor: default;">Sign up with a valid credit card.</a>
|
||||
<a style="background-image: url(images/step2-24.gif); font-weight: normal; text-decoration: none; cursor: default;">Connect to your Google AdWords account. You will need your AdWords Customer ID.</a>
|
||||
<a style="background-image: url(images/step3-24.gif); font-weight: normal; text-decoration: none; cursor: default;">Start your 30 day trial. No payments until trial ends.</a>
|
||||
</div>
|
||||
|
||||
<div class="footerAddress">
|
||||
<b>Marketo Inc.</b><br />
|
||||
1710 S. Amphlett Blvd.<br />
|
||||
San Mateo, CA 94402 USA<br />
|
||||
</div>
|
||||
<br clear="all"/>
|
||||
</div> <!-- end left col -->
|
||||
|
||||
</div> </div> <!-- end page container 2 divs-->
|
||||
|
||||
<div id="footer-container" align="center">
|
||||
<div class="footer">
|
||||
<ul>
|
||||
<li><a href="..">Home</a></li>
|
||||
<li class="line-off"><a href="step2.htm">Second step</a></li>
|
||||
</ul>
|
||||
</div></div>
|
||||
|
||||
|
||||
|
||||
<!-- end page wrapper -->
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,267 @@
|
||||
/*
|
||||
* Copyright (c) 2007 Josh Bush (digitalbush.com)
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person
|
||||
* obtaining a copy of this software and associated documentation
|
||||
* files (the "Software"), to deal in the Software without
|
||||
* restriction, including without limitation the rights to use,
|
||||
* copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the
|
||||
* Software is furnished to do so, subject to the following
|
||||
* conditions:
|
||||
|
||||
* The above copyright notice and this permission notice shall be
|
||||
* included in all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
* OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Version: 1.1
|
||||
* Release: 2007-09-08
|
||||
*/
|
||||
(function($) {
|
||||
//Helper Functions for Caret positioning
|
||||
function getCaretPosition(ctl){
|
||||
var res = {begin: 0, end: 0 };
|
||||
if (ctl.setSelectionRange){
|
||||
res.begin = ctl.selectionStart;
|
||||
res.end = ctl.selectionEnd;
|
||||
}else if (document.selection && document.selection.createRange){
|
||||
var range = document.selection.createRange();
|
||||
res.begin = 0 - range.duplicate().moveStart('character', -100000);
|
||||
res.end = res.begin + range.text.length;
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
function setCaretPosition(ctl, pos){
|
||||
if(ctl.setSelectionRange){
|
||||
ctl.focus();
|
||||
ctl.setSelectionRange(pos,pos);
|
||||
}else if (ctl.createTextRange){
|
||||
var range = ctl.createTextRange();
|
||||
range.collapse(true);
|
||||
range.moveEnd('character', pos);
|
||||
range.moveStart('character', pos);
|
||||
range.select();
|
||||
}
|
||||
};
|
||||
|
||||
//Predefined character definitions
|
||||
var charMap={
|
||||
'9':"[0-9]",
|
||||
'a':"[A-Za-z]",
|
||||
'*':"[A-Za-z0-9]"
|
||||
};
|
||||
|
||||
//Helper method to inject character definitions
|
||||
$.mask={
|
||||
addPlaceholder : function(c,r){
|
||||
charMap[c]=r;
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.unmask=function(){
|
||||
return this.trigger("unmask");
|
||||
};
|
||||
|
||||
//Main Method
|
||||
$.fn.mask = function(mask,settings) {
|
||||
settings = $.extend({
|
||||
placeholder: "_",
|
||||
completed: null
|
||||
}, settings);
|
||||
|
||||
//Build Regex for format validation
|
||||
var reString="^";
|
||||
for(var i=0;i<mask.length;i++)
|
||||
reString+=(charMap[mask.charAt(i)] || ("\\"+mask.charAt(i)));
|
||||
reString+="$";
|
||||
var re = new RegExp(reString);
|
||||
|
||||
return this.each(function(){
|
||||
var input=$(this);
|
||||
var buffer=new Array(mask.length);
|
||||
var locked=new Array(mask.length);
|
||||
|
||||
//Build buffer layout from mask
|
||||
for(var i=0;i<mask.length;i++){
|
||||
locked[i]=charMap[mask.charAt(i)]==null;
|
||||
buffer[i]=locked[i]?mask.charAt(i):settings.placeholder;
|
||||
}
|
||||
|
||||
/*Event Bindings*/
|
||||
function focusEvent(){
|
||||
checkVal();
|
||||
writeBuffer();
|
||||
setTimeout(function(){
|
||||
setCaretPosition(input[0],0);
|
||||
},0);
|
||||
};
|
||||
input.bind("focus",focusEvent);
|
||||
|
||||
input.bind("blur",checkVal);
|
||||
|
||||
//Paste events for IE and Mozilla thanks to Kristinn Sigmundsson
|
||||
if ($.browser.msie)
|
||||
this.onpaste= function(){setTimeout(checkVal,0);};
|
||||
else if ($.browser.mozilla)
|
||||
this.addEventListener('input',checkVal,false);
|
||||
|
||||
var ignore=false; //Variable for ignoring control keys
|
||||
|
||||
function keydownEvent(e){
|
||||
var pos=getCaretPosition(this);
|
||||
var k = e.keyCode;
|
||||
ignore=(k < 16 || (k > 16 && k < 32 ) || (k > 32 && k < 41));
|
||||
|
||||
//delete selection before proceeding
|
||||
if((pos.begin-pos.end)!=0 && (!ignore || k==8 || k==46)){
|
||||
clearBuffer(pos.begin,pos.end);
|
||||
}
|
||||
//backspace and delete get special treatment
|
||||
if(k==8){//backspace
|
||||
while(pos.begin-->=0){
|
||||
if(!locked[pos.begin]){
|
||||
buffer[pos.begin]=settings.placeholder;
|
||||
if($.browser.opera){
|
||||
//Opera won't let you cancel the backspace, so we'll let it backspace over a dummy character.
|
||||
writeBuffer(pos.begin);
|
||||
setCaretPosition(this,pos.begin+1);
|
||||
}else{
|
||||
writeBuffer();
|
||||
setCaretPosition(this,pos.begin);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}else if(k==46){//delete
|
||||
clearBuffer(pos.begin,pos.begin+1);
|
||||
writeBuffer();
|
||||
setCaretPosition(this,pos.begin);
|
||||
return false;
|
||||
}else if (k==27){
|
||||
clearBuffer(0,mask.length);
|
||||
writeBuffer();
|
||||
setCaretPosition(this,0);
|
||||
return false;
|
||||
}
|
||||
|
||||
};
|
||||
input.bind("keydown",keydownEvent);
|
||||
|
||||
function keypressEvent(e){
|
||||
if(ignore){
|
||||
ignore=false;
|
||||
return;
|
||||
}
|
||||
e=e||window.event;
|
||||
var k=e.charCode||e.keyCode||e.which;
|
||||
|
||||
var pos=getCaretPosition(this);
|
||||
var caretPos=pos.begin;
|
||||
|
||||
if(e.ctrlKey || e.altKey){//Ignore
|
||||
return true;
|
||||
}else if ((k>=41 && k<=122) ||k==32 || k>186){//typeable characters
|
||||
while(pos.begin<mask.length){
|
||||
var reString=charMap[mask.charAt(pos.begin)];
|
||||
var match;
|
||||
if(reString){
|
||||
var reChar=new RegExp(reString);
|
||||
match=String.fromCharCode(k).match(reChar);
|
||||
}else{//we're on a mask char, go forward and try again
|
||||
pos.begin+=1;
|
||||
pos.end=pos.begin;
|
||||
caretPos+=1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if(match)
|
||||
buffer[pos.begin]=String.fromCharCode(k);
|
||||
else
|
||||
return false;//reject char
|
||||
|
||||
while(++caretPos<mask.length){//seek forward to next typable position
|
||||
if(!locked[caretPos])
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}else
|
||||
return false;
|
||||
|
||||
writeBuffer();
|
||||
if(settings.completed && caretPos>=buffer.length)
|
||||
settings.completed.call(input);
|
||||
else
|
||||
setCaretPosition(this,caretPos);
|
||||
|
||||
return false;
|
||||
};
|
||||
input.bind("keypress",keypressEvent);
|
||||
|
||||
/*Helper Methods*/
|
||||
function clearBuffer(start,end){
|
||||
for(var i=start;i<end;i++){
|
||||
if(!locked[i])
|
||||
buffer[i]=settings.placeholder;
|
||||
}
|
||||
};
|
||||
|
||||
function writeBuffer(pos){
|
||||
var s="";
|
||||
for(var i=0;i<mask.length;i++){
|
||||
s+=buffer[i];
|
||||
if(i==pos)
|
||||
s+=settings.placeholder;
|
||||
}
|
||||
input.val(s);
|
||||
return s;
|
||||
};
|
||||
|
||||
function checkVal(){
|
||||
//try to place charcters where they belong
|
||||
var test=input.val();
|
||||
var pos=0;
|
||||
for(var i=0;i<mask.length;i++){
|
||||
if(!locked[i]){
|
||||
while(pos++<test.length){
|
||||
//Regex Test each char here.
|
||||
var reChar=new RegExp(charMap[mask.charAt(i)]);
|
||||
if(test.charAt(pos-1).match(reChar)){
|
||||
buffer[i]=test.charAt(pos-1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
var s=writeBuffer();
|
||||
if(!s.match(re)){
|
||||
input.val("");
|
||||
clearBuffer(0,mask.length);
|
||||
}
|
||||
};
|
||||
|
||||
input.one("unmask",function(){
|
||||
input.unbind("focus",focusEvent);
|
||||
input.unbind("blur",checkVal);
|
||||
input.unbind("keydown",keydownEvent);
|
||||
input.unbind("keypress",keypressEvent);
|
||||
if ($.browser.msie)
|
||||
this.onpaste= null;
|
||||
else if ($.browser.mozilla)
|
||||
this.removeEventListener('input',checkVal,false);
|
||||
});
|
||||
|
||||
});
|
||||
};
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,125 @@
|
||||
$(document).ready(function(){
|
||||
|
||||
jQuery.validator.addMethod("password", function( value, element ) {
|
||||
var result = this.optional(element) || value.length >= 6 && /\d/.test(value) && /[a-z]/i.test(value);
|
||||
if (!result) {
|
||||
element.value = "";
|
||||
var validator = this;
|
||||
setTimeout(function() {
|
||||
validator.blockFocusCleanup = true;
|
||||
element.focus();
|
||||
validator.blockFocusCleanup = false;
|
||||
}, 1);
|
||||
}
|
||||
return result;
|
||||
}, "Your password must be at least 6 characters long and contain at least one number and one character.");
|
||||
|
||||
// a custom method making the default value for companyurl ("http://") invalid, without displaying the "invalid url" message
|
||||
jQuery.validator.addMethod("defaultInvalid", function(value, element) {
|
||||
return value != element.defaultValue;
|
||||
}, "");
|
||||
|
||||
jQuery.validator.addMethod("billingRequired", function(value, element) {
|
||||
if ($("#bill_to_co").is(":checked"))
|
||||
return $(element).parents(".subTable").length;
|
||||
return !this.optional(element);
|
||||
}, "");
|
||||
|
||||
jQuery.validator.messages.required = "";
|
||||
$("form").validate({
|
||||
invalidHandler: function(e, validator) {
|
||||
var errors = validator.numberOfInvalids();
|
||||
if (errors) {
|
||||
var message = errors == 1
|
||||
? 'You missed 1 field. It has been highlighted below'
|
||||
: 'You missed ' + errors + ' fields. They have been highlighted below';
|
||||
$("div.error span").html(message);
|
||||
$("div.error").show();
|
||||
} else {
|
||||
$("div.error").hide();
|
||||
}
|
||||
},
|
||||
onkeyup: false,
|
||||
submitHandler: function() {
|
||||
$("div.error").hide();
|
||||
alert("submit! use link below to go to the other step");
|
||||
},
|
||||
messages: {
|
||||
password2: {
|
||||
required: " ",
|
||||
equalTo: "Please enter the same password as above"
|
||||
},
|
||||
email: {
|
||||
required: " ",
|
||||
email: "Please enter a valid email address, example: you@yourdomain.com",
|
||||
remote: jQuery.validator.format("{0} is already taken, please enter a different address.")
|
||||
}
|
||||
},
|
||||
debug:true
|
||||
});
|
||||
|
||||
$(".resize").vjustify();
|
||||
$("div.buttonSubmit").hoverClass("buttonSubmitHover");
|
||||
|
||||
if ($.browser.safari) {
|
||||
$("body").addClass("safari");
|
||||
}
|
||||
|
||||
$("input.phone").mask("(999) 999-9999");
|
||||
$("input.zipcode").mask("99999");
|
||||
var creditcard = $("#creditcard").mask("9999 9999 9999 9999");
|
||||
|
||||
$("#cc_type").change(
|
||||
function() {
|
||||
switch ($(this).val()){
|
||||
case 'amex':
|
||||
creditcard.unmask().mask("9999 999999 99999");
|
||||
break;
|
||||
default:
|
||||
creditcard.unmask().mask("9999 9999 9999 9999");
|
||||
break;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// toggle optional billing address
|
||||
var subTableDiv = $("div.subTableDiv");
|
||||
var toggleCheck = $("input.toggleCheck");
|
||||
toggleCheck.is(":checked")
|
||||
? subTableDiv.hide()
|
||||
: subTableDiv.show();
|
||||
$("input.toggleCheck").click(function() {
|
||||
if (this.checked == true) {
|
||||
subTableDiv.slideUp("medium");
|
||||
$("form").valid();
|
||||
} else {
|
||||
subTableDiv.slideDown("medium");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
$.fn.vjustify = function() {
|
||||
var maxHeight=0;
|
||||
$(".resize").css("height","auto");
|
||||
this.each(function(){
|
||||
if (this.offsetHeight > maxHeight) {
|
||||
maxHeight = this.offsetHeight;
|
||||
}
|
||||
});
|
||||
this.each(function(){
|
||||
$(this).height(maxHeight);
|
||||
if (this.offsetHeight > maxHeight) {
|
||||
$(this).height((maxHeight-(this.offsetHeight-maxHeight)));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.hoverClass = function(classname) {
|
||||
return this.hover(function() {
|
||||
$(this).addClass(classname);
|
||||
}, function() {
|
||||
$(this).removeClass(classname);
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,291 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="title" content="Subscription Signup | Marketo" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="description" content="Marketo Search Marketing application" />
|
||||
<meta name="keywords" content="Marketo, Search Marketing" />
|
||||
<meta name="language" content="en" />
|
||||
<title>Subscription Signup | Marketo</title>
|
||||
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
|
||||
|
||||
<script src="../../lib/jquery.js" type="text/javascript"></script>
|
||||
<script src="../../lib/jquery.metadata.js" type="text/javascript"></script>
|
||||
<script src="../../lib/jquery.ajaxQueue.js" type="text/javascript"></script>
|
||||
<script src="../../lib/jquery.delegate.js" type="text/javascript"></script>
|
||||
<script src="../../jquery.validate.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript" src="jquery.maskedinput.js"></script>
|
||||
<script type="text/javascript" src="mktSignup.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lte IE 6]>
|
||||
<link rel="stylesheet" type="text/css" media="all" href="ie6.css" />
|
||||
<![endif]-->
|
||||
|
||||
|
||||
|
||||
<!-- start page wrapper --><div id="letterbox">
|
||||
|
||||
<!-- start header container -->
|
||||
<div id="header-background">
|
||||
<div class="nav-global-container">
|
||||
|
||||
<div class="login"><a href="https://app.marketo.com"><span></span>Customer Login</a></div>
|
||||
<div class="logo"><a href="#"><img src="images/logo_marketo.gif" width="168" height="73" alt="Marketo" /></a></div>
|
||||
<div class="nav-global">
|
||||
<ul>
|
||||
<li><a href="#" class="nav-g01"><span></span>Home</a></li>
|
||||
<li><a href="#" class="nav-g02"><span></span>Products</a></li>
|
||||
<li><a href="#" class="nav-g04"><span></span>B2B Marketing Resources</a></li>
|
||||
|
||||
<li><a href="#" class="nav-g05"><span></span>About Marketo</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end header container -->
|
||||
<div class="line-grey-tier"></div>
|
||||
|
||||
<!-- start page container 2 div-->
|
||||
<div id="page-container" class="resize"><div id="page-content-inner" class="resize">
|
||||
|
||||
<!-- start col-main -->
|
||||
|
||||
<div id="col-main" class="resize" style="">
|
||||
|
||||
|
||||
|
||||
<!-- start main content -->
|
||||
<div class="main-content resize">
|
||||
|
||||
<div class="action-container" style="display:none;"></div>
|
||||
|
||||
|
||||
<h1>Step 2 of 2</h1>
|
||||
<h2>Billing Information</h2>
|
||||
<p>
|
||||
</p>
|
||||
<br clear="all" />
|
||||
<div>
|
||||
<form id="billingForm" action="" method="get" >
|
||||
|
||||
<div class="error" style="display:none;">
|
||||
<img src="images/warning.gif" alt="Warning!" width="24" height="24" style="float:left; margin: -5px 10px 0px 0px; " />
|
||||
|
||||
<span></span>.<br clear="all" />
|
||||
</div>
|
||||
<table cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td class="label" style="vertical-align: top; padding-top: 8px;">Billing Address:</td>
|
||||
<td class="field" style="font-weight: normal">
|
||||
<div class="billingAddressControl">
|
||||
|
||||
<input type="checkbox" id="bill_to_co" name="bill_to_co" class="toggleCheck" checked="checked" style="width: auto;" tabindex="1" />
|
||||
<label for="bill_to_co" style="cursor:pointer">Same as Company Address</label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="subTable">
|
||||
<td colspan="2">
|
||||
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" class="subTableDiv">
|
||||
<table cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td class="label"><label for="bill_first_name">First Name:</label></td>
|
||||
<td class="field">
|
||||
<input maxlength="40" class="billingRequired" name="bill_first_name" size="20" type="text" tabindex="2" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="bill_last_name">Last Name:</label></td>
|
||||
<td class="field">
|
||||
<input maxlength="40" class="billingRequired" name="bill_last_name" size="20" type="text" tabindex="3" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="bill_email">Email:</label></td>
|
||||
<td class="field">
|
||||
<input maxlength="40" class="billingRequired email" remote="emails.php" name="email" size="20" type="text" tabindex="4" value="" />
|
||||
<div class="formError"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="bill_address1">Address:</label></td>
|
||||
<td class="field">
|
||||
<input maxlength="40" class="billingRequired" name="bill_address1" size="20" type="text" tabindex="5" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"></td>
|
||||
<td class="field">
|
||||
<input maxlength="40" name="bill_address2" size="20" type="text" tabindex="6" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="bill_city">City:</label></td>
|
||||
<td class="field">
|
||||
<input maxlength="40" class="billingRequired" name="bill_city" size="20" type="text" tabindex="7" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="bill_state">State:</label></td>
|
||||
<td class="field">
|
||||
<select id="bill_state" class="billingRequired" name="bill_state" style="margin-left: 4px;" tabindex="8">
|
||||
<option value="">Choose State</option>
|
||||
<option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="label"><label for="bill_zip">Zip:</label></td>
|
||||
<td class="field">
|
||||
<input maxlength="10" class="billingRequired zipcode" name="bill_zip" style="width: 100px" type="text" class="zipcode" tabindex="9" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="label"><label for="bill_phone">Phone:</label></td>
|
||||
<td class="field">
|
||||
<input maxlength="14" class="billingRequired phone" name="bill_phone" style="width: 100px" type="text" class="phone" tabindex="10" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Credit Card Type:</td>
|
||||
<td class="field">
|
||||
<select id="cc_type" class="required" name="cc_type" class="creditCardType" tabindex="11">
|
||||
<option value="">Choose Credit Card</option>
|
||||
<option value="amex">American Express</option>
|
||||
<option value="discover">Discover</option>
|
||||
<option value="mastercard">MasterCard</option>
|
||||
<option value="visa">Visa</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label">Expiration:</td>
|
||||
<td class="field">
|
||||
<select id="cc_exp_month" name="cc_exp_month" title="ExpirationMonth" tabindex="12">
|
||||
<option value="01">01 - Jan</option>
|
||||
<option value="02">02 - Feb</option>
|
||||
<option value="03">03 - Mar</option>
|
||||
<option value="04">04 - Apr</option>
|
||||
<option value="05">05 - May</option>
|
||||
<option value="06">06 - Jun</option>
|
||||
<option value="07">07 - Jul</option>
|
||||
<option value="08">08 - Aug</option>
|
||||
<option value="09">09 - Sep</option>
|
||||
<option value="10">10 - Oct</option>
|
||||
<option value="11">11 - Nov</option>
|
||||
<option value="12">12 - Dec</option>
|
||||
</select>
|
||||
<select id="cc_exp_year" name="cc_exp_year" title="ExpirationYear" tabindex="13">
|
||||
<option value="2007">2007</option>
|
||||
<option value="2008" selected="selected">2008</option>
|
||||
<option value="2009">2009</option>
|
||||
<option value="2010">2010</option>
|
||||
<option value="2011">2011</option>
|
||||
<option value="2012">2012</option>
|
||||
<option value="2013">2013</option>
|
||||
<option value="2014">2014</option>
|
||||
<option value="2015">2015</option>
|
||||
<option value="2016">2016</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="credit_card">Credit Card Number:</label></td>
|
||||
<td class="field">
|
||||
<input maxlength="40" id="creditcard" class="required" name="credit_card" size="20" type="text" tabindex="14" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label for="cc_cvv">Security Code:</label></td>
|
||||
<td class="field">
|
||||
<input id="ccNumber" class="required" maxlength="4" name="cc_cvv" style="width: 30px;" type="text" style="vertical-align: top;" tabindex="16" value="" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<div class="buttonSubmit">
|
||||
<span></span>
|
||||
<input class="formButton" type="submit" value="Finish" style="width: 180px" />
|
||||
</div><br clear="all"/>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
<br clear="all" />
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div> <!-- end main content -->
|
||||
<br />
|
||||
</div> <!-- end col-main -->
|
||||
|
||||
<!-- start left col -->
|
||||
<div id="col-left" class="nav-left-back empty resize" style="position: absolute; min-height: 450px;">
|
||||
<div class="col-left-header-tab" style="position: absolute;">Signup</div>
|
||||
<div class="nav-left">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="left-nav-callout png" style="top: 15px; margin-bottom: 100px;">
|
||||
<img src="images/left-nav-callout-long.png" class="png" alt="" />
|
||||
<h6>Sign Up Process</h6>
|
||||
<a style="background-image: url(images/step1-24.gif); font-weight: normal; text-decoration: none; cursor: default;">Sign up with a valid credit card.</a>
|
||||
<a style="background-image: url(images/step2-24.gif); font-weight: normal; text-decoration: none; cursor: default;">Connect to your Google AdWords account. You will need your AdWords Customer ID.</a>
|
||||
|
||||
<a target="_blank" style="background-image: url(images/step3-24.gif); font-weight: normal; text-decoration: none; cursor: default;">Start your 30 day trial. No payments until trial ends.</a>
|
||||
</div>
|
||||
|
||||
<div class="footerAddress">
|
||||
<b>Marketo Inc.</b><br />
|
||||
1710 S. Amphlett Blvd.<br />
|
||||
San Mateo, CA 94402 USA<br />
|
||||
</div>
|
||||
<br clear="all"/>
|
||||
</div> <!-- end left col -->
|
||||
|
||||
</div> </div> <!-- end page container 2 divs-->
|
||||
|
||||
<div id="footer-container" align="center">
|
||||
<div class="footer">
|
||||
<ul>
|
||||
<li><a href="..">Home</a></li>
|
||||
<li class="line-off"><a href=".">Back to first step</a></li>
|
||||
</ul>
|
||||
</div></div>
|
||||
|
||||
|
||||
|
||||
<!-- end page wrapper -->
|
||||
</div>
|
||||
|
||||
|
||||
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
_uacct = "UA-2623402-1";
|
||||
urchinTracker();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 73 B |
@@ -0,0 +1,10 @@
|
||||
<?php
|
||||
$request = trim(strtolower($_REQUEST['email']));
|
||||
$emails = array('glen@marketo.com', 'george@bush.gov', 'me@god.com', 'aboutface@cooper.com', 'steam@valve.com', 'bill@gates.com');
|
||||
$valid = 'true';
|
||||
foreach($emails as $email) {
|
||||
if( strtolower($email) == $request )
|
||||
$valid = '"Thats already taken."';
|
||||
}
|
||||
echo $valid;
|
||||
?>
|
||||
@@ -0,0 +1,10 @@
|
||||
<?php
|
||||
$request = trim(strtolower($_REQUEST['value']));
|
||||
$emails = array('glen@marketo.com', 'george@bush.gov', 'me@god.com', 'aboutface@cooper.com', 'steam@valve.com', 'bill@gates.com');
|
||||
$valid = 'true';
|
||||
foreach($emails as $email) {
|
||||
if( strtolower($email) == $request )
|
||||
$valid = 'false';
|
||||
}
|
||||
echo $valid;
|
||||
?>
|
||||
@@ -0,0 +1,233 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
||||
<title>Remember The Milk signup form - jQuery Validate plugin demo - with friendly permission from the RTM team</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="milk.css" />
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="../css/chili.css" />
|
||||
|
||||
<script src="../../lib/jquery.js" type="text/javascript"></script>
|
||||
<script src="../../jquery.validate.js" type="text/javascript"></script>
|
||||
|
||||
<style type="text/css">
|
||||
pre { text-align: left; }
|
||||
</style>
|
||||
|
||||
<script id="demo" type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
// validate signup form on keyup and submit
|
||||
var validator = $("#signupform").validate({
|
||||
rules: {
|
||||
firstname: "required",
|
||||
lastname: "required",
|
||||
username: {
|
||||
required: true,
|
||||
minlength: 2,
|
||||
remote: "users.php"
|
||||
},
|
||||
password: {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
password_confirm: {
|
||||
required: true,
|
||||
minlength: 5,
|
||||
equalTo: "#password"
|
||||
},
|
||||
email: {
|
||||
required: true,
|
||||
email: true,
|
||||
remote: "emails.php"
|
||||
},
|
||||
dateformat: "required",
|
||||
terms: "required"
|
||||
},
|
||||
messages: {
|
||||
firstname: "Enter your firstname",
|
||||
lastname: "Enter your lastname",
|
||||
username: {
|
||||
required: "Enter a username",
|
||||
minlength: jQuery.format("Enter at least {0} characters"),
|
||||
remote: jQuery.format("{0} is already in use")
|
||||
},
|
||||
password: {
|
||||
required: "Provide a password",
|
||||
rangelength: jQuery.format("Enter at least {0} characters")
|
||||
},
|
||||
password_confirm: {
|
||||
required: "Repeat your password",
|
||||
minlength: jQuery.format("Enter at least {0} characters"),
|
||||
equalTo: "Enter the same password as above"
|
||||
},
|
||||
email: {
|
||||
required: "Please enter a valid email address",
|
||||
minlength: "Please enter a valid email address",
|
||||
remote: jQuery.format("{0} is already in use")
|
||||
},
|
||||
dateformat: "Choose your preferred dateformat",
|
||||
terms: " "
|
||||
},
|
||||
// the errorPlacement has to take the table layout into account
|
||||
errorPlacement: function(error, element) {
|
||||
if ( element.is(":radio") )
|
||||
error.appendTo( element.parent().next().next() );
|
||||
else if ( element.is(":checkbox") )
|
||||
error.appendTo ( element.next() );
|
||||
else
|
||||
error.appendTo( element.parent().next() );
|
||||
},
|
||||
// specifying a submitHandler prevents the default submit, good for the demo
|
||||
submitHandler: function() {
|
||||
alert("submitted!");
|
||||
},
|
||||
// set this class to error-labels to indicate valid fields
|
||||
success: function(label) {
|
||||
// set as text for IE
|
||||
label.html(" ").addClass("checked");
|
||||
},
|
||||
highlight: function(element, errorClass) {
|
||||
$(element).parent().next().find("." + errorClass).removeClass("checked");
|
||||
}
|
||||
});
|
||||
|
||||
// propose username by combining first- and lastname
|
||||
$("#username").focus(function() {
|
||||
var firstname = $("#firstname").val();
|
||||
var lastname = $("#lastname").val();
|
||||
if(firstname && lastname && !this.value) {
|
||||
this.value = (firstname + "." + lastname).toLowerCase();
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
|
||||
<div id="main">
|
||||
|
||||
<div id="content">
|
||||
|
||||
<div id="header">
|
||||
<div id="headerlogo"><img src="milk.png" alt="Remember The Milk" /></div>
|
||||
</div>
|
||||
<div style="clear: both;"><div></div></div>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<div id="signupbox">
|
||||
<div id="signuptab">
|
||||
<ul>
|
||||
<li id="signupcurrent"><a href=" ">Signup</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="signupwrap">
|
||||
<form id="signupform" autocomplete="off" method="get" action="">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
|
||||
<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
|
||||
<td class="status"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label id="llastname" for="lastname">Last Name</label></td>
|
||||
<td class="field"><input id="lastname" name="lastname" type="text" value="" maxlength="100" /></td>
|
||||
<td class="status"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label id="lusername" for="username">Username</label></td>
|
||||
<td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>
|
||||
<td class="status"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label id="lpassword" for="password">Password</label></td>
|
||||
<td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
|
||||
<td class="status"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label id="lpassword_confirm" for="password_confirm">Confirm Password</label></td>
|
||||
<td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
|
||||
<td class="status"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label id="lemail" for="email">Email Address</label></td>
|
||||
<td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>
|
||||
<td class="status"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label>Which Looks Right</label></td>
|
||||
<td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">
|
||||
<table>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td style="padding-right: 5px;">
|
||||
<input id="dateformat_eu" name="dateformat" type="radio" value="0" />
|
||||
<label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
|
||||
</td>
|
||||
<td style="padding-left: 5px;">
|
||||
<input id="dateformat_am" name="dateformat" type="radio" value="1" />
|
||||
<label id="ldateformat_am" for="dateformat_am">02/14/07</label>
|
||||
</td>
|
||||
<td>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="label"> </td>
|
||||
<td class="field" colspan="2">
|
||||
<div id="termswrap">
|
||||
<input id="terms" type="checkbox" name="terms" />
|
||||
<label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
|
||||
</div> <!-- /termswrap -->
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label"><label id="lsignupsubmit" for="signupsubmit">Signup</label></td>
|
||||
<td class="field" colspan="2">
|
||||
<input id="signupsubmit" name="signup" type="submit" value="Signup" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$("<a href='#'>Show script used on this page</a><br/>").appendTo("body").click(function() {
|
||||
script.toggle();
|
||||
return false;
|
||||
});
|
||||
$("<a href='#'>Show serverside script</a>").appendTo("body").click(function() {
|
||||
serverscript.toggle();
|
||||
return false;
|
||||
});
|
||||
var script = $("<code class='mix'>").html( $("#demo").html() ).wrap("<pre></pre>").parent().hide().appendTo("body");
|
||||
var serverscript;
|
||||
$.get("users.phps", function(response) {
|
||||
serverscript = $("<pre>").hide().html( response ).appendTo("body");
|
||||
})
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="../js/chili-1.7.pack.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 538 B |
@@ -0,0 +1,236 @@
|
||||
/* GENERAL ELEMENTS */
|
||||
|
||||
* { margin: 0; padding: 0; }
|
||||
|
||||
body, input, select, textarea { font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; }
|
||||
body { color: #333; background-color: #fff; text-align: center; }
|
||||
|
||||
a:link { color:#0060BF; text-decoration: underline; }
|
||||
a:visited { color:#0060BF; text-decoration: underline; }
|
||||
a:active { color:#0060BF; text-decoration: underline; }
|
||||
a:hover { color:#000000; text-decoration: underline; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 { font-family: "Lucida Grande", "Lucida Sans Unicode", geneva, verdana, arial, helvetica, sans-serif; font-weight: bold; color: #666; }
|
||||
h1 { font-size: 1.8em; margin: 0em 0em 0.6em 0em; color: #EC5800; }
|
||||
h2 { font-size: 1.5em; margin: 1.2em 0em 0.4em 0em; }
|
||||
h3 { font-size: 1.4em; margin: 1.2em 0em 0.4em 0em; color: #EC5800; }
|
||||
h4 { font-size: 1.2em; margin: 1.2em 0em 0.4em 0em; }
|
||||
h5 { font-size: 1.0em; margin: 1.2em 0em 0.4em 0em; }
|
||||
h6 { font-size: 0.8em; margin: 1.2em 0em 0.4em 0em; }
|
||||
|
||||
img { border: 0px; }
|
||||
|
||||
p { font-size: 1.0em; line-height: 1.3em; margin: 1.2em 0em 1.2em 0em; }
|
||||
li > p { margin-top: 0.2em; }
|
||||
pre { font-family: monospace; font-size: 1.0em; }
|
||||
strong, b { font-weight: bold; }
|
||||
|
||||
/* PAGE ELEMENTS */
|
||||
|
||||
/* Content */
|
||||
|
||||
#content { margin: 0em auto; width: 765px; padding: 10px 0 10px 0; text-align: left; /* Win IE5 */ }
|
||||
.content { margin-left: 4.5em; margin-right: 4.5em; }
|
||||
.content ol, .content ul, .content li { font-size: 1.0em; line-height: 1.3em; margin: 0.2em 0 0.1em 1.5em; }
|
||||
.content ol.terms li { margin-bottom: 1em; }
|
||||
|
||||
/* Header */
|
||||
|
||||
#header { padding-bottom: 10em; }
|
||||
#headerlogo { float: left; }
|
||||
#headerlogo img { width: 188px; height: 83px; }
|
||||
#headernav { float: right; }
|
||||
|
||||
label { font-weight: bold; }
|
||||
#reminders label { font-weight: normal; }
|
||||
|
||||
table.tabbedtable { padding-left: 3em; }
|
||||
table.tabbedtable td { padding-bottom: 5px; }
|
||||
table.tabbedtable label { text-align: right; padding-right: 9px; }
|
||||
.hiddenlabel { visibility: hidden; }
|
||||
.largelink { border: 1px solid #cacaca; padding: 10px; background-color: #E8EEF7; font-size: 1.2em; font-weight: bold; }
|
||||
.largelinkwrap { padding-top: 10px; padding-bottom: 10px; }
|
||||
|
||||
|
||||
|
||||
#signuptab {
|
||||
float:left;
|
||||
width:100%;
|
||||
background:#fff url("bg.gif") repeat-x bottom;
|
||||
font-size: 1.0em;
|
||||
line-height: normal;
|
||||
}
|
||||
#signuptab ul {
|
||||
margin:0;
|
||||
padding: 0px 10px 0px 10px;
|
||||
list-style:none;
|
||||
}
|
||||
#signuptab li {
|
||||
float:left;
|
||||
background:url("left_white.png") no-repeat left top;
|
||||
margin:0;
|
||||
padding:0 3px 0 9px;
|
||||
border-bottom:1px solid #CACACA;
|
||||
}
|
||||
#signuptab a {
|
||||
float:left;
|
||||
display:block;
|
||||
width:.1em;
|
||||
background:url("right_white.png") no-repeat right top;
|
||||
padding:2px 15px 0px 6px;
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
color:#fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#signuptab > ul a {width:auto;}
|
||||
/* Commented Backslash Hack hides rule from IE5-Mac \*/
|
||||
#signuptab a {float:none;}
|
||||
/* End IE5-Mac hack */
|
||||
#signuptab a:hover {
|
||||
color:#333;
|
||||
}
|
||||
#signuptab #signupcurrent {
|
||||
background-position:0 -150px;
|
||||
border-width:0;
|
||||
}
|
||||
#signuptab #signupcurrent a {
|
||||
background-position:100% -150px;
|
||||
padding-bottom:1px;
|
||||
color:#000;
|
||||
}
|
||||
#signuptab li:hover, #signuptab li:hover a {
|
||||
background-position:0% -150px;
|
||||
color:#000;
|
||||
}
|
||||
#signuptab li:hover a {
|
||||
background-position:100% -150px;
|
||||
}
|
||||
|
||||
/* Signup box */
|
||||
|
||||
#signupbox {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 0em auto;
|
||||
}
|
||||
|
||||
#signupwrap {
|
||||
border: 1px solid #CACACA;
|
||||
border-top: 0;
|
||||
text-align: left;
|
||||
padding: 35px 10px 20px 30px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Unsupported browsers */
|
||||
|
||||
.orange_rbcontent { padding: 0.4em; }
|
||||
.orange_rbroundbox { width: 100%; }
|
||||
|
||||
#unsupported {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/*#content {
|
||||
padding-top: 15px;
|
||||
}*/
|
||||
|
||||
/* Signup form */
|
||||
|
||||
#signupform table {
|
||||
border-spacing: 0px;
|
||||
border-collapse: collapse;
|
||||
empty-cells: show;
|
||||
}
|
||||
|
||||
#signupform .label {
|
||||
padding-top: 2px;
|
||||
padding-right: 8px;
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
width: 125px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#signupform .field {
|
||||
padding-bottom: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#signupform .status {
|
||||
padding-top: 2px;
|
||||
padding-left: 8px;
|
||||
vertical-align: top;
|
||||
width: 246px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#signupform .textfield {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#signupform label.error {
|
||||
background:url("../images/unchecked.gif") no-repeat 0px 0px;
|
||||
padding-left: 16px;
|
||||
padding-bottom: 2px;
|
||||
font-weight: bold;
|
||||
color: #EA5200;
|
||||
}
|
||||
|
||||
#signupform label.checked {
|
||||
background:url("../images/checked.gif") no-repeat 0px 0px;
|
||||
}
|
||||
|
||||
#signupform .success_msg {
|
||||
font-weight: bold;
|
||||
color: #0060BF;
|
||||
margin-left: 19px;
|
||||
}
|
||||
|
||||
#signupform #dateformatStatus, #signupform #termsStatus {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
#signupform #dateformat_eu {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#signupform #ldateformat_eu {
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#signupform #dateformat_am {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#signupform #ldateformat_am {
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#signupform #termswrap {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#signupform #terms {
|
||||
vertical-align: middle;
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#signupform #lterms {
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
float: left;
|
||||
display: block;
|
||||
width: 350px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#signupform #lsignupsubmit {
|
||||
visibility: hidden;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,12 @@
|
||||
<?php
|
||||
$request = trim(strtolower($_REQUEST['username']));
|
||||
//sleep(2);
|
||||
usleep(150000);
|
||||
$users = array('asdf', 'Peter', 'Peter2', 'George');
|
||||
$valid = 'true';
|
||||
foreach($users as $user) {
|
||||
if( strtolower($user) == $request )
|
||||
$valid = 'false';
|
||||
}
|
||||
echo $valid;
|
||||
?>
|
||||
@@ -0,0 +1,10 @@
|
||||
<?php
|
||||
$request = trim(strtolower($_REQUEST['value']));
|
||||
$users = array('asdf', 'Peter', 'Peter2', 'George');
|
||||
$valid = 'true';
|
||||
foreach($users as $user) {
|
||||
if( strtolower($user) == $request )
|
||||
$valid = 'false';
|
||||
}
|
||||
echo $valid;
|
||||
?>
|
||||
@@ -0,0 +1,412 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
|
||||
<title>jQuery accordion form with validation</title>
|
||||
|
||||
<link rel="stylesheet" href="../assets/demo_blue.css" type="text/css" />
|
||||
|
||||
<script type="text/javascript" src="../../lib/jquery.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.validate.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.maskedinput-1.0.js"></script>
|
||||
<script type="text/javascript" src="js/ui.core.js"></script>
|
||||
<script type="text/javascript" src="js/ui.accordion.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
$("#recordClientPhone").mask("(999) 999-9999");
|
||||
$("#recordClientPhoneAlt").mask("(999) 999-9999");
|
||||
$("#recordClientZip").mask("99999");
|
||||
$("#recordPropertyZip").mask("99999");
|
||||
$("#recordPurchaseZip").mask("99999");
|
||||
|
||||
// add * to required field labels
|
||||
$('label.required').append(' <strong>*</strong> ');
|
||||
|
||||
// accordion functions
|
||||
var accordion = $("#stepForm").accordion();
|
||||
var current = 0;
|
||||
|
||||
$.validator.addMethod("pageRequired", function(value, element) {
|
||||
var $element = $(element)
|
||||
function match(index) {
|
||||
return current == index && $(element).parents("#sf" + (index + 1)).length;
|
||||
}
|
||||
if (match(0) || match(1) || match(2)) {
|
||||
return !this.optional(element);
|
||||
}
|
||||
return "dependency-mismatch";
|
||||
}, $.validator.messages.required)
|
||||
|
||||
var v = $("#cmaForm").validate({
|
||||
errorClass: "warning",
|
||||
onkeyup: false,
|
||||
onblur: false,
|
||||
submitHandler: function() {
|
||||
alert("Submitted, thanks!");
|
||||
}
|
||||
});
|
||||
|
||||
// back buttons do not need to run validation
|
||||
$("#sf2 .prevbutton").click(function(){
|
||||
accordion.accordion("activate", 0);
|
||||
current = 0;
|
||||
});
|
||||
$("#sf3 .prevbutton").click(function(){
|
||||
accordion.accordion("activate", 1);
|
||||
current = 1;
|
||||
});
|
||||
// these buttons all run the validation, overridden by specific targets above
|
||||
$(".open2").click(function() {
|
||||
if (v.form()) {
|
||||
accordion.accordion("activate", 2);
|
||||
current = 2;
|
||||
}
|
||||
});
|
||||
$(".open1").click(function() {
|
||||
if (v.form()) {
|
||||
accordion.accordion("activate", 1);
|
||||
current = 1;
|
||||
}
|
||||
});
|
||||
$(".open0").click(function() {
|
||||
if (v.form()) {
|
||||
accordion.accordion("activate", 0);
|
||||
current = 0;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="wrap">
|
||||
<div id="main">
|
||||
|
||||
<h1 class="top bottom"><span>Help me</span> Buy and Sell a House</h1>
|
||||
<h2>This form is quick & easy to complete - in only 3 steps!</h2>
|
||||
<form name="cmaForm" id="cmaForm" method="post">
|
||||
<input type="hidden" name="recordRequestPrimaryServiceID" id="recordRequestPrimaryServiceID" value="100" />
|
||||
<input type="hidden" name="recordClientServices" id="recordClientServices" value="1,3" />
|
||||
<ul id="stepForm" class="ui-accordion-container">
|
||||
<li id="sf1"><a href='#' class="ui-accordion-link"> </a>
|
||||
<div>
|
||||
<fieldset><legend> Step 1 of 3 </legend>
|
||||
<div class="requiredNotice">*Required Field</div>
|
||||
<h3 class="stepHeader">Tell us about the property you're buying</h3>
|
||||
<label for="recordPurchaseMetRealtor" class="input required">Are you currently working with a<br />
|
||||
real estate agent? </label> No: <input name="recordPurchaseMetRealtor" type="radio" checked="checked" class="inputclass" value="0" /> Yes: <input name="recordPurchaseMetRealtor" type="radio" class="inputclass pageRequired" value="1" title="Please choose Yes or No" />
|
||||
<div class="formspacer"></div>
|
||||
<label for="recordPurchaseTimeFrameID" class="input required">When would you like to move?</label> <select name="recordPurchaseTimeFrameID" id="recordPurchaseTimeFrameID" class="inputclass pageRequired" title="Select a Time Frame">
|
||||
<option value="">-Select-</option>
|
||||
<option value="1">Less than 3 months</option>
|
||||
<option value="2">3-6 months</option>
|
||||
<option value="3">6-9 months</option>
|
||||
<option value="4">9-12 months</option>
|
||||
<option value="5">Over 12 months</option>
|
||||
</select> <br />
|
||||
<label for="recordPurchasePriceRangeID" class="input required">Purchase price range:</label> <select name="recordPurchasePriceRangeID" id="recordPurchasePriceRangeID" class="inputclass pageRequired" title="Select a Price Range">
|
||||
<option value="">-Select-</option>
|
||||
<option value="1"></option>
|
||||
<option value="2">$75,000 - $100,000</option>
|
||||
<option value="3">$100,000 - $125,000</option>
|
||||
<option value="4">$125,000 - $150,000</option>
|
||||
<option value="5">$150,000 - $200,000</option>
|
||||
<option value="6">$200,000 - $250,000</option>
|
||||
<option value="7">$250,000 - $300,000</option>
|
||||
<option value="8">$300,000 - $350,000</option>
|
||||
<option value="9">$350,000 - $400,000</option>
|
||||
<option value="10">$400,000 - $500,000</option>
|
||||
<option value="11">$500,000 - $700,000</option>
|
||||
<option value="12">$700,000 - $900,000</option>
|
||||
<option value="13">> $900,000</option>
|
||||
</select> <br />
|
||||
<label for="recordPurchaseState" class="input required">State:</label> <select name="recordPurchaseState" id="recordPurchaseState" class="inputclass pageRequired" title="Select a State">
|
||||
<option value="">-Select-</option>
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="DC">Dist of Columbia</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OH">Ohio</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA" selected="selected">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
</select> <br />
|
||||
|
||||
<label for="recordPurchasePropertyTypeID" class="input">Desired property type:</label> <select name="recordPurchasePropertyTypeID" id="recordPurchasePropertyTypeID" class="inputclass" title="Select a Property Type">
|
||||
<option value="">-Select-</option>
|
||||
<option value="1">Single Family Detached</option>
|
||||
<option value="2">Condo</option>
|
||||
<option value="3">Townhouse</option>
|
||||
<option value="4">Rental</option>
|
||||
<option value="5">Multi-Family</option>
|
||||
<option value="6">Vacation Home</option>
|
||||
<option value="7">Other</option>
|
||||
</select> <br />
|
||||
<div class="buttonWrapper"><input name="formNext1" type="button" class="open1 nextbutton" value="Next" alt="Next" title="Next" /></div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</li>
|
||||
<li id="sf2">
|
||||
<a href='#' class="ui-accordion-link">
|
||||
</a>
|
||||
<div>
|
||||
<fieldset><legend> Step 2 of 3 </legend>
|
||||
<div class="requiredNotice">*Required Field</div>
|
||||
<h3 class="stepHeader">Tell us about the property you're selling</h3>
|
||||
<label for="recordClientTimeFrameID" class="input required">When would you like to sell?</label> <select name="recordClientTimeFrameID" id="recordClientTimeFrameID" class="inputclass pageRequired" title="Select a Time Frame">
|
||||
<option value="">-Select-</option>
|
||||
<option value="1">Less than 3 months</option>
|
||||
<option value="2">3-6 months</option>
|
||||
<option value="3">6-9 months</option>
|
||||
<option value="4">9-12 months</option>
|
||||
<option value="5">Over 12 months</option>
|
||||
</select> <br />
|
||||
<label for="recordClientHomeTypeID" class="input required">Type of property you are selling:</label> <select name="recordClientHomeTypeID" id="recordClientHomeTypeID" class="inputclass pageRequired" title="Select a Property Type">
|
||||
<option value="">-Select-</option>
|
||||
<option value="1">Single Family Detached</option>
|
||||
<option value="2">Condo</option>
|
||||
<option value="3">Townhouse</option>
|
||||
<option value="4">Rental</option>
|
||||
<option value="5">Multi-Family</option>
|
||||
<option value="6">Vacation Home</option>
|
||||
<option value="7">Other</option>
|
||||
</select> <br />
|
||||
<label for="recordPropertyAddress1" class="input required">Property Street Address:</label> <input name="recordPropertyAddress1" id="recordPropertyAddress1" class="inputclass pageRequired" title="Street Address is required" maxlength="254" onblur="recordClientAddress1.value = this.value" /><br />
|
||||
<label for="recordPropertyAddress2" class="input">Address (2):</label> <input name="recordPropertyAddress2" id="recordPropertyAddress2" class="inputclass" maxlength="254" onblur="recordClientAddress2.value = this.value" /><br />
|
||||
<label for="recordPropertyCity" class="input required">City:</label> <input name="recordPropertyCity" id="recordPropertyCity" class="inputclass pageRequired" title="City is required" maxlength="254" onblur="recordClientCity.value = this.value" /><br />
|
||||
<label for="recordPropertyState" class="input required">State:</label> <select name="recordPropertyState" id="recordPropertyState" class="inputclass pageRequired" title="Select a State" onchange="recordClientState.value = this.value">
|
||||
<option value="">-Select-</option>
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="DC">Dist of Columbia</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OH">Ohio</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA" selected="selected">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
</select> <br />
|
||||
<label for="recordPropertyZip" class="input required">Zip:</label> <input name="recordPropertyZip" id="recordPropertyZip" class="inputclass pageRequired" title="Zip Code is required" maxlength="254" onblur="recordClientZip.value = this.value" /><br />
|
||||
|
||||
<label for="recordClientPropertyValueID" class="input required">Estimated Market Value:</label> <select name="recordClientPropertyValueID" id="recordClientPropertyValueID" class="inputclass pageRequired" title="Select a Price Range">
|
||||
<option value="">-Select-</option>
|
||||
<option value="1">Less Than $75K</option>
|
||||
<option value="2">$75-$100K</option>
|
||||
<option value="3">$100-$125K</option>
|
||||
<option value="4">$125-$150K</option>
|
||||
<option value="5">$150-$200K</option>
|
||||
<option value="6">$200-$250K</option>
|
||||
<option value="7">$250-$300K</option>
|
||||
<option value="8">$300-$350K</option>
|
||||
<option value="9">$350-$400K</option>
|
||||
<option value="10">$400-$500K</option>
|
||||
<option value="11">$500-$700K</option>
|
||||
<option value="12">$700-$900K</option>
|
||||
<option value="13">Over $900K</option>
|
||||
</select> <br />
|
||||
<label for="recordPropertyBedroomsID" class="input">Bedrooms:</label> <select name="recordPropertyBedroomsID" id="recordPropertyBedroomsID" class="inputclass">
|
||||
<option value="">-Select-</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5+</option>
|
||||
</select> <br />
|
||||
<label for="recordPropertyBathroomsId" class="input">Bathrooms:</label> <select name="recordPropertyBathroomsId" id="recordPropertyBathroomsId" class="inputclass">
|
||||
<option value="">-Select-</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">1.5</option>
|
||||
<option value="3">2</option>
|
||||
<option value="4">2.5</option>
|
||||
<option value="5">3</option>
|
||||
<option value="6">3.5</option>
|
||||
<option value="7">4+</option>
|
||||
</select> <br />
|
||||
<label for="recordPropertyAgeId" class="input">Approx. Age of Home:</label> <select name="recordPropertyAgeId" id="recordPropertyAgeId" class="inputclass">
|
||||
<option value="">-Select-</option>
|
||||
<option value="1">Less Than 1 year</option>
|
||||
<option value="2">1-5 years</option>
|
||||
<option value="3">6-10 years</option>
|
||||
<option value="4">11-15 years</option>
|
||||
<option value="5">More than 15 years</option>
|
||||
</select> <br />
|
||||
<label for="recordPropertySqFt" class="input">Approx. Square Footage:</label> <input name="recordPropertySqFt" id="recordPropertySqFt" class="inputclass" maxlength="254" /><br />
|
||||
<div class="buttonWrapper"><input name="formBack0" type="button" class="open0 prevbutton" value="Back" alt="Back" title="Back" /> <input name="formNext2" type="button" class="open2 nextbutton" value="Next" alt="Next" title="Next" /></div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</li>
|
||||
<li id="sf3">
|
||||
<a href='#' class="ui-accordion-link">
|
||||
</a>
|
||||
<div>
|
||||
<fieldset><legend> Step 3 of 3 </legend>
|
||||
<div class="requiredNotice">*Required Field</div>
|
||||
<h3 class="stepHeader">Tell us about yourself</h3>
|
||||
<label for="recordClientNameFirst" class="input required">First Name:</label> <input name="recordClientNameFirst" id="recordClientNameFirst" class="inputclass pageRequired" title="First Name is required" maxlength="254" /> <br />
|
||||
<label for="recordClientNameLast" class="input required">Last Name:</label> <input name="recordClientNameLast" id="recordClientNameLast" class="inputclass pageRequired" maxlength="254" title="Last Name is required" /> <br />
|
||||
<label for="recordClientAddress1" class="input required">Current Address:</label> <input name="recordClientAddress1" id="recordClientAddress1" class="inputclass pageRequired" maxlength="254" title="Address is required" /> <br />
|
||||
<label for="recordClientAddress2" class="input">Address (2):</label> <input name="recordClientAddress2" id="recordClientAddress2" class="inputclass" maxlength="254" /> <br />
|
||||
<label for="recordClientCity" class="input required">City:</label> <input name="recordClientCity" id="recordClientCity" class="inputclass pageRequired" maxlength="254" title="City is required" /> <br />
|
||||
<label for="recordClientState" class="input required">State:</label> <select name="recordClientState" id="recordClientState" class="inputclass pageRequired" title="Select a State">
|
||||
<option value="">-Select-</option>
|
||||
<option value="AL">Alabama</option>
|
||||
<option value="AK">Alaska</option>
|
||||
<option value="AZ">Arizona</option>
|
||||
<option value="AR">Arkansas</option>
|
||||
<option value="CA">California</option>
|
||||
<option value="CO">Colorado</option>
|
||||
<option value="CT">Connecticut</option>
|
||||
<option value="DE">Delaware</option>
|
||||
<option value="DC">Dist of Columbia</option>
|
||||
<option value="FL">Florida</option>
|
||||
<option value="GA">Georgia</option>
|
||||
<option value="HI">Hawaii</option>
|
||||
<option value="ID">Idaho</option>
|
||||
<option value="IL">Illinois</option>
|
||||
<option value="IN">Indiana</option>
|
||||
<option value="IA">Iowa</option>
|
||||
<option value="KS">Kansas</option>
|
||||
<option value="KY">Kentucky</option>
|
||||
<option value="LA">Louisiana</option>
|
||||
<option value="ME">Maine</option>
|
||||
<option value="MD">Maryland</option>
|
||||
<option value="MA">Massachusetts</option>
|
||||
<option value="MI">Michigan</option>
|
||||
<option value="MN">Minnesota</option>
|
||||
<option value="MS">Mississippi</option>
|
||||
<option value="MO">Missouri</option>
|
||||
<option value="MT">Montana</option>
|
||||
<option value="NE">Nebraska</option>
|
||||
<option value="NV">Nevada</option>
|
||||
<option value="NH">New Hampshire</option>
|
||||
<option value="NJ">New Jersey</option>
|
||||
<option value="NM">New Mexico</option>
|
||||
<option value="NY">New York</option>
|
||||
<option value="NC">North Carolina</option>
|
||||
<option value="ND">North Dakota</option>
|
||||
<option value="OH">Ohio</option>
|
||||
<option value="OK">Oklahoma</option>
|
||||
<option value="OR">Oregon</option>
|
||||
<option value="PA" selected="selected">Pennsylvania</option>
|
||||
<option value="RI">Rhode Island</option>
|
||||
<option value="SC">South Carolina</option>
|
||||
<option value="SD">South Dakota</option>
|
||||
<option value="TN">Tennessee</option>
|
||||
<option value="TX">Texas</option>
|
||||
<option value="UT">Utah</option>
|
||||
<option value="VT">Vermont</option>
|
||||
<option value="VA">Virginia</option>
|
||||
<option value="WA">Washington</option>
|
||||
<option value="WV">West Virginia</option>
|
||||
<option value="WI">Wisconsin</option>
|
||||
<option value="WY">Wyoming</option>
|
||||
</select> <br />
|
||||
<label for="recordClientZip" class="input required">Zip:</label> <input name="recordClientZip" id="recordClientZip" class="inputclass pageRequired" maxlength="12" title="Zip Code is required" /> <br />
|
||||
<label for="recordClientPhone" class="input required">Phone Number:</label> <input name="recordClientPhone" id="recordClientPhone" class="inputclass pageRequired" maxlength="254" title="Phone Number is required" /> <br />
|
||||
<label for="recordClientPhoneAlt" class="input">Alternate Number:</label> <input name="recordClientPhoneAlt" id="recordClientPhoneAlt" class="inputclass" maxlength="254" /> <br />
|
||||
<label for="recordClientEmail" class="input required">Email Address:</label> <input name="recordClientEmail" id="recordClientEmail" class="inputclass pageRequired email" maxlength="254" title="Email address is required" /> <br />
|
||||
<label for="recordClientEmail1" class="input required">Confirm Email:</label> <input name="recordClientEmail1" id="recordClientEmail1" class="inputclass pageRequired" equalTo:"'#recordClientEmail" maxlength="254" title="Please confirm your email address" /> <br />
|
||||
<br />
|
||||
<p class="formDisclaimer">This is a sample form, no information is sent anywhere.</p>
|
||||
<div class="buttonWrapper"><input name="formBack1" type="button" class="open1 prevbutton" value="Back" alt="Back" title="Back" /> <input name="submit" type="submit" id="submit" value="Submit" class="submitbutton" alt="Submit" title="Submit"></div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,246 @@
|
||||
/*
|
||||
* Copyright (c) 2007 Josh Bush (digitalbush.com)
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person
|
||||
* obtaining a copy of this software and associated documentation
|
||||
* files (the "Software"), to deal in the Software without
|
||||
* restriction, including without limitation the rights to use,
|
||||
* copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the
|
||||
* Software is furnished to do so, subject to the following
|
||||
* conditions:
|
||||
|
||||
* The above copyright notice and this permission notice shall be
|
||||
* included in all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
|
||||
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||
* OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Version: 1.0
|
||||
* Release: 2007-07-25
|
||||
*/
|
||||
(function($) {
|
||||
//Helper Functions for Caret positioning
|
||||
function getCaretPosition(ctl){
|
||||
var res = {begin: 0, end: 0 };
|
||||
if (ctl.setSelectionRange){
|
||||
res.begin = ctl.selectionStart;
|
||||
res.end = ctl.selectionEnd;
|
||||
}else if (document.selection && document.selection.createRange){
|
||||
var range = document.selection.createRange();
|
||||
res.begin = 0 - range.duplicate().moveStart('character', -100000);
|
||||
res.end = res.begin + range.text.length;
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
function setCaretPosition(ctl, pos){
|
||||
if(ctl.setSelectionRange){
|
||||
ctl.focus();
|
||||
ctl.setSelectionRange(pos,pos);
|
||||
}else if (ctl.createTextRange){
|
||||
var range = ctl.createTextRange();
|
||||
range.collapse(true);
|
||||
range.moveEnd('character', pos);
|
||||
range.moveStart('character', pos);
|
||||
range.select();
|
||||
}
|
||||
};
|
||||
|
||||
//Predefined character definitions
|
||||
var charMap={
|
||||
'9':"[0-9]",
|
||||
'a':"[A-Za-z]",
|
||||
'*':"[A-Za-z0-9]"
|
||||
};
|
||||
|
||||
//Helper method to inject character definitions
|
||||
$.mask={
|
||||
addPlaceholder : function(c,r){
|
||||
charMap[c]=r;
|
||||
}
|
||||
};
|
||||
|
||||
//Main Method
|
||||
$.fn.mask = function(mask,settings) {
|
||||
settings = $.extend({
|
||||
placeholder: "_",
|
||||
completed: null
|
||||
}, settings);
|
||||
|
||||
//Build Regex for format validation
|
||||
var reString="^";
|
||||
for(var i=0;i<mask.length;i++)
|
||||
reString+=(charMap[mask.charAt(i)] || ("\\"+mask.charAt(i)));
|
||||
reString+="$";
|
||||
var re = new RegExp(reString);
|
||||
|
||||
return this.each(function(){
|
||||
var input=$(this);
|
||||
var buffer=new Array(mask.length);
|
||||
var locked=new Array(mask.length);
|
||||
|
||||
//Build buffer layout from mask
|
||||
for(var i=0;i<mask.length;i++){
|
||||
locked[i]=charMap[mask.charAt(i)]==null;
|
||||
buffer[i]=locked[i]?mask.charAt(i):settings.placeholder;
|
||||
}
|
||||
|
||||
/*Event Bindings*/
|
||||
input.focus(function(){
|
||||
checkVal();
|
||||
writeBuffer();
|
||||
setCaretPosition(this,0);
|
||||
});
|
||||
|
||||
input.blur(checkVal);
|
||||
|
||||
//Paste events for IE and Mozilla thanks to Kristinn Sigmundsson
|
||||
if ($.browser.msie)
|
||||
this.onpaste= function(){setTimeout(checkVal,0);};
|
||||
else if ($.browser.mozilla)
|
||||
this.addEventListener('input',checkVal,false);
|
||||
|
||||
var ignore=false; //Variable for ignoring control keys
|
||||
|
||||
input.keydown(function(e){
|
||||
var pos=getCaretPosition(this);
|
||||
var k = e.keyCode;
|
||||
ignore=(k < 16 || (k > 16 && k < 32 ) || (k > 32 && k < 41));
|
||||
|
||||
//delete selection before proceeding
|
||||
if((pos.begin-pos.end)!=0 && (!ignore || k==8 || k==46)){
|
||||
clearBuffer(pos.begin,pos.end);
|
||||
}
|
||||
//backspace and delete get special treatment
|
||||
if(k==8){//backspace
|
||||
while(pos.begin-->=0){
|
||||
if(!locked[pos.begin]){
|
||||
buffer[pos.begin]=settings.placeholder;
|
||||
if($.browser.opera){
|
||||
//Opera won't let you cancel the backspace, so we'll let it backspace over a dummy character.
|
||||
writeBuffer(pos.begin);
|
||||
setCaretPosition(this,pos.begin+1);
|
||||
}else{
|
||||
writeBuffer();
|
||||
setCaretPosition(this,pos.begin);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}else if(k==46){//delete
|
||||
clearBuffer(pos.begin,pos.begin+1);
|
||||
writeBuffer();
|
||||
setCaretPosition(this,pos.begin);
|
||||
return false;
|
||||
}else if (k==27){
|
||||
clearBuffer(0,mask.length);
|
||||
writeBuffer();
|
||||
setCaretPosition(this,0);
|
||||
return false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
input.keypress(function(e){
|
||||
if(ignore){
|
||||
ignore=false;
|
||||
return;
|
||||
}
|
||||
e=e||window.event;
|
||||
var k=e.charCode||e.keyCode||e.which;
|
||||
|
||||
var pos=getCaretPosition(this);
|
||||
var caretPos=pos.begin;
|
||||
|
||||
if(e.ctrlKey || e.altKey){//Ignore
|
||||
return true;
|
||||
}else if ((k>=41 && k<=122) ||k==32 || k>186){//typeable characters
|
||||
while(pos.begin<mask.length){
|
||||
var reString=charMap[mask.charAt(pos.begin)];
|
||||
var match;
|
||||
if(reString){
|
||||
var reChar=new RegExp(reString);
|
||||
match=String.fromCharCode(k).match(reChar);
|
||||
}else{//we're on a mask char, go forward and try again
|
||||
pos.begin+=1;
|
||||
pos.end=pos.begin;
|
||||
caretPos+=1;
|
||||
continue;
|
||||
}
|
||||
|
||||
if(match)
|
||||
buffer[pos.begin]=String.fromCharCode(k);
|
||||
else
|
||||
return false;//reject char
|
||||
|
||||
while(++caretPos<mask.length){//seek forward to next typable position
|
||||
if(!locked[caretPos])
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}else
|
||||
return false;
|
||||
|
||||
writeBuffer();
|
||||
if(settings.completed && caretPos>=buffer.length)
|
||||
settings.completed.call(input);
|
||||
else
|
||||
setCaretPosition(this,caretPos);
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
/*Helper Methods*/
|
||||
function clearBuffer(start,end){
|
||||
for(var i=start;i<end;i++){
|
||||
if(!locked[i])
|
||||
buffer[i]=settings.placeholder;
|
||||
}
|
||||
};
|
||||
|
||||
function writeBuffer(pos){
|
||||
var s="";
|
||||
for(var i=0;i<mask.length;i++){
|
||||
s+=buffer[i];
|
||||
if(i==pos)
|
||||
s+=settings.placeholder;
|
||||
}
|
||||
input.val(s);
|
||||
return s;
|
||||
};
|
||||
|
||||
function checkVal(){
|
||||
//try to place charcters where they belong
|
||||
var test=input.val();
|
||||
var pos=0;
|
||||
for(var i=0;i<mask.length;i++){
|
||||
if(!locked[i]){
|
||||
while(pos++<test.length){
|
||||
//Regex Test each char here.
|
||||
var reChar=new RegExp(charMap[mask.charAt(i)]);
|
||||
if(test.charAt(pos-1).match(reChar)){
|
||||
buffer[i]=test.charAt(pos-1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
var s=writeBuffer();
|
||||
if(!s.match(re)){
|
||||
input.val("");
|
||||
clearBuffer(0,mask.length);
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,477 @@
|
||||
/*
|
||||
* jQuery UI Accordion 1.7.1
|
||||
*
|
||||
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* and GPL (GPL-LICENSE.txt) licenses.
|
||||
*
|
||||
* http://docs.jquery.com/UI/Accordion
|
||||
*
|
||||
* Depends:
|
||||
* ui.core.js
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
$.widget("ui.accordion", {
|
||||
|
||||
_init: function() {
|
||||
|
||||
var o = this.options, self = this;
|
||||
this.running = 0;
|
||||
|
||||
// if the user set the alwaysOpen option on init
|
||||
// then we need to set the collapsible option
|
||||
// if they set both on init, collapsible will take priority
|
||||
if (o.collapsible == $.ui.accordion.defaults.collapsible &&
|
||||
o.alwaysOpen != $.ui.accordion.defaults.alwaysOpen) {
|
||||
o.collapsible = !o.alwaysOpen;
|
||||
}
|
||||
|
||||
if ( o.navigation ) {
|
||||
var current = this.element.find("a").filter(o.navigationFilter);
|
||||
if ( current.length ) {
|
||||
if ( current.filter(o.header).length ) {
|
||||
this.active = current;
|
||||
} else {
|
||||
this.active = current.parent().parent().prev();
|
||||
current.addClass("ui-accordion-content-active");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.element.addClass("ui-accordion ui-widget ui-helper-reset");
|
||||
|
||||
// in lack of child-selectors in CSS we need to mark top-LIs in a UL-accordion for some IE-fix
|
||||
if (this.element[0].nodeName == "UL") {
|
||||
this.element.children("li").addClass("ui-accordion-li-fix");
|
||||
}
|
||||
|
||||
this.headers = this.element.find(o.header).addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all")
|
||||
.bind("mouseenter.accordion", function(){ $(this).addClass('ui-state-hover'); })
|
||||
.bind("mouseleave.accordion", function(){ $(this).removeClass('ui-state-hover'); })
|
||||
.bind("focus.accordion", function(){ $(this).addClass('ui-state-focus'); })
|
||||
.bind("blur.accordion", function(){ $(this).removeClass('ui-state-focus'); });
|
||||
|
||||
this.headers
|
||||
.next()
|
||||
.addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom");
|
||||
|
||||
this.active = this._findActive(this.active || o.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top");
|
||||
this.active.next().addClass('ui-accordion-content-active');
|
||||
|
||||
//Append icon elements
|
||||
$("<span/>").addClass("ui-icon " + o.icons.header).prependTo(this.headers);
|
||||
this.active.find(".ui-icon").toggleClass(o.icons.header).toggleClass(o.icons.headerSelected);
|
||||
|
||||
// IE7-/Win - Extra vertical space in lists fixed
|
||||
if ($.browser.msie) {
|
||||
this.element.find('a').css('zoom', '1');
|
||||
}
|
||||
|
||||
this.resize();
|
||||
|
||||
//ARIA
|
||||
this.element.attr('role','tablist');
|
||||
|
||||
this.headers
|
||||
.attr('role','tab')
|
||||
.bind('keydown', function(event) { return self._keydown(event); })
|
||||
.next()
|
||||
.attr('role','tabpanel');
|
||||
|
||||
this.headers
|
||||
.not(this.active || "")
|
||||
.attr('aria-expanded','false')
|
||||
.attr("tabIndex", "-1")
|
||||
.next()
|
||||
.hide();
|
||||
|
||||
// make sure at least one header is in the tab order
|
||||
if (!this.active.length) {
|
||||
this.headers.eq(0).attr('tabIndex','0');
|
||||
} else {
|
||||
this.active
|
||||
.attr('aria-expanded','true')
|
||||
.attr('tabIndex', '0');
|
||||
}
|
||||
|
||||
// only need links in taborder for Safari
|
||||
if (!$.browser.safari)
|
||||
this.headers.find('a').attr('tabIndex','-1');
|
||||
|
||||
if (o.event) {
|
||||
this.headers.bind((o.event) + ".accordion", function(event) { return self._clickHandler.call(self, event, this); });
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
var o = this.options;
|
||||
|
||||
this.element
|
||||
.removeClass("ui-accordion ui-widget ui-helper-reset")
|
||||
.removeAttr("role")
|
||||
.unbind('.accordion')
|
||||
.removeData('accordion');
|
||||
|
||||
this.headers
|
||||
.unbind(".accordion")
|
||||
.removeClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-corner-top")
|
||||
.removeAttr("role").removeAttr("aria-expanded").removeAttr("tabindex");
|
||||
|
||||
this.headers.find("a").removeAttr("tabindex");
|
||||
this.headers.children(".ui-icon").remove();
|
||||
var contents = this.headers.next().css("display", "").removeAttr("role").removeClass("ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active");
|
||||
if (o.autoHeight || o.fillHeight) {
|
||||
contents.css("height", "");
|
||||
}
|
||||
},
|
||||
|
||||
_setData: function(key, value) {
|
||||
if(key == 'alwaysOpen') { key = 'collapsible'; value = !value; }
|
||||
$.widget.prototype._setData.apply(this, arguments);
|
||||
},
|
||||
|
||||
_keydown: function(event) {
|
||||
|
||||
var o = this.options, keyCode = $.ui.keyCode;
|
||||
|
||||
if (o.disabled || event.altKey || event.ctrlKey)
|
||||
return;
|
||||
|
||||
var length = this.headers.length;
|
||||
var currentIndex = this.headers.index(event.target);
|
||||
var toFocus = false;
|
||||
|
||||
switch(event.keyCode) {
|
||||
case keyCode.RIGHT:
|
||||
case keyCode.DOWN:
|
||||
toFocus = this.headers[(currentIndex + 1) % length];
|
||||
break;
|
||||
case keyCode.LEFT:
|
||||
case keyCode.UP:
|
||||
toFocus = this.headers[(currentIndex - 1 + length) % length];
|
||||
break;
|
||||
case keyCode.SPACE:
|
||||
case keyCode.ENTER:
|
||||
return this._clickHandler({ target: event.target }, event.target);
|
||||
}
|
||||
|
||||
if (toFocus) {
|
||||
$(event.target).attr('tabIndex','-1');
|
||||
$(toFocus).attr('tabIndex','0');
|
||||
toFocus.focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
},
|
||||
|
||||
resize: function() {
|
||||
|
||||
var o = this.options, maxHeight;
|
||||
|
||||
if (o.fillSpace) {
|
||||
|
||||
if($.browser.msie) { var defOverflow = this.element.parent().css('overflow'); this.element.parent().css('overflow', 'hidden'); }
|
||||
maxHeight = this.element.parent().height();
|
||||
if($.browser.msie) { this.element.parent().css('overflow', defOverflow); }
|
||||
|
||||
this.headers.each(function() {
|
||||
maxHeight -= $(this).outerHeight();
|
||||
});
|
||||
|
||||
var maxPadding = 0;
|
||||
this.headers.next().each(function() {
|
||||
maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height());
|
||||
}).height(Math.max(0, maxHeight - maxPadding))
|
||||
.css('overflow', 'auto');
|
||||
|
||||
} else if ( o.autoHeight ) {
|
||||
maxHeight = 0;
|
||||
this.headers.next().each(function() {
|
||||
maxHeight = Math.max(maxHeight, $(this).outerHeight());
|
||||
}).height(maxHeight);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
activate: function(index) {
|
||||
// call clickHandler with custom event
|
||||
var active = this._findActive(index)[0];
|
||||
this._clickHandler({ target: active }, active);
|
||||
},
|
||||
|
||||
_findActive: function(selector) {
|
||||
return selector
|
||||
? typeof selector == "number"
|
||||
? this.headers.filter(":eq(" + selector + ")")
|
||||
: this.headers.not(this.headers.not(selector))
|
||||
: selector === false
|
||||
? $([])
|
||||
: this.headers.filter(":eq(0)");
|
||||
},
|
||||
|
||||
_clickHandler: function(event, target) {
|
||||
|
||||
var o = this.options;
|
||||
if (o.disabled) return false;
|
||||
|
||||
// called only when using activate(false) to close all parts programmatically
|
||||
if (!event.target && o.collapsible) {
|
||||
this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
|
||||
.find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
|
||||
this.active.next().addClass('ui-accordion-content-active');
|
||||
var toHide = this.active.next(),
|
||||
data = {
|
||||
options: o,
|
||||
newHeader: $([]),
|
||||
oldHeader: o.active,
|
||||
newContent: $([]),
|
||||
oldContent: toHide
|
||||
},
|
||||
toShow = (this.active = $([]));
|
||||
this._toggle(toShow, toHide, data);
|
||||
return false;
|
||||
}
|
||||
|
||||
// get the click target
|
||||
var clicked = $(event.currentTarget || target);
|
||||
var clickedIsActive = clicked[0] == this.active[0];
|
||||
|
||||
// if animations are still active, or the active header is the target, ignore click
|
||||
if (this.running || (!o.collapsible && clickedIsActive)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// switch classes
|
||||
this.active.removeClass("ui-state-active ui-corner-top").addClass("ui-state-default ui-corner-all")
|
||||
.find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
|
||||
this.active.next().addClass('ui-accordion-content-active');
|
||||
if (!clickedIsActive) {
|
||||
clicked.removeClass("ui-state-default ui-corner-all").addClass("ui-state-active ui-corner-top")
|
||||
.find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected);
|
||||
clicked.next().addClass('ui-accordion-content-active');
|
||||
}
|
||||
|
||||
// find elements to show and hide
|
||||
var toShow = clicked.next(),
|
||||
toHide = this.active.next(),
|
||||
data = {
|
||||
options: o,
|
||||
newHeader: clickedIsActive && o.collapsible ? $([]) : clicked,
|
||||
oldHeader: this.active,
|
||||
newContent: clickedIsActive && o.collapsible ? $([]) : toShow.find('> *'),
|
||||
oldContent: toHide.find('> *')
|
||||
},
|
||||
down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
|
||||
|
||||
this.active = clickedIsActive ? $([]) : clicked;
|
||||
this._toggle(toShow, toHide, data, clickedIsActive, down);
|
||||
|
||||
return false;
|
||||
|
||||
},
|
||||
|
||||
_toggle: function(toShow, toHide, data, clickedIsActive, down) {
|
||||
|
||||
var o = this.options, self = this;
|
||||
|
||||
this.toShow = toShow;
|
||||
this.toHide = toHide;
|
||||
this.data = data;
|
||||
|
||||
var complete = function() { if(!self) return; return self._completed.apply(self, arguments); };
|
||||
|
||||
// trigger changestart event
|
||||
this._trigger("changestart", null, this.data);
|
||||
|
||||
// count elements to animate
|
||||
this.running = toHide.size() === 0 ? toShow.size() : toHide.size();
|
||||
|
||||
if (o.animated) {
|
||||
|
||||
var animOptions = {};
|
||||
|
||||
if ( o.collapsible && clickedIsActive ) {
|
||||
animOptions = {
|
||||
toShow: $([]),
|
||||
toHide: toHide,
|
||||
complete: complete,
|
||||
down: down,
|
||||
autoHeight: o.autoHeight || o.fillSpace
|
||||
};
|
||||
} else {
|
||||
animOptions = {
|
||||
toShow: toShow,
|
||||
toHide: toHide,
|
||||
complete: complete,
|
||||
down: down,
|
||||
autoHeight: o.autoHeight || o.fillSpace
|
||||
};
|
||||
}
|
||||
|
||||
if (!o.proxied) {
|
||||
o.proxied = o.animated;
|
||||
}
|
||||
|
||||
if (!o.proxiedDuration) {
|
||||
o.proxiedDuration = o.duration;
|
||||
}
|
||||
|
||||
o.animated = $.isFunction(o.proxied) ?
|
||||
o.proxied(animOptions) : o.proxied;
|
||||
|
||||
o.duration = $.isFunction(o.proxiedDuration) ?
|
||||
o.proxiedDuration(animOptions) : o.proxiedDuration;
|
||||
|
||||
var animations = $.ui.accordion.animations,
|
||||
duration = o.duration,
|
||||
easing = o.animated;
|
||||
|
||||
if (!animations[easing]) {
|
||||
animations[easing] = function(options) {
|
||||
this.slide(options, {
|
||||
easing: easing,
|
||||
duration: duration || 700
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
animations[easing](animOptions);
|
||||
|
||||
} else {
|
||||
|
||||
if (o.collapsible && clickedIsActive) {
|
||||
toShow.toggle();
|
||||
} else {
|
||||
toHide.hide();
|
||||
toShow.show();
|
||||
}
|
||||
|
||||
complete(true);
|
||||
|
||||
}
|
||||
|
||||
toHide.prev().attr('aria-expanded','false').attr("tabIndex", "-1").blur();
|
||||
toShow.prev().attr('aria-expanded','true').attr("tabIndex", "0").focus();
|
||||
|
||||
},
|
||||
|
||||
_completed: function(cancel) {
|
||||
|
||||
var o = this.options;
|
||||
|
||||
this.running = cancel ? 0 : --this.running;
|
||||
if (this.running) return;
|
||||
|
||||
if (o.clearStyle) {
|
||||
this.toShow.add(this.toHide).css({
|
||||
height: "",
|
||||
overflow: ""
|
||||
});
|
||||
}
|
||||
|
||||
this._trigger('change', null, this.data);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
$.extend($.ui.accordion, {
|
||||
version: "1.7.1",
|
||||
defaults: {
|
||||
active: null,
|
||||
alwaysOpen: true, //deprecated, use collapsible
|
||||
animated: 'slide',
|
||||
autoHeight: true,
|
||||
clearStyle: false,
|
||||
collapsible: false,
|
||||
event: "click",
|
||||
fillSpace: false,
|
||||
header: "> li > :first-child,> :not(li):even",
|
||||
icons: {
|
||||
header: "ui-icon-triangle-1-e",
|
||||
headerSelected: "ui-icon-triangle-1-s"
|
||||
},
|
||||
navigation: false,
|
||||
navigationFilter: function() {
|
||||
return this.href.toLowerCase() == location.href.toLowerCase();
|
||||
}
|
||||
},
|
||||
animations: {
|
||||
slide: function(options, additions) {
|
||||
options = $.extend({
|
||||
easing: "swing",
|
||||
duration: 300
|
||||
}, options, additions);
|
||||
if ( !options.toHide.size() ) {
|
||||
options.toShow.animate({height: "show"}, options);
|
||||
return;
|
||||
}
|
||||
if ( !options.toShow.size() ) {
|
||||
options.toHide.animate({height: "hide"}, options);
|
||||
return;
|
||||
}
|
||||
var overflow = options.toShow.css('overflow'),
|
||||
percentDone,
|
||||
showProps = {},
|
||||
hideProps = {},
|
||||
fxAttrs = [ "height", "paddingTop", "paddingBottom" ],
|
||||
originalWidth;
|
||||
// fix width before calculating height of hidden element
|
||||
var s = options.toShow;
|
||||
originalWidth = s[0].style.width;
|
||||
s.width( parseInt(s.parent().width(),10) - parseInt(s.css("paddingLeft"),10) - parseInt(s.css("paddingRight"),10) - (parseInt(s.css("borderLeftWidth"),10) || 0) - (parseInt(s.css("borderRightWidth"),10) || 0) );
|
||||
|
||||
$.each(fxAttrs, function(i, prop) {
|
||||
hideProps[prop] = 'hide';
|
||||
|
||||
var parts = ('' + $.css(options.toShow[0], prop)).match(/^([\d+-.]+)(.*)$/);
|
||||
showProps[prop] = {
|
||||
value: parts[1],
|
||||
unit: parts[2] || 'px'
|
||||
};
|
||||
});
|
||||
options.toShow.css({ height: 0, overflow: 'hidden' }).show();
|
||||
options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate(hideProps,{
|
||||
step: function(now, settings) {
|
||||
// only calculate the percent when animating height
|
||||
// IE gets very inconsistent results when animating elements
|
||||
// with small values, which is common for padding
|
||||
if (settings.prop == 'height') {
|
||||
percentDone = (settings.now - settings.start) / (settings.end - settings.start);
|
||||
}
|
||||
|
||||
options.toShow[0].style[settings.prop] =
|
||||
(percentDone * showProps[settings.prop].value) + showProps[settings.prop].unit;
|
||||
},
|
||||
duration: options.duration,
|
||||
easing: options.easing,
|
||||
complete: function() {
|
||||
if ( !options.autoHeight ) {
|
||||
options.toShow.css("height", "");
|
||||
}
|
||||
options.toShow.css("width", originalWidth);
|
||||
options.toShow.css({overflow: overflow});
|
||||
options.complete();
|
||||
}
|
||||
});
|
||||
},
|
||||
bounceslide: function(options) {
|
||||
this.slide(options, {
|
||||
easing: options.down ? "easeOutBounce" : "swing",
|
||||
duration: options.down ? 1000 : 200
|
||||
});
|
||||
},
|
||||
easeslide: function(options) {
|
||||
this.slide(options, {
|
||||
easing: "easeinout",
|
||||
duration: 700
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,519 @@
|
||||
/*
|
||||
* jQuery UI 1.7.1
|
||||
*
|
||||
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* and GPL (GPL-LICENSE.txt) licenses.
|
||||
*
|
||||
* http://docs.jquery.com/UI
|
||||
*/
|
||||
;jQuery.ui || (function($) {
|
||||
|
||||
var _remove = $.fn.remove,
|
||||
isFF2 = $.browser.mozilla && (parseFloat($.browser.version) < 1.9);
|
||||
|
||||
//Helper functions and ui object
|
||||
$.ui = {
|
||||
version: "1.7.1",
|
||||
|
||||
// $.ui.plugin is deprecated. Use the proxy pattern instead.
|
||||
plugin: {
|
||||
add: function(module, option, set) {
|
||||
var proto = $.ui[module].prototype;
|
||||
for(var i in set) {
|
||||
proto.plugins[i] = proto.plugins[i] || [];
|
||||
proto.plugins[i].push([option, set[i]]);
|
||||
}
|
||||
},
|
||||
call: function(instance, name, args) {
|
||||
var set = instance.plugins[name];
|
||||
if(!set || !instance.element[0].parentNode) { return; }
|
||||
|
||||
for (var i = 0; i < set.length; i++) {
|
||||
if (instance.options[set[i][0]]) {
|
||||
set[i][1].apply(instance.element, args);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
contains: function(a, b) {
|
||||
return document.compareDocumentPosition
|
||||
? a.compareDocumentPosition(b) & 16
|
||||
: a !== b && a.contains(b);
|
||||
},
|
||||
|
||||
hasScroll: function(el, a) {
|
||||
|
||||
//If overflow is hidden, the element might have extra content, but the user wants to hide it
|
||||
if ($(el).css('overflow') == 'hidden') { return false; }
|
||||
|
||||
var scroll = (a && a == 'left') ? 'scrollLeft' : 'scrollTop',
|
||||
has = false;
|
||||
|
||||
if (el[scroll] > 0) { return true; }
|
||||
|
||||
// TODO: determine which cases actually cause this to happen
|
||||
// if the element doesn't have the scroll set, see if it's possible to
|
||||
// set the scroll
|
||||
el[scroll] = 1;
|
||||
has = (el[scroll] > 0);
|
||||
el[scroll] = 0;
|
||||
return has;
|
||||
},
|
||||
|
||||
isOverAxis: function(x, reference, size) {
|
||||
//Determines when x coordinate is over "b" element axis
|
||||
return (x > reference) && (x < (reference + size));
|
||||
},
|
||||
|
||||
isOver: function(y, x, top, left, height, width) {
|
||||
//Determines when x, y coordinates is over "b" element
|
||||
return $.ui.isOverAxis(y, top, height) && $.ui.isOverAxis(x, left, width);
|
||||
},
|
||||
|
||||
keyCode: {
|
||||
BACKSPACE: 8,
|
||||
CAPS_LOCK: 20,
|
||||
COMMA: 188,
|
||||
CONTROL: 17,
|
||||
DELETE: 46,
|
||||
DOWN: 40,
|
||||
END: 35,
|
||||
ENTER: 13,
|
||||
ESCAPE: 27,
|
||||
HOME: 36,
|
||||
INSERT: 45,
|
||||
LEFT: 37,
|
||||
NUMPAD_ADD: 107,
|
||||
NUMPAD_DECIMAL: 110,
|
||||
NUMPAD_DIVIDE: 111,
|
||||
NUMPAD_ENTER: 108,
|
||||
NUMPAD_MULTIPLY: 106,
|
||||
NUMPAD_SUBTRACT: 109,
|
||||
PAGE_DOWN: 34,
|
||||
PAGE_UP: 33,
|
||||
PERIOD: 190,
|
||||
RIGHT: 39,
|
||||
SHIFT: 16,
|
||||
SPACE: 32,
|
||||
TAB: 9,
|
||||
UP: 38
|
||||
}
|
||||
};
|
||||
|
||||
// WAI-ARIA normalization
|
||||
if (isFF2) {
|
||||
var attr = $.attr,
|
||||
removeAttr = $.fn.removeAttr,
|
||||
ariaNS = "http://www.w3.org/2005/07/aaa",
|
||||
ariaState = /^aria-/,
|
||||
ariaRole = /^wairole:/;
|
||||
|
||||
$.attr = function(elem, name, value) {
|
||||
var set = value !== undefined;
|
||||
|
||||
return (name == 'role'
|
||||
? (set
|
||||
? attr.call(this, elem, name, "wairole:" + value)
|
||||
: (attr.apply(this, arguments) || "").replace(ariaRole, ""))
|
||||
: (ariaState.test(name)
|
||||
? (set
|
||||
? elem.setAttributeNS(ariaNS,
|
||||
name.replace(ariaState, "aaa:"), value)
|
||||
: attr.call(this, elem, name.replace(ariaState, "aaa:")))
|
||||
: attr.apply(this, arguments)));
|
||||
};
|
||||
|
||||
$.fn.removeAttr = function(name) {
|
||||
return (ariaState.test(name)
|
||||
? this.each(function() {
|
||||
this.removeAttributeNS(ariaNS, name.replace(ariaState, ""));
|
||||
}) : removeAttr.call(this, name));
|
||||
};
|
||||
}
|
||||
|
||||
//jQuery plugins
|
||||
$.fn.extend({
|
||||
remove: function() {
|
||||
// Safari has a native remove event which actually removes DOM elements,
|
||||
// so we have to use triggerHandler instead of trigger (#3037).
|
||||
$("*", this).add(this).each(function() {
|
||||
$(this).triggerHandler("remove");
|
||||
});
|
||||
return _remove.apply(this, arguments );
|
||||
},
|
||||
|
||||
enableSelection: function() {
|
||||
return this
|
||||
.attr('unselectable', 'off')
|
||||
.css('MozUserSelect', '')
|
||||
.unbind('selectstart.ui');
|
||||
},
|
||||
|
||||
disableSelection: function() {
|
||||
return this
|
||||
.attr('unselectable', 'on')
|
||||
.css('MozUserSelect', 'none')
|
||||
.bind('selectstart.ui', function() { return false; });
|
||||
},
|
||||
|
||||
scrollParent: function() {
|
||||
var scrollParent;
|
||||
if(($.browser.msie && (/(static|relative)/).test(this.css('position'))) || (/absolute/).test(this.css('position'))) {
|
||||
scrollParent = this.parents().filter(function() {
|
||||
return (/(relative|absolute|fixed)/).test($.curCSS(this,'position',1)) && (/(auto|scroll)/).test($.curCSS(this,'overflow',1)+$.curCSS(this,'overflow-y',1)+$.curCSS(this,'overflow-x',1));
|
||||
}).eq(0);
|
||||
} else {
|
||||
scrollParent = this.parents().filter(function() {
|
||||
return (/(auto|scroll)/).test($.curCSS(this,'overflow',1)+$.curCSS(this,'overflow-y',1)+$.curCSS(this,'overflow-x',1));
|
||||
}).eq(0);
|
||||
}
|
||||
|
||||
return (/fixed/).test(this.css('position')) || !scrollParent.length ? $(document) : scrollParent;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//Additional selectors
|
||||
$.extend($.expr[':'], {
|
||||
data: function(elem, i, match) {
|
||||
return !!$.data(elem, match[3]);
|
||||
},
|
||||
|
||||
focusable: function(element) {
|
||||
var nodeName = element.nodeName.toLowerCase(),
|
||||
tabIndex = $.attr(element, 'tabindex');
|
||||
return (/input|select|textarea|button|object/.test(nodeName)
|
||||
? !element.disabled
|
||||
: 'a' == nodeName || 'area' == nodeName
|
||||
? element.href || !isNaN(tabIndex)
|
||||
: !isNaN(tabIndex))
|
||||
// the element and all of its ancestors must be visible
|
||||
// the browser may report that the area is hidden
|
||||
&& !$(element)['area' == nodeName ? 'parents' : 'closest'](':hidden').length;
|
||||
},
|
||||
|
||||
tabbable: function(element) {
|
||||
var tabIndex = $.attr(element, 'tabindex');
|
||||
return (isNaN(tabIndex) || tabIndex >= 0) && $(element).is(':focusable');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// $.widget is a factory to create jQuery plugins
|
||||
// taking some boilerplate code out of the plugin code
|
||||
function getter(namespace, plugin, method, args) {
|
||||
function getMethods(type) {
|
||||
var methods = $[namespace][plugin][type] || [];
|
||||
return (typeof methods == 'string' ? methods.split(/,?\s+/) : methods);
|
||||
}
|
||||
|
||||
var methods = getMethods('getter');
|
||||
if (args.length == 1 && typeof args[0] == 'string') {
|
||||
methods = methods.concat(getMethods('getterSetter'));
|
||||
}
|
||||
return ($.inArray(method, methods) != -1);
|
||||
}
|
||||
|
||||
$.widget = function(name, prototype) {
|
||||
var namespace = name.split(".")[0];
|
||||
name = name.split(".")[1];
|
||||
|
||||
// create plugin method
|
||||
$.fn[name] = function(options) {
|
||||
var isMethodCall = (typeof options == 'string'),
|
||||
args = Array.prototype.slice.call(arguments, 1);
|
||||
|
||||
// prevent calls to internal methods
|
||||
if (isMethodCall && options.substring(0, 1) == '_') {
|
||||
return this;
|
||||
}
|
||||
|
||||
// handle getter methods
|
||||
if (isMethodCall && getter(namespace, name, options, args)) {
|
||||
var instance = $.data(this[0], name);
|
||||
return (instance ? instance[options].apply(instance, args)
|
||||
: undefined);
|
||||
}
|
||||
|
||||
// handle initialization and non-getter methods
|
||||
return this.each(function() {
|
||||
var instance = $.data(this, name);
|
||||
|
||||
// constructor
|
||||
(!instance && !isMethodCall &&
|
||||
$.data(this, name, new $[namespace][name](this, options))._init());
|
||||
|
||||
// method call
|
||||
(instance && isMethodCall && $.isFunction(instance[options]) &&
|
||||
instance[options].apply(instance, args));
|
||||
});
|
||||
};
|
||||
|
||||
// create widget constructor
|
||||
$[namespace] = $[namespace] || {};
|
||||
$[namespace][name] = function(element, options) {
|
||||
var self = this;
|
||||
|
||||
this.namespace = namespace;
|
||||
this.widgetName = name;
|
||||
this.widgetEventPrefix = $[namespace][name].eventPrefix || name;
|
||||
this.widgetBaseClass = namespace + '-' + name;
|
||||
|
||||
this.options = $.extend({},
|
||||
$.widget.defaults,
|
||||
$[namespace][name].defaults,
|
||||
$.metadata && $.metadata.get(element)[name],
|
||||
options);
|
||||
|
||||
this.element = $(element)
|
||||
.bind('setData.' + name, function(event, key, value) {
|
||||
if (event.target == element) {
|
||||
return self._setData(key, value);
|
||||
}
|
||||
})
|
||||
.bind('getData.' + name, function(event, key) {
|
||||
if (event.target == element) {
|
||||
return self._getData(key);
|
||||
}
|
||||
})
|
||||
.bind('remove', function() {
|
||||
return self.destroy();
|
||||
});
|
||||
};
|
||||
|
||||
// add widget prototype
|
||||
$[namespace][name].prototype = $.extend({}, $.widget.prototype, prototype);
|
||||
|
||||
// TODO: merge getter and getterSetter properties from widget prototype
|
||||
// and plugin prototype
|
||||
$[namespace][name].getterSetter = 'option';
|
||||
};
|
||||
|
||||
$.widget.prototype = {
|
||||
_init: function() {},
|
||||
destroy: function() {
|
||||
this.element.removeData(this.widgetName)
|
||||
.removeClass(this.widgetBaseClass + '-disabled' + ' ' + this.namespace + '-state-disabled')
|
||||
.removeAttr('aria-disabled');
|
||||
},
|
||||
|
||||
option: function(key, value) {
|
||||
var options = key,
|
||||
self = this;
|
||||
|
||||
if (typeof key == "string") {
|
||||
if (value === undefined) {
|
||||
return this._getData(key);
|
||||
}
|
||||
options = {};
|
||||
options[key] = value;
|
||||
}
|
||||
|
||||
$.each(options, function(key, value) {
|
||||
self._setData(key, value);
|
||||
});
|
||||
},
|
||||
_getData: function(key) {
|
||||
return this.options[key];
|
||||
},
|
||||
_setData: function(key, value) {
|
||||
this.options[key] = value;
|
||||
|
||||
if (key == 'disabled') {
|
||||
this.element
|
||||
[value ? 'addClass' : 'removeClass'](
|
||||
this.widgetBaseClass + '-disabled' + ' ' +
|
||||
this.namespace + '-state-disabled')
|
||||
.attr("aria-disabled", value);
|
||||
}
|
||||
},
|
||||
|
||||
enable: function() {
|
||||
this._setData('disabled', false);
|
||||
},
|
||||
disable: function() {
|
||||
this._setData('disabled', true);
|
||||
},
|
||||
|
||||
_trigger: function(type, event, data) {
|
||||
var callback = this.options[type],
|
||||
eventName = (type == this.widgetEventPrefix
|
||||
? type : this.widgetEventPrefix + type);
|
||||
|
||||
event = $.Event(event);
|
||||
event.type = eventName;
|
||||
|
||||
// copy original event properties over to the new event
|
||||
// this would happen if we could call $.event.fix instead of $.Event
|
||||
// but we don't have a way to force an event to be fixed multiple times
|
||||
if (event.originalEvent) {
|
||||
for (var i = $.event.props.length, prop; i;) {
|
||||
prop = $.event.props[--i];
|
||||
event[prop] = event.originalEvent[prop];
|
||||
}
|
||||
}
|
||||
|
||||
this.element.trigger(event, data);
|
||||
|
||||
return !($.isFunction(callback) && callback.call(this.element[0], event, data) === false
|
||||
|| event.isDefaultPrevented());
|
||||
}
|
||||
};
|
||||
|
||||
$.widget.defaults = {
|
||||
disabled: false
|
||||
};
|
||||
|
||||
|
||||
/** Mouse Interaction Plugin **/
|
||||
|
||||
$.ui.mouse = {
|
||||
_mouseInit: function() {
|
||||
var self = this;
|
||||
|
||||
this.element
|
||||
.bind('mousedown.'+this.widgetName, function(event) {
|
||||
return self._mouseDown(event);
|
||||
})
|
||||
.bind('click.'+this.widgetName, function(event) {
|
||||
if(self._preventClickEvent) {
|
||||
self._preventClickEvent = false;
|
||||
event.stopImmediatePropagation();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent text selection in IE
|
||||
if ($.browser.msie) {
|
||||
this._mouseUnselectable = this.element.attr('unselectable');
|
||||
this.element.attr('unselectable', 'on');
|
||||
}
|
||||
|
||||
this.started = false;
|
||||
},
|
||||
|
||||
// TODO: make sure destroying one instance of mouse doesn't mess with
|
||||
// other instances of mouse
|
||||
_mouseDestroy: function() {
|
||||
this.element.unbind('.'+this.widgetName);
|
||||
|
||||
// Restore text selection in IE
|
||||
($.browser.msie
|
||||
&& this.element.attr('unselectable', this._mouseUnselectable));
|
||||
},
|
||||
|
||||
_mouseDown: function(event) {
|
||||
// don't let more than one widget handle mouseStart
|
||||
// TODO: figure out why we have to use originalEvent
|
||||
event.originalEvent = event.originalEvent || {};
|
||||
if (event.originalEvent.mouseHandled) { return; }
|
||||
|
||||
// we may have missed mouseup (out of window)
|
||||
(this._mouseStarted && this._mouseUp(event));
|
||||
|
||||
this._mouseDownEvent = event;
|
||||
|
||||
var self = this,
|
||||
btnIsLeft = (event.which == 1),
|
||||
elIsCancel = (typeof this.options.cancel == "string" ? $(event.target).parents().add(event.target).filter(this.options.cancel).length : false);
|
||||
if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
this.mouseDelayMet = !this.options.delay;
|
||||
if (!this.mouseDelayMet) {
|
||||
this._mouseDelayTimer = setTimeout(function() {
|
||||
self.mouseDelayMet = true;
|
||||
}, this.options.delay);
|
||||
}
|
||||
|
||||
if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
|
||||
this._mouseStarted = (this._mouseStart(event) !== false);
|
||||
if (!this._mouseStarted) {
|
||||
event.preventDefault();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// these delegates are required to keep context
|
||||
this._mouseMoveDelegate = function(event) {
|
||||
return self._mouseMove(event);
|
||||
};
|
||||
this._mouseUpDelegate = function(event) {
|
||||
return self._mouseUp(event);
|
||||
};
|
||||
$(document)
|
||||
.bind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
|
||||
.bind('mouseup.'+this.widgetName, this._mouseUpDelegate);
|
||||
|
||||
// preventDefault() is used to prevent the selection of text here -
|
||||
// however, in Safari, this causes select boxes not to be selectable
|
||||
// anymore, so this fix is needed
|
||||
($.browser.safari || event.preventDefault());
|
||||
|
||||
event.originalEvent.mouseHandled = true;
|
||||
return true;
|
||||
},
|
||||
|
||||
_mouseMove: function(event) {
|
||||
// IE mouseup check - mouseup happened when mouse was out of window
|
||||
if ($.browser.msie && !event.button) {
|
||||
return this._mouseUp(event);
|
||||
}
|
||||
|
||||
if (this._mouseStarted) {
|
||||
this._mouseDrag(event);
|
||||
return event.preventDefault();
|
||||
}
|
||||
|
||||
if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
|
||||
this._mouseStarted =
|
||||
(this._mouseStart(this._mouseDownEvent, event) !== false);
|
||||
(this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));
|
||||
}
|
||||
|
||||
return !this._mouseStarted;
|
||||
},
|
||||
|
||||
_mouseUp: function(event) {
|
||||
$(document)
|
||||
.unbind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
|
||||
.unbind('mouseup.'+this.widgetName, this._mouseUpDelegate);
|
||||
|
||||
if (this._mouseStarted) {
|
||||
this._mouseStarted = false;
|
||||
this._preventClickEvent = (event.target == this._mouseDownEvent.target);
|
||||
this._mouseStop(event);
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
_mouseDistanceMet: function(event) {
|
||||
return (Math.max(
|
||||
Math.abs(this._mouseDownEvent.pageX - event.pageX),
|
||||
Math.abs(this._mouseDownEvent.pageY - event.pageY)
|
||||
) >= this.options.distance
|
||||
);
|
||||
},
|
||||
|
||||
_mouseDelayMet: function(event) {
|
||||
return this.mouseDelayMet;
|
||||
},
|
||||
|
||||
// These are placeholder methods, to be overriden by extending plugin
|
||||
_mouseStart: function(event) {},
|
||||
_mouseDrag: function(event) {},
|
||||
_mouseStop: function(event) {},
|
||||
_mouseCapture: function(event) { return true; }
|
||||
};
|
||||
|
||||
$.ui.mouse.defaults = {
|
||||
cancel: null,
|
||||
distance: 1,
|
||||
delay: 0
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,705 @@
|
||||
/********************************************
|
||||
AUTHOR: Erwin Aligam
|
||||
WEBSITE: http://www.styleshout.com/
|
||||
TEMPLATE NAME: Techmania 1.0
|
||||
TEMPLATE CODE: S-0003
|
||||
VERSION: 1.1
|
||||
*******************************************/
|
||||
/********************************************
|
||||
HTML ELEMENTS
|
||||
********************************************/ /* Top elements */
|
||||
/** { margin:0; padding: 0; }*/
|
||||
body {
|
||||
background-color: #000;
|
||||
color: #555;
|
||||
font: 78%/ 1.6 Verdana, 'Trebuchet MS', arial, sans-serif;
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
/* links */
|
||||
a {
|
||||
color: #213540;
|
||||
background: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #3e4255;
|
||||
text-decoration: underline;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
/* headers */
|
||||
h1,h2,h3 {
|
||||
font-family: 'Trebuchet MS', Arial, sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
margin: 10px 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3em;
|
||||
text-transform: uppercase;
|
||||
color: #339900;
|
||||
margin: 10px 15px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1em;
|
||||
color: #333;
|
||||
margin: 16px 0 0 18px;
|
||||
}
|
||||
|
||||
h1,h2,h3 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.4em;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
p.error {
|
||||
color: #CC0033;
|
||||
}
|
||||
|
||||
ul,ol {
|
||||
margin: 10px 6px;
|
||||
padding: 0 15px;
|
||||
color: #006699;
|
||||
}
|
||||
|
||||
ul span,ol span {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* images */
|
||||
img {
|
||||
border: 2px solid #CCC;
|
||||
}
|
||||
|
||||
img.float-right {
|
||||
margin: 5px 0px 10px 10px;
|
||||
}
|
||||
|
||||
img.float-left {
|
||||
margin: 5px 10px 10px 0px;
|
||||
}
|
||||
|
||||
code {
|
||||
margin: 5px 0;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
display: block;
|
||||
overflow: auto;
|
||||
font: 500 1em/ 1.5em 'Lucida Console', 'courier new', monospace;
|
||||
/* white-space: pre; */
|
||||
background: #FAFAFA;
|
||||
border: 1px solid #EAEAEA;
|
||||
border-left: 5px solid #72A545;
|
||||
}
|
||||
|
||||
acronym {
|
||||
cursor: help;
|
||||
border-bottom: 1px solid #777;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 15px;
|
||||
padding: 0 0 0 32px;
|
||||
background: #FAFAFA url(quote.gif) no-repeat 5px 10px !important;
|
||||
background-position: 8px 10px;
|
||||
border: 1px solid #EAEAEA;
|
||||
border-left: 5px solid #72A545;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* form elements */
|
||||
fieldset {
|
||||
margin: 12px 12px 18px;
|
||||
padding-left: 6px;
|
||||
border: 1px solid #004080;
|
||||
color: #006699;
|
||||
}
|
||||
|
||||
fieldset fieldset {
|
||||
border: 1px solid #9ea190;
|
||||
margin: 17px 14px;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 10px 15px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin: 5px 3px 0 0;
|
||||
width: 160px;
|
||||
text-align: right;
|
||||
float: left;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: 1.2em;
|
||||
padding: 0 12px;
|
||||
font-weight: 900;
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
fieldset fieldset legend {
|
||||
font-size: 1em;
|
||||
color: #1a2129;
|
||||
padding: 0 18px;
|
||||
margin-left: 75px;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 3px;
|
||||
margin: 4px 0;
|
||||
border: 1px solid #CFCED3;
|
||||
font: normal 1em Verdana, sans-serif;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 400px;
|
||||
padding: 4px;
|
||||
font: normal 1em Verdana, sans-serif;
|
||||
border: 1px solid #eee;
|
||||
height: 100px;
|
||||
display: block;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input.button {
|
||||
margin: 0;
|
||||
font: bold 12px Arial, Sans-serif;
|
||||
border: 1px solid #EAEAEA;
|
||||
padding: 3px 4px;
|
||||
background: #CCC url(buttonbg.gif) repeat-x left bottom;
|
||||
color: #333; /* color: #339900; */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input.submitbutton {
|
||||
background-color: #006699;
|
||||
color: #FFF;
|
||||
background-image: none;
|
||||
font-weight: 900;
|
||||
border: 1px solid #EAEAEA;
|
||||
margin: 0 0 0 200px;
|
||||
}
|
||||
|
||||
/* search */
|
||||
#sidebar #search {
|
||||
background: #f2f2f2;
|
||||
margin: 0 15px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
#sidebar #search img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
#sidebar #search .textbox {
|
||||
background: #FFF url(input.png) no-repeat top left;
|
||||
border: 1px solid #EAEAEA;
|
||||
font-size: 11px;
|
||||
padding: 3px;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
#sidebar #search input.searchbutton {
|
||||
margin: 0;
|
||||
font: bold 100% Arial, Sans-serif;
|
||||
border: 1px solid #CCC;
|
||||
background: #CCC url(buttonbg.gif) repeat-x left bottom;
|
||||
padding: 1px;
|
||||
height: 25px;
|
||||
color: #333;
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
/*****************************
|
||||
LAYOUT
|
||||
******************************/
|
||||
#wrap {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
background-color: #FFF;
|
||||
width: 790px;
|
||||
}
|
||||
|
||||
#content-wrap {
|
||||
clear: both;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 790px;
|
||||
}
|
||||
|
||||
/* header */
|
||||
#header {
|
||||
position: relative;
|
||||
clear: left;
|
||||
width: 790px;
|
||||
height: 137px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #000 url(headerbg.jpg) no-repeat left bottom;
|
||||
}
|
||||
|
||||
#header h1#logo-text {
|
||||
float: right;
|
||||
margin: 39px 58px 0 0;
|
||||
padding: 0;
|
||||
font: bolder 3.2em 'Trebuchet MS', Arial, Sans-serif;
|
||||
letter-spacing: -2px;
|
||||
color: #FFF;
|
||||
text-transform: none;
|
||||
/* change the values of top and right to adjust the position of the logo*/
|
||||
top: 35px;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
#header h2#slogan {
|
||||
float: right;
|
||||
margin: 0 38px 0 0;
|
||||
padding: 0;
|
||||
font: bold 1.5em 'Trebuchet MS', Arial, Sans-serif;
|
||||
text-transform: none;
|
||||
letter-spacing: 1px;
|
||||
color: #FFF;
|
||||
clear: both;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#header h1#logo-text span {
|
||||
color: #CFCED3;
|
||||
}
|
||||
|
||||
/* menu tabs */
|
||||
#header #header-tabs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
background: #000;
|
||||
font: bold 1.1em Verdana, Tahoma, 'Trebuchet MS', Sans-serif;
|
||||
}
|
||||
|
||||
#header-tabs ul {
|
||||
margin: 0;
|
||||
padding: 2px 0px 0px 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#header-tabs li {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#header-tabs a {
|
||||
float: left;
|
||||
background: url(tableft.gif) no-repeat left top;
|
||||
margin: 0;
|
||||
padding: 0 0 0 4px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#header-tabs a span {
|
||||
float: left;
|
||||
display: block;
|
||||
background: url(tabright.gif) no-repeat right top;
|
||||
padding: 7px 15px 4px 8px;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
/* Commented Backslash Hack hides rule from IE5-Mac \*/
|
||||
#header-tabs a span {
|
||||
float: none;
|
||||
}
|
||||
|
||||
/* End IE5-Mac hack */
|
||||
#header-tabs a:hover span {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#header-tabs a:hover {
|
||||
background-position: 0% -42px;
|
||||
}
|
||||
|
||||
#header-tabs a:hover span {
|
||||
background-position: 100% -42px;
|
||||
}
|
||||
|
||||
#header-tabs #current a {
|
||||
background-position: 0% -42px;
|
||||
}
|
||||
|
||||
#header-tabs #current a span {
|
||||
background-position: 100% -42px;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
/* main content */
|
||||
#main {
|
||||
width: 748px;
|
||||
margin: 0;
|
||||
padding: 8px 16px;
|
||||
background-color: #F9F9F9;
|
||||
border-left: 5px solid #000;
|
||||
border-right: 5px solid #000;
|
||||
}
|
||||
|
||||
#main h1 {
|
||||
padding: 8px 0 3px 25px;
|
||||
text-transform: none;
|
||||
border-bottom: 2px solid #f2f2f2;
|
||||
color: #339900;
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
#sidebar { /* float: right;
|
||||
width: 245px;
|
||||
margin: 0 0 10px 0; padding: 0;
|
||||
background-color: inherit; */
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar h1 {
|
||||
padding: 8px 0px 3px 25px;
|
||||
background: url(square_arrow.gif) no-repeat 0% .7em;
|
||||
text-transform: none;
|
||||
color: #339900;
|
||||
}
|
||||
|
||||
#sidebar ul.sidemenu {
|
||||
list-style: none;
|
||||
margin: 10px 15px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#sidebar ul.sidemenu li {
|
||||
margin-bottom: 1px;
|
||||
border: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
#sidebar ul.sidemenu a {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
padding: 2px 5px 2px 10px;
|
||||
background: #f2f2f2;
|
||||
border-left: 5px solid #CCC;
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
* html body #sidebar ul.sidemenu a {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#sidebar ul.sidemenu a:hover {
|
||||
padding: 2px 5px 2px 10px;
|
||||
background: #f2f2f2;
|
||||
color: #339900;
|
||||
border-left: 5px solid #72A545;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
#footer {
|
||||
clear: both;
|
||||
height: 40px;
|
||||
color: #CCC;
|
||||
background: #000;
|
||||
margin: 0;
|
||||
font-size: 92%;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#footer #footer-left {
|
||||
width: 68%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#footer #footer-right {
|
||||
width: 25%;
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* alignment classes */
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* additional classes */
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.comments {
|
||||
color: #333;
|
||||
background: #FFF;
|
||||
text-align: right;
|
||||
border-top: 1px dashed #EFF0F1;
|
||||
border-bottom: 1px dashed #EFF0F1;
|
||||
padding: 5px 0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100.1%;
|
||||
}
|
||||
|
||||
/* ------ one ------------*/
|
||||
body .mainText {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#demoText h1,.mainText h1 {
|
||||
font-size: 130%;
|
||||
color: #0099FF;
|
||||
text-decoration: none;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin: 5px 4px 5px 24px;
|
||||
background: none;
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.mainText h2 {
|
||||
font-size: 110%;
|
||||
color: #000033;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
text-decoration: none;
|
||||
background: none;
|
||||
margin: 4px 32px 6px 22px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.mainText h3 {
|
||||
font-size: 120%;
|
||||
font-weight: 900;
|
||||
margin: 14px 0 0 0;
|
||||
text-align: center;
|
||||
color: #000033;
|
||||
}
|
||||
|
||||
.mainText table {
|
||||
width: 95%;
|
||||
border: 1px solid #0099FF;
|
||||
border-collapse: collapse;
|
||||
margin: 18px 7px;
|
||||
}
|
||||
|
||||
.mainText table td {
|
||||
background-color: #99CCFF;
|
||||
color: #000033;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.mainText table th {
|
||||
background-color: #000033;
|
||||
color: #99CCFF;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.mainText .linkPar a {
|
||||
color: #000033;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mainText .linkPar a:hover {
|
||||
color: #660033;
|
||||
text-decoration: none;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.pusher {
|
||||
cursor: pointer;
|
||||
padding: 3px 10px 3px 22px;
|
||||
font-weight: 900;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ------------- form specific styles are here -------------- */
|
||||
fieldset {
|
||||
margin: 0;
|
||||
border: 1px solid #C3DE00;
|
||||
padding: 10px;
|
||||
/*border:none;
|
||||
padding:0;*/
|
||||
color: #7563A5;
|
||||
}
|
||||
|
||||
legend {
|
||||
background-color: #FFFFFF;
|
||||
text-align: center;
|
||||
color: #097981;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
label {
|
||||
text-align: right;
|
||||
width: 298px;
|
||||
border-right: 1px dotted #099;
|
||||
padding-right: 5px;
|
||||
margin: 0 0 8px 0;
|
||||
float: left;
|
||||
clear: left;
|
||||
display: block;
|
||||
color: #7563A5;
|
||||
}
|
||||
|
||||
label.checkbox,label.textarea {
|
||||
border: none;
|
||||
}
|
||||
|
||||
label.lgfield {
|
||||
border: none;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
fieldset input,fieldset select,fieldset textarea {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
select.longfield {
|
||||
margin: 0 0 0 115px;
|
||||
}
|
||||
|
||||
input [type="radio"],input [type="checkbox"] {
|
||||
margin: 2px 0 0 4px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 250px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/*Get Help Form Styles*/
|
||||
p.formDisclaimer {
|
||||
text-align: center;
|
||||
margin: 32px 24px 12px 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
div.buttonWrapper {
|
||||
margin: 28px 0 14px 0;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.formspacer {
|
||||
height: 1em;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.hideField {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pushOpen {
|
||||
height: 18em;
|
||||
}
|
||||
|
||||
/* ----- error message for field validation ----- */
|
||||
#stepForm label.warning {
|
||||
text-align: left;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
margin: 0 0 0 10px;
|
||||
float: none;
|
||||
clear: none;
|
||||
display: inline;
|
||||
color: #CC3366;
|
||||
font-size: 10px;
|
||||
border: none;
|
||||
border-top: 1px dotted #CC3366;
|
||||
}
|
||||
|
||||
div.requiredNotice {
|
||||
width: 140px;
|
||||
float: right;
|
||||
margin: 0 24px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h3.stepHeader {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin: 0 0 24px 24px;
|
||||
color: #676cac;
|
||||
}
|
||||
|
||||
ul#stepForm,ul#stepForm li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul#stepForm li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Form Buttons */
|
||||
input.submitbutton,.nextbutton,.prevbutton {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background-color: #663399;
|
||||
padding: 4px;
|
||||
border: 1px solid #339933;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
margin: 7px;
|
||||
}
|
||||
|
||||
input.submitbutton {
|
||||
background-color: #006699;
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
||||
<title>Test for jQuery validate() plugin</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
|
||||
|
||||
<script src="../lib/jquery.js" type="text/javascript"></script>
|
||||
<script src="../lib/jquery.metadata.js" type="text/javascript"></script>
|
||||
<script src="../jquery.validate.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
// only for demo purposes
|
||||
$.validator.setDefaults({
|
||||
submitHandler: function() {
|
||||
alert("submitted!");
|
||||
}
|
||||
});
|
||||
|
||||
$.metadata.setType("attr", "validate");
|
||||
|
||||
$(document).ready(function() {
|
||||
$("#form1").validate();
|
||||
$("#selecttest").validate();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
.block { display: block; }
|
||||
form.cmxform label.error { display: none; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>
|
||||
<div id="main">
|
||||
|
||||
<form class="cmxform" id="form1" method="get" action="">
|
||||
<fieldset>
|
||||
<legend>Validating a form with a radio and checkbox buttons</legend>
|
||||
<fieldset>
|
||||
<legend>Gender</legend>
|
||||
<label for="gender_male">
|
||||
<input type="radio" id="gender_male" value="m" name="gender" validate="required:true" />
|
||||
Male
|
||||
</label>
|
||||
<label for="gender_female">
|
||||
<input type="radio" id="gender_female" value="f" name="gender"/>
|
||||
Female
|
||||
</label>
|
||||
<label for="gender" class="error">Please select your gender</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Family</legend>
|
||||
<label for="family_single">
|
||||
<input type="radio" id="family_single" value="s" name="family" validate="required:true" />
|
||||
Single
|
||||
</label>
|
||||
<label for="family_married">
|
||||
<input type="radio" id="family_married" value="m" name="family" />
|
||||
Married
|
||||
</label>
|
||||
<label for="family_other">
|
||||
<input type="radio" id="family_other" value="o" name="family" />
|
||||
Other
|
||||
</label>
|
||||
<label for="family" class="error">Please select your family status.</label>
|
||||
</fieldset>
|
||||
<p>
|
||||
<label for="agree">Please agree to our policy</label>
|
||||
<input type="checkbox" class="checkbox" id="agree" name="agree" validate="required:true" />
|
||||
<br/>
|
||||
<label for="agree" class="error block">Please agree to our policy!</label>
|
||||
</p>
|
||||
<fieldset>
|
||||
<legend>Spam</legend>
|
||||
<label for="spam_email">
|
||||
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" validate="required:true, minlength:2" />
|
||||
Spam via E-Mail
|
||||
</label>
|
||||
<label for="spam_phone">
|
||||
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
|
||||
Spam via Phone
|
||||
</label>
|
||||
<label for="spam_mail">
|
||||
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
|
||||
Spam via Mail
|
||||
</label>
|
||||
<label for="spam[]" class="error">Please select at least two types of spam.</label>
|
||||
</fieldset>
|
||||
<p>
|
||||
<input class="submit" type="submit" value="Submit"/>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<form id="selecttest">
|
||||
<h2>Some tests with selects</h2>
|
||||
<p>
|
||||
<label for="jungle">Please select a jungle noun</label><br/>
|
||||
<select id="jungle" name="jungle" title="Please select something!" validate="required:true">
|
||||
<option value=""></option>
|
||||
<option value="1">Buga</option>
|
||||
<option value="2">Baga</option>
|
||||
<option value="3">Oi</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="fruit">Please select at least two fruits</label><br/>
|
||||
<select id="fruit" name="fruit" title="Please select at least two fruits" validate="required:true, minlength:2" multiple="multiple">
|
||||
<option value="b">Banana</option>
|
||||
<option value="a">Apple</option>
|
||||
<option value="p">Peach</option>
|
||||
<option value="t">Turtle</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="vegetables">Please select no more than two vergetables</label><br/>
|
||||
<select id="vegetables" name="vegetables" title="Please select no more than two vergetables" validate="required:true, maxlength:2" multiple="multiple">
|
||||
<option value="p">Potato</option>
|
||||
<option value="t">Tomato</option>
|
||||
<option value="s">Salad</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="cars">Please select at least two cars, but no more than three</label><br/>
|
||||
<select id="cars" name="cars" title="Please select at least two cars, but no more than three" validate="required:true, rangelength:[2,3]" multiple="multiple">
|
||||
<option value="m_sl">Mercedes SL</option>
|
||||
<option value="o_c">Opel Corsa</option>
|
||||
<option value="vw_p">VW Polo</option>
|
||||
<option value="t_s">Titanic Skoda</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p><input type="submit" value="Validate Selecttests"/></p>
|
||||
</form>
|
||||
|
||||
<a href="index.html">Back to main page</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>jQuery UI tabs integration demo</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />
|
||||
|
||||
<script src="../../lib/jquery.js" type="text/javascript"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
|
||||
<script src="../../jquery.validate.js" type="text/javascript"></script>
|
||||
|
||||
<script id="demo" type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
var tabs = $("#tabs").tabs();
|
||||
var validator = $("#signupform").validate({
|
||||
groups: {
|
||||
birthdate: "birthdateDay birthdateMonth birthdateYear"
|
||||
},
|
||||
errorPlacement: function(label, element) {
|
||||
if (/^birthdate/.test(element[0].name)) {
|
||||
label.insertAfter("#birthdateYear");
|
||||
} else {
|
||||
label.insertAfter(element);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// validate the other two selects when one changes to update the whole group
|
||||
var birthdaySelects = $("#birthdateGroup select").click(function() {
|
||||
birthdaySelects.not(this).valid();
|
||||
})
|
||||
|
||||
// overwrite focusInvalid to activate tab with invalid elements
|
||||
validator.focusInvalid = function() {
|
||||
if( this.settings.focusInvalid ) {
|
||||
try {
|
||||
var focused = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []).filter(":visible");
|
||||
tabs.tabs("select", tabs.find(">div").index(focused.parent().parent()));
|
||||
focused.focus();
|
||||
} catch(e) {
|
||||
// ignore IE throwing errors when focusing hidden elements
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body { font-size: 65.2% }
|
||||
label { display: inline-block; width: 8em; }
|
||||
label.error { color: red; margin-left: 0.5em; width: 20em; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form id="signupform">
|
||||
|
||||
<div id="tabs">
|
||||
<ul>
|
||||
<li><a href="#logindata">Login data</a></li>
|
||||
<li><a href="#personaldata">Personal data</a></li>
|
||||
<li><a href="#subscriptions">Subscriptions</a></li>
|
||||
</ul>
|
||||
<div id="logindata">
|
||||
<p>
|
||||
<label for="username">Username</label>
|
||||
<input id="username" name="username" class="required" minlength="3" maxlength="20" type="text" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="email">Email address</label>
|
||||
<input id="email" name="email" class="required email" type="text" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="password">Password</label>
|
||||
<input name="password" type="password" class="required" id="password" minlength="4" maxlength="50" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="confirmpassword">Confirm Password</label>
|
||||
<input name="confirmpassword" type="password" class="required" equalTo="#password" id="confirmpassword" />
|
||||
</p>
|
||||
</div>
|
||||
<div id="personaldata">
|
||||
<p>
|
||||
<label for="street">Street</label>
|
||||
<input id="street" name="street" class="required" minlength="3" maxlength="50" type="text" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="city">City</label>
|
||||
<input id="city" name="city" class="required" minlength="3" maxlength="50" type="text" />
|
||||
</p>
|
||||
<p id="birthdateGroup">
|
||||
<label for="birthdateDay">Birthdate</label>
|
||||
<select id="birthdateDay" name="birthdateDay" class="required">
|
||||
<option value="">Day</option>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
<select id="birthdateMonth" name="birthdateMonth" class="required">
|
||||
<option value="">Month</option>
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
<option>7</option>
|
||||
<option>8</option>
|
||||
<option>9</option>
|
||||
<option>10</option>
|
||||
<option>11</option>
|
||||
<option>12</option>
|
||||
</select>
|
||||
<select id="birthdateYear" name="birthdateYear" class="required">
|
||||
<option value="">Year</option>
|
||||
<option>1950</option>
|
||||
<option>1951</option>
|
||||
<option>1952</option>
|
||||
<option>1953</option>
|
||||
<option>1954</option>
|
||||
<option>1955</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
<div id="subscriptions">
|
||||
<p>
|
||||
<label for="weekly">Weekly Newsletter</label>
|
||||
<input id="weekly" name="weekly" type="checkbox" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="updates">Product Updates</label>
|
||||
<input id="updates" name="updates" type="checkbox" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="terms">Terms and conditions</label>
|
||||
<input id="terms" name="terms" class="required" type="checkbox" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="submit" />
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
||||
<title>jQuery validation plug-in - ThemeRolldered demo</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="http://code.jquery.com/ui/jquery-ui-git.css" />
|
||||
|
||||
<style type="text/css">
|
||||
body { font-size: 62.5%; }
|
||||
label { display: inline-block; width: 100px; }
|
||||
legend { padding: 0.5em; }
|
||||
fieldset fieldset label { display: block; }
|
||||
#commentForm { width: 500px; }
|
||||
#commentForm label { width: 250px; }
|
||||
#commentForm label.error, #commentForm button.submit { margin-left: 253px; }
|
||||
#signupForm { width: 670px; }
|
||||
#signupForm label.error {
|
||||
margin-left: 10px;
|
||||
width: auto;
|
||||
display: inline;
|
||||
}
|
||||
#newsletter_topics label.error {
|
||||
display: none;
|
||||
margin-left: 103px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form class="cmxform" id="commentForm" method="get" action="">
|
||||
<fieldset class="ui-widget ui-widget-content ui-corner-all">
|
||||
<legend class="ui-widget ui-widget-header ui-corner-all">Please provide your name, email address (won't be published) and a comment</legend>
|
||||
<p>
|
||||
<label for="cname">Name (required, at least 2 characters)</label>
|
||||
<input id="cname" name="name" class="ui-widget-content" minlength="2" required type="text" />
|
||||
<p>
|
||||
<label for="cemail">E-Mail (required)</label>
|
||||
<input id="cemail" name="email" class="ui-widget-content" type="email" required />
|
||||
</p>
|
||||
<p>
|
||||
<label for="curl">URL (optional)</label>
|
||||
<input id="curl" name="url" class="ui-widget-content" value="" type="url" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="ccomment">Your comment (required)</label>
|
||||
<textarea id="ccomment" name="comment" class="ui-widget-content" required></textarea>
|
||||
</p>
|
||||
<p>
|
||||
<button class="submit" type="submit">Submit</button>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<form class="cmxform" id="signupForm" method="get" action="">
|
||||
<fieldset class="ui-widget ui-widget-content ui-corner-all">
|
||||
<legend class="ui-widget ui-widget-header ui-corner-all">Validating a complete form</legend>
|
||||
<p>
|
||||
<label for="firstname">Firstname</label>
|
||||
<input id="firstname" name="firstname" type="text" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="lastname">Lastname</label>
|
||||
<input id="lastname" name="lastname" type="text" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="username">Username</label>
|
||||
<input id="username" name="username" type="text" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="password">Password</label>
|
||||
<input id="password" name="password" type="password" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="confirm_password">Confirm password</label>
|
||||
<input id="confirm_password" name="confirm_password" type="password" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="email">Email</label>
|
||||
<input id="email" name="email" type="email" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="agree">Please agree to our policy</label>
|
||||
<input type="checkbox" class="checkbox" id="agree" name="agree" />
|
||||
</p>
|
||||
<p>
|
||||
<label for="newsletter">I'd like to receive the newsletter</label>
|
||||
<input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
|
||||
</p>
|
||||
<fieldset id="newsletter_topics" class="ui-widget-content ui-corner-all">
|
||||
<legend class="ui-widget-header ui-corner-all">Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
|
||||
<label for="topic_marketflash">
|
||||
<input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" />
|
||||
Marketflash
|
||||
</label>
|
||||
<label for="topic_fuzz">
|
||||
<input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" />
|
||||
Latest fuzz
|
||||
</label>
|
||||
<label for="topic_digester">
|
||||
<input type="checkbox" id="topic_digester" value="digester" name="topic" />
|
||||
Mailing list digester
|
||||
</label>
|
||||
<label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
|
||||
</fieldset>
|
||||
<p>
|
||||
<button class="submit" type="submit">Submit</button>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<script src="../lib/jquery-1.6.1.js" type="text/javascript"></script>
|
||||
<script src="../jquery.validate.js" type="text/javascript"></script>
|
||||
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
|
||||
<script type="text/javascript">
|
||||
$.validator.setDefaults({
|
||||
submitHandler: function() { alert("submitted!"); },
|
||||
showErrors: function(map, list) {
|
||||
// there's probably a way to simplify this
|
||||
var focussed = document.activeElement;
|
||||
if (focussed && $(focussed).is("input, textarea")) {
|
||||
$(this.currentForm).tooltip("close", { currentTarget: focussed }, true)
|
||||
}
|
||||
this.currentElements.removeAttr("title").removeClass("ui-state-highlight");
|
||||
$.each(list, function(index, error) {
|
||||
$(error.element).attr("title", error.message).addClass("ui-state-highlight");
|
||||
});
|
||||
if (focussed && $(focussed).is("input, textarea")) {
|
||||
$(this.currentForm).tooltip("open", { target: focussed });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
(function() {
|
||||
// use custom tooltip; disable animations for now to work around lack of refresh method on tooltip
|
||||
$("#commentForm, #signupForm").tooltip({
|
||||
show: false,
|
||||
hide: false
|
||||
});
|
||||
|
||||
// validate the comment form when it is submitted
|
||||
$("#commentForm").validate();
|
||||
|
||||
// validate signup form on keyup and submit
|
||||
$("#signupForm").validate({
|
||||
rules: {
|
||||
firstname: "required",
|
||||
lastname: "required",
|
||||
username: {
|
||||
required: true,
|
||||
minlength: 2
|
||||
},
|
||||
password: {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
confirm_password: {
|
||||
required: true,
|
||||
minlength: 5,
|
||||
equalTo: "#password"
|
||||
},
|
||||
email: {
|
||||
required: true,
|
||||
email: true
|
||||
},
|
||||
topic: {
|
||||
required: "#newsletter:checked",
|
||||
minlength: 2
|
||||
},
|
||||
agree: "required"
|
||||
},
|
||||
messages: {
|
||||
firstname: "Please enter your firstname",
|
||||
lastname: "Please enter your lastname",
|
||||
username: {
|
||||
required: "Please enter a username",
|
||||
minlength: "Your username must consist of at least 2 characters"
|
||||
},
|
||||
password: {
|
||||
required: "Please provide a password",
|
||||
minlength: "Your password must be at least 5 characters long"
|
||||
},
|
||||
confirm_password: {
|
||||
required: "Please provide a password",
|
||||
minlength: "Your password must be at least 5 characters long",
|
||||
equalTo: "Please enter the same password as above"
|
||||
},
|
||||
email: "Please enter a valid email address",
|
||||
agree: "Please accept our policy"
|
||||
}
|
||||
});
|
||||
|
||||
// propose username by combining first- and lastname
|
||||
$("#username").focus(function() {
|
||||
var firstname = $("#firstname").val();
|
||||
var lastname = $("#lastname").val();
|
||||
if(firstname && lastname && !this.value) {
|
||||
this.value = firstname + "." + lastname;
|
||||
}
|
||||
});
|
||||
|
||||
//code to hide topic selection, disable for demo
|
||||
var newsletter = $("#newsletter");
|
||||
// newsletter topics are optional, hide at first
|
||||
var inital = newsletter.is(":checked");
|
||||
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
|
||||
var topicInputs = topics.find("input").attr("disabled", !inital);
|
||||
// show when newsletter is checked
|
||||
newsletter.click(function() {
|
||||
topics[this.checked ? "removeClass" : "addClass"]("gray");
|
||||
topicInputs.attr("disabled", !this.checked);
|
||||
});
|
||||
|
||||
$("#signupForm input:not(:submit)").addClass("ui-widget-content");
|
||||
|
||||
$(":submit").button();
|
||||
})();
|
||||
</script>
|
||||
<script src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
|
||||
<script>
|
||||
$.fn.themeswitcher && $('<div/>').css({
|
||||
position: "absolute",
|
||||
right: 10,
|
||||
top: 10
|
||||
}).appendTo(document.body).themeswitcher();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>jQuery Validation plugin: integration with TinyMCE</title>
|
||||
|
||||
<script type="text/javascript" src="../../lib/jquery.js"></script>
|
||||
<script type="text/javascript" src="../../jquery.validate.js"></script>
|
||||
<script type="text/javascript" src="tiny_mce.js"></script>
|
||||
<script type="text/javascript">
|
||||
tinyMCE.init({
|
||||
mode : "textareas",
|
||||
theme : "simple",
|
||||
// update validation status on change
|
||||
onchange_callback: function(editor) {
|
||||
tinyMCE.triggerSave();
|
||||
$("#" + editor.id).valid();
|
||||
}
|
||||
});
|
||||
$(function() {
|
||||
var validator = $("#myform").submit(function() {
|
||||
// update underlying textarea before submit validation
|
||||
tinyMCE.triggerSave();
|
||||
}).validate({
|
||||
ignore: "",
|
||||
rules: {
|
||||
title: "required",
|
||||
content: "required"
|
||||
},
|
||||
errorPlacement: function(label, element) {
|
||||
// position error label after generated textarea
|
||||
if (element.is("textarea")) {
|
||||
label.insertAfter(element.next());
|
||||
} else {
|
||||
label.insertAfter(element)
|
||||
}
|
||||
}
|
||||
});
|
||||
validator.focusInvalid = function() {
|
||||
// put focus on tinymce on submit validation
|
||||
if( this.settings.focusInvalid ) {
|
||||
try {
|
||||
var toFocus = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []);
|
||||
if (toFocus.is("textarea")) {
|
||||
tinyMCE.get(toFocus.attr("id")).focus();
|
||||
} else {
|
||||
toFocus.filter(":visible").focus();
|
||||
}
|
||||
} catch(e) {
|
||||
// ignore IE throwing errors when focusing hidden elements
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!-- /TinyMCE -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form id="myform" action="">
|
||||
<h3>TinyMCE and Validation Plugin integration example</h3>
|
||||
|
||||
<label>Some other field</label>
|
||||
<input name="title" />
|
||||
|
||||
<br/>
|
||||
|
||||
<label>Some richt text</label>
|
||||
<textarea id="content" name="content" rows="15" cols="80" style="width: 80%"></textarea>
|
||||
|
||||
<br />
|
||||
<input type="submit" name="save" value="Submit" />
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
(function(){var DOM=tinymce.DOM;tinymce.ThemeManager.requireLangPack('simple');tinymce.create('tinymce.themes.SimpleTheme',{init:function(ed,url){var t=this,states=['Bold','Italic','Underline','Strikethrough','InsertUnorderedList','InsertOrderedList'],s=ed.settings;t.editor=ed;ed.onInit.add(function(){ed.onNodeChange.add(function(ed,cm){tinymce.each(states,function(c){cm.get(c.toLowerCase()).setActive(ed.queryCommandState(c));});});ed.dom.loadCSS(url+"/skins/"+s.skin+"/content.css");});DOM.loadCSS((s.editor_css?ed.documentBaseURI.toAbsolute(s.editor_css):'')||url+"/skins/"+s.skin+"/ui.css");},renderUI:function(o){var t=this,n=o.targetNode,ic,tb,ed=t.editor,cf=ed.controlManager,sc;n=DOM.insertAfter(DOM.create('span',{id:ed.id+'_container','class':'mceEditor '+ed.settings.skin+'SimpleSkin'}),n);n=sc=DOM.add(n,'table',{cellPadding:0,cellSpacing:0,'class':'mceLayout'});n=tb=DOM.add(n,'tbody');n=DOM.add(tb,'tr');n=ic=DOM.add(DOM.add(n,'td'),'div',{'class':'mceIframeContainer'});n=DOM.add(DOM.add(tb,'tr',{'class':'last'}),'td',{'class':'mceToolbar mceLast',align:'center'});tb=t.toolbar=cf.createToolbar("tools1");tb.add(cf.createButton('bold',{title:'simple.bold_desc',cmd:'Bold'}));tb.add(cf.createButton('italic',{title:'simple.italic_desc',cmd:'Italic'}));tb.add(cf.createButton('underline',{title:'simple.underline_desc',cmd:'Underline'}));tb.add(cf.createButton('strikethrough',{title:'simple.striketrough_desc',cmd:'Strikethrough'}));tb.add(cf.createSeparator());tb.add(cf.createButton('undo',{title:'simple.undo_desc',cmd:'Undo'}));tb.add(cf.createButton('redo',{title:'simple.redo_desc',cmd:'Redo'}));tb.add(cf.createSeparator());tb.add(cf.createButton('cleanup',{title:'simple.cleanup_desc',cmd:'mceCleanup'}));tb.add(cf.createSeparator());tb.add(cf.createButton('insertunorderedlist',{title:'simple.bullist_desc',cmd:'InsertUnorderedList'}));tb.add(cf.createButton('insertorderedlist',{title:'simple.numlist_desc',cmd:'InsertOrderedList'}));tb.renderTo(n);return{iframeContainer:ic,editorContainer:ed.id+'_container',sizeContainer:sc,deltaHeight:-20};},getInfo:function(){return{longname:'Simple theme',author:'Moxiecode Systems AB',authorurl:'http://tinymce.moxiecode.com',version:tinymce.majorVersion+"."+tinymce.minorVersion}}});tinymce.ThemeManager.add('simple',tinymce.themes.SimpleTheme);})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,11 @@
|
||||
tinyMCE.addI18n('en.simple',{
|
||||
bold_desc:"Bold (Ctrl+B)",
|
||||
italic_desc:"Italic (Ctrl+I)",
|
||||
underline_desc:"Underline (Ctrl+U)",
|
||||
striketrough_desc:"Strikethrough",
|
||||
bullist_desc:"Unordered list",
|
||||
numlist_desc:"Ordered list",
|
||||
undo_desc:"Undo (Ctrl+Z)",
|
||||
redo_desc:"Redo (Ctrl+Y)",
|
||||
cleanup_desc:"Cleanup messy code"
|
||||
});
|
||||
@@ -0,0 +1,32 @@
|
||||
/* Reset */
|
||||
.defaultSimpleSkin table, .defaultSimpleSkin tbody, .defaultSimpleSkin a, .defaultSimpleSkin img, .defaultSimpleSkin tr, .defaultSimpleSkin div, .defaultSimpleSkin td, .defaultSimpleSkin iframe, .defaultSimpleSkin span, .defaultSimpleSkin * {border:0; margin:0; padding:0; background:transparent; white-space:nowrap; text-decoration:none; font-weight:normal; cursor:default; color:#000}
|
||||
|
||||
/* Containers */
|
||||
.defaultSimpleSkin {position:relative}
|
||||
.defaultSimpleSkin table.mceLayout {background:#F0F0EE; border:1px solid #CCC;}
|
||||
.defaultSimpleSkin iframe {display:block; background:#FFF; border-bottom:1px solid #CCC;}
|
||||
.defaultSimpleSkin .mceToolbar {height:24px;}
|
||||
|
||||
/* Layout */
|
||||
.defaultSimpleSkin span.mceIcon, .defaultSimpleSkin img.mceIcon {display:block; width:20px; height:20px}
|
||||
.defaultSimpleSkin .mceIcon {background:url(../../img/icons.gif) no-repeat 20px 20px}
|
||||
|
||||
/* Button */
|
||||
.defaultSimpleSkin .mceButton {display:block; border:1px solid #F0F0EE; width:20px; height:20px}
|
||||
.defaultSimpleSkin a.mceButtonEnabled:hover {border:1px solid #0A246A; background-color:#B2BBD0}
|
||||
.defaultSimpleSkin a.mceButtonActive {border:1px solid #0A246A; background-color:#C2CBE0}
|
||||
.defaultSimpleSkin .mceButtonDisabled span {opacity:0.3; -ms-filter:'alpha(opacity=30)'; filter:alpha(opacity=30)}
|
||||
|
||||
/* Separator */
|
||||
.defaultSimpleSkin .mceSeparator {display:block; background:url(../../img/icons.gif) -180px 0; width:2px; height:20px; margin:0 2px 0 4px}
|
||||
|
||||
/* Theme */
|
||||
.defaultSimpleSkin span.mce_bold {background-position:0 0}
|
||||
.defaultSimpleSkin span.mce_italic {background-position:-60px 0}
|
||||
.defaultSimpleSkin span.mce_underline {background-position:-140px 0}
|
||||
.defaultSimpleSkin span.mce_strikethrough {background-position:-120px 0}
|
||||
.defaultSimpleSkin span.mce_undo {background-position:-160px 0}
|
||||
.defaultSimpleSkin span.mce_redo {background-position:-100px 0}
|
||||
.defaultSimpleSkin span.mce_cleanup {background-position:-40px 0}
|
||||
.defaultSimpleSkin span.mce_insertunorderedlist {background-position:-20px 0}
|
||||
.defaultSimpleSkin span.mce_insertorderedlist {background-position:-80px 0}
|
||||
1
src/main/webapp/static/global/plugins/jquery-validation/1.11.0/demo/tinymce/tiny_mce.js
vendored
Normal file
1
src/main/webapp/static/global/plugins/jquery-validation/1.11.0/demo/tinymce/tiny_mce.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -0,0 +1,121 @@
|
||||
/*global config:true, task:true*/
|
||||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: '<json:package.json>',
|
||||
meta: {
|
||||
banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
|
||||
'<%= grunt.template.today("m/d/yyyy") %>\n' +
|
||||
'<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' +
|
||||
'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
|
||||
' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */'
|
||||
},
|
||||
concat: {
|
||||
'dist/jquery.validate.js': ['<banner>', '<file_strip_banner:jquery.validate.js>'],
|
||||
'dist/additional-methods.js': ['<banner>', '<file_strip_banner:additional-methods.js>']
|
||||
},
|
||||
min: {
|
||||
'dist/jquery.validate.min.js': ['<banner>', 'dist/jquery.validate.js'],
|
||||
'dist/additional-methods.min.js': ['<banner>', 'dist/additional-methods.js']
|
||||
},
|
||||
zip: {
|
||||
dist: {
|
||||
src: [
|
||||
'dist/additional-methods.js',
|
||||
'dist/additional-methods.min.js',
|
||||
'dist/jquery.validate.js',
|
||||
'dist/jquery.validate.min.js',
|
||||
'README.md',
|
||||
'changelog.txt',
|
||||
'grunt.js',
|
||||
'package.json',
|
||||
'demo/**/*.*',
|
||||
'lib/**/*.*',
|
||||
'localization/**/*.*',
|
||||
'test/**/*.*'
|
||||
],
|
||||
dest: 'dist/<%= pkg.name %>-<%= pkg.version %>.zip'
|
||||
}
|
||||
},
|
||||
qunit: {
|
||||
files: ['test/index.html']
|
||||
},
|
||||
lint: {
|
||||
files: [
|
||||
'jquery.validate.js',
|
||||
'additional-methods.js',
|
||||
'localization/*.js'
|
||||
],
|
||||
test: [
|
||||
'test/test.js',
|
||||
'test/rules.js',
|
||||
'test/messages.js',
|
||||
'test/methods.js'
|
||||
]
|
||||
},
|
||||
jshint: {
|
||||
options: {
|
||||
curly: true,
|
||||
eqeqeq: true,
|
||||
immed: true,
|
||||
latedef: true,
|
||||
newcap: true,
|
||||
noarg: true,
|
||||
sub: true,
|
||||
undef: true,
|
||||
eqnull: true,
|
||||
browser: true
|
||||
},
|
||||
globals: {
|
||||
jQuery: true,
|
||||
$: true,
|
||||
console: true,
|
||||
/* TODO only allows these for tests (grunt 0.4) */
|
||||
QUnit: true,
|
||||
module: true,
|
||||
test: true,
|
||||
start: true,
|
||||
stop: true,
|
||||
expect: true,
|
||||
ok: true,
|
||||
equal: true,
|
||||
deepEqual: true,
|
||||
strictEqual: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.registerMultiTask('zip', 'Create a zip file for release', function() {
|
||||
var files = grunt.file.expand(this.file.src);
|
||||
// grunt.log.writeln(require('util').inspect(files));
|
||||
grunt.log.writeln("Creating zip file " + this.file.dest);
|
||||
|
||||
var done = this.async();
|
||||
|
||||
var zipstream = require('zipstream');
|
||||
var fs = require('fs');
|
||||
|
||||
var out = fs.createWriteStream(this.file.dest);
|
||||
var zip = zipstream.createZip({ level: 1 });
|
||||
|
||||
zip.pipe(out);
|
||||
|
||||
function addFile() {
|
||||
if (!files.length) {
|
||||
zip.finalize(function(written) {
|
||||
grunt.log.writeln(written + ' total bytes written');
|
||||
done();
|
||||
});
|
||||
return;
|
||||
}
|
||||
var file = files.shift();
|
||||
grunt.log.verbose.writeln('Zipping ' + file);
|
||||
zip.addFile(fs.createReadStream(file), { name: file }, addFile);
|
||||
}
|
||||
addFile();
|
||||
});
|
||||
|
||||
grunt.registerTask('default', 'lint qunit');
|
||||
grunt.registerTask('release', 'default concat min zip');
|
||||
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
@@ -0,0 +1,8 @@
|
||||
label.error {
|
||||
background:url("images/unchecked.gif") no-repeat 0px 0px;
|
||||
padding-left: 18px;
|
||||
padding-bottom: 2px;
|
||||
font-weight: bold;
|
||||
color: #EA5200;
|
||||
margin-left: 10px;
|
||||
}
|
||||
1355
src/main/webapp/static/global/plugins/jquery-validation/1.11.0/jquery.validate.js
vendored
Normal file
1355
src/main/webapp/static/global/plugins/jquery-validation/1.11.0/jquery.validate.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,152 @@
|
||||
/*
|
||||
* Translated default messages for the jQuery validation plugin.
|
||||
* Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
|
||||
*/
|
||||
(function ($) {
|
||||
$.extend($.validator.messages, {
|
||||
required: "必填信息",
|
||||
remote: "请修正该信息",
|
||||
email: "请输入正确格式的电子邮件",
|
||||
url: "请输入合法的网址",
|
||||
date: "请输入合法的日期",
|
||||
dateISO: "请输入合法的日期 (ISO).",
|
||||
number: "请输入合法的数字",
|
||||
digits: "只能输入整数",
|
||||
creditcard: "请输入合法的信用卡号",
|
||||
equalTo: "请再次输入相同的值",
|
||||
accept: "请输入拥有合法后缀名的字符串",
|
||||
maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"),
|
||||
minlength: $.validator.format("请输入一个长度最少是 {0} 的字符串"),
|
||||
rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
|
||||
range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
|
||||
max: $.validator.format("请输入一个最大为 {0} 的值"),
|
||||
min: $.validator.format("请输入一个最小为 {0} 的值")
|
||||
});
|
||||
}(jQuery));
|
||||
|
||||
jQuery.validator.addMethod("ip", function(value, element) {
|
||||
return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256));
|
||||
}, "请输入合法的IP地址");
|
||||
|
||||
jQuery.validator.addMethod("abc",function(value, element) {
|
||||
return this.optional(element) || /^[a-zA-Z0-9_]*$/.test(value);
|
||||
},"请输入字母数字或下划线");
|
||||
|
||||
jQuery.validator.addMethod("username",function(value, element) {
|
||||
return this.optional(element) || /^[a-zA-Z0-9][a-zA-Z0-9_]{2,19}$/.test(value);
|
||||
},"3-20位字母或数字开头，允许字母数字下划线");
|
||||
|
||||
jQuery.validator.addMethod("noEqualTo",function(value, element, param) {
|
||||
return value != $(param).val();
|
||||
},"请再次输入不同的值");
|
||||
|
||||
//真实姓名验证
|
||||
jQuery.validator.addMethod("realName", function(value, element) {
|
||||
return this.optional(element) || /^[\u4e00-\u9fa5]{2,30}$/.test(value);
|
||||
}, "姓名只能为2-30个汉字");
|
||||
|
||||
// 字符验证
|
||||
jQuery.validator.addMethod("userName", function(value, element) {
|
||||
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
|
||||
}, "登录名只能包括中文字、英文字母、数字和下划线");
|
||||
|
||||
// 手机号码验证
|
||||
jQuery.validator.addMethod("mobile", function(value, element) {
|
||||
var length = value.length;
|
||||
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));
|
||||
}, "请正确填写您的手机号码");
|
||||
|
||||
// 电话号码验证
|
||||
jQuery.validator.addMethod("simplePhone", function(value, element) {
|
||||
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
|
||||
return this.optional(element) || (tel.test(value));
|
||||
}, "请正确填写您的电话号码");
|
||||
|
||||
// 电话号码验证
|
||||
jQuery.validator.addMethod("phone", function(value, element) {
|
||||
var tel = /(^0[1-9]{1}\d{9,10}$)|(^1[3,5,8]\d{9}$)/g;
|
||||
return this.optional(element) || (tel.test(value));
|
||||
}, "格式为:固话为区号(3-4位)号码(7-9位),手机为:13,15,18号段");
|
||||
|
||||
// 邮政编码验证
|
||||
jQuery.validator.addMethod("zipCode", function(value, element) {
|
||||
var tel = /^[0-9]{6}$/;
|
||||
return this.optional(element) || (tel.test(value));
|
||||
}, "请正确填写您的邮政编码");
|
||||
|
||||
//QQ号码验证
|
||||
jQuery.validator.addMethod("qq", function(value, element) {
|
||||
var tel = /^[1-9][0-9]{4,}$/;
|
||||
return this.optional(element) || (tel.test(value));
|
||||
}, "请正确填写您的QQ号码");
|
||||
|
||||
//校验身份证好
|
||||
jQuery.validator.addMethod("card",function(value, element) {
|
||||
return this.optional(element) || checkIdcard(value);
|
||||
},"请输入正确的身份证号码(15-18位)")
|
||||
|
||||
//验证身份证函数
|
||||
function checkIdcard(idcard){
|
||||
idcard = idcard.toString();
|
||||
//var Errors=new Array("验证通过!","身份证号码位数不对!","身份证号码出生日期超出范围或含有非法字符!","身份证号码校验错误!","身份证地区非法!");
|
||||
var Errors=new Array(true,false,false,false,false);
|
||||
var area={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}
|
||||
var idcard,Y,JYM;
|
||||
var S,M;
|
||||
var idcard_array = new Array();
|
||||
idcard_array = idcard.split("");
|
||||
//地区检验
|
||||
if(area[parseInt(idcard.substr(0,2))]==null) return Errors[4];
|
||||
//身份号码位数及格式检验
|
||||
switch(idcard.length){
|
||||
case 15:
|
||||
if ( (parseInt(idcard.substr(6,2))+1900) % 4 == 0 || ((parseInt(idcard.substr(6,2))+1900) % 100 == 0 && (parseInt(idcard.substr(6,2))+1900) % 4 == 0 )){
|
||||
ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/;//测试出生日期的合法性
|
||||
} else {
|
||||
ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/;//测试出生日期的合法性
|
||||
}
|
||||
if(ereg.test(idcard)) return Errors[0];
|
||||
else return Errors[2];
|
||||
break;
|
||||
case 18:
|
||||
//18 位身份号码检测
|
||||
//出生日期的合法性检查
|
||||
//闰年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))
|
||||
//平年月日:((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))
|
||||
if ( parseInt(idcard.substr(6,4)) % 4 == 0 || (parseInt(idcard.substr(6,4)) % 100 == 0 && parseInt(idcard.substr(6,4))%4 == 0 )){
|
||||
ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;//闰年出生日期的合法性正则表达式
|
||||
} else {
|
||||
ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;//平年出生日期的合法性正则表达式
|
||||
}
|
||||
if(ereg.test(idcard)) {//测试出生日期的合法性
|
||||
//计算校验位
|
||||
S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7
|
||||
+ (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9
|
||||
+ (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10
|
||||
+ (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5
|
||||
+ (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8
|
||||
+ (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4
|
||||
+ (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2
|
||||
+ parseInt(idcard_array[7]) * 1
|
||||
+ parseInt(idcard_array[8]) * 6
|
||||
+ parseInt(idcard_array[9]) * 3 ;
|
||||
Y = S % 11;
|
||||
M = "F";
|
||||
JYM = "10X98765432";
|
||||
M = JYM.substr(Y,1);//判断校验位
|
||||
if(M == idcard_array[17]) return Errors[0]; //检测ID的校验位
|
||||
else return Errors[3];
|
||||
}
|
||||
else return Errors[2];
|
||||
break;
|
||||
default:
|
||||
return Errors[1];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
jQuery.validator.addMethod("regexPassword", function(value, element) {
|
||||
return this.optional(element) || /^(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/.test(value);
|
||||
}, "一个大写，一个小写，一个符号");
|
||||
|
||||
2
src/main/webapp/static/global/plugins/jquery-validation/1.11.0/jquery.validate.method.min.js
vendored
Normal file
2
src/main/webapp/static/global/plugins/jquery-validation/1.11.0/jquery.validate.method.min.js
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
(function(a){a.extend(a.validator.messages,{required:"必填信息",remote:"请修正该信息",email:"请输入正确格式的电子邮件",url:"请输入合法的网址",date:"请输入合法的日期",dateISO:"请输入合法的日期 (ISO).",number:"请输入合法的数字",digits:"只能输入整数",creditcard:"请输入合法的信用卡号",equalTo:"请再次输入相同的值",accept:"请输入拥有合法后缀名的字符串",maxlength:a.validator.format("请输入一个长度最多是 {0} 的字符串"),minlength:a.validator.format("请输入一个长度最少是 {0} 的字符串"),rangelength:a.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),range:a.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),max:a.validator.format("请输入一个最大为 {0} 的值"),min:a.validator.format("请输入一个最小为 {0} 的值")})}(jQuery));jQuery.validator.addMethod("ip",function(b,a){return this.optional(a)||(/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(b)&&(RegExp.$1<256&&RegExp.$2<256&&RegExp.$3<256&&RegExp.$4<256))},"请输入合法的IP地址");jQuery.validator.addMethod("abc",function(b,a){return this.optional(a)||/^[a-zA-Z0-9_]*$/.test(b)},"请输入字母数字或下划线");jQuery.validator.addMethod("username",function(b,a){return this.optional(a)||/^[a-zA-Z0-9][a-zA-Z0-9_]{2,19}$/.test(b)},"3-20位字母或数字开头，允许字母数字下划线");jQuery.validator.addMethod("noEqualTo",function(b,a,c){return b!=$(c).val()},"请再次输入不同的值");jQuery.validator.addMethod("realName",function(b,a){return this.optional(a)||/^[\u4e00-\u9fa5]{2,30}$/.test(b)},"姓名只能为2-30个汉字");jQuery.validator.addMethod("userName",function(b,a){return this.optional(a)||/^[\u0391-\uFFE5\w]+$/.test(b)},"登录名只能包括中文字、英文字母、数字和下划线");jQuery.validator.addMethod("mobile",function(c,a){var b=c.length;return this.optional(a)||(b==11&&/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(c))},"请正确填写您的手机号码");jQuery.validator.addMethod("simplePhone",function(c,b){var a=/^(\d{3,4}-?)?\d{7,9}$/g;return this.optional(b)||(a.test(c))},"请正确填写您的电话号码");jQuery.validator.addMethod("phone",function(c,b){var a=/(^0[1-9]{1}\d{9,10}$)|(^1[3,5,8]\d{9}$)/g;return this.optional(b)||(a.test(c))},"格式为:固话为区号(3-4位)号码(7-9位),手机为:13,15,18号段");jQuery.validator.addMethod("zipCode",function(c,b){var a=/^[0-9]{6}$/;return this.optional(b)||(a.test(c))},"请正确填写您的邮政编码");jQuery.validator.addMethod("qq",function(c,b){var a=/^[1-9][0-9]{4,}$/;return this.optional(b)||(a.test(c))
|
||||
},"请正确填写您的QQ号码");jQuery.validator.addMethod("card",function(b,a){return this.optional(a)||checkIdcard(b)},"请输入正确的身份证号码(15-18位)");function checkIdcard(d){d=d.toString();var f=new Array(true,false,false,false,false);var e={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};var d,g,b;var c,h;var a=new Array();a=d.split("");if(e[parseInt(d.substr(0,2))]==null){return f[4]}switch(d.length){case 15:if((parseInt(d.substr(6,2))+1900)%4==0||((parseInt(d.substr(6,2))+1900)%100==0&&(parseInt(d.substr(6,2))+1900)%4==0)){ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/}else{ereg=/^[1-9][0-9]{5}[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/}if(ereg.test(d)){return f[0]}else{return f[2]}break;case 18:if(parseInt(d.substr(6,4))%4==0||(parseInt(d.substr(6,4))%100==0&&parseInt(d.substr(6,4))%4==0)){ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/}else{ereg=/^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/}if(ereg.test(d)){c=(parseInt(a[0])+parseInt(a[10]))*7+(parseInt(a[1])+parseInt(a[11]))*9+(parseInt(a[2])+parseInt(a[12]))*10+(parseInt(a[3])+parseInt(a[13]))*5+(parseInt(a[4])+parseInt(a[14]))*8+(parseInt(a[5])+parseInt(a[15]))*4+(parseInt(a[6])+parseInt(a[16]))*2+parseInt(a[7])*1+parseInt(a[8])*6+parseInt(a[9])*3;g=c%11;h="F";b="10X98765432";h=b.substr(g,1);if(h==a[17]){return f[0]}else{return f[3]}}else{return f[2]}break;default:return f[1];break}};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user