Current state
This commit is contained in:
@@ -0,0 +1,94 @@
|
||||
<!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"></script>
|
||||
<script src="../lib/jquery.mockjax.js"></script>
|
||||
<script src="../lib/jquery.form.js"></script>
|
||||
<script src="../dist/jquery.validate.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
jQuery(function() {
|
||||
$.mockjax({
|
||||
url: "login.action",
|
||||
response: function(settings) {
|
||||
var user = settings.data.match( /user=(.+?)($|&)/ )[ 1 ],
|
||||
password = settings.data.match( /password=(.+?)($|&)/ )[ 1 ];
|
||||
if ( password !== "foobar" ) {
|
||||
this.responseText = "Your password is wrong (must be foobar).";
|
||||
return;
|
||||
}
|
||||
this.responseText = "Hi " + user + ", welcome back.";
|
||||
},
|
||||
responseStatus: 200,
|
||||
responseTime: 500
|
||||
});
|
||||
|
||||
// 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="login.action">
|
||||
<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" class="warning">Please login!</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<button id="reset">Programmatically reset above form!</button>
|
||||
|
||||
<a href="index.html">Back to main page</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
27
public/assets/plugins/jquery-validation/demo/captcha/captcha.js
vendored
Normal file
27
public/assets/plugins/jquery-validation/demo/captcha/captcha.js
vendored
Normal file
@@ -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;
|
||||
|
||||
?>
|
||||
140
public/assets/plugins/jquery-validation/demo/captcha/style.css
Normal file
140
public/assets/plugins/jquery-validation/demo/captcha/style.css
Normal file
@@ -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%;
|
||||
}
|
||||
46
public/assets/plugins/jquery-validation/demo/css/cmxform.css
Normal file
46
public/assets/plugins/jquery-validation/demo/css/cmxform.css
Normal file
@@ -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 */
|
||||
21
public/assets/plugins/jquery-validation/demo/css/core.css
Normal file
21
public/assets/plugins/jquery-validation/demo/css/core.css
Normal file
@@ -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; }
|
||||
|
||||
61
public/assets/plugins/jquery-validation/demo/css/reset.css
Normal file
61
public/assets/plugins/jquery-validation/demo/css/reset.css
Normal file
@@ -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; }
|
||||
11
public/assets/plugins/jquery-validation/demo/css/screen.css
Normal file
11
public/assets/plugins/jquery-validation/demo/css/screen.css
Normal file
@@ -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="../dist/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 overridden 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="../dist/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>
|
||||
145
public/assets/plugins/jquery-validation/demo/dynamic-totals.html
Normal file
145
public/assets/plugins/jquery-validation/demo/dynamic-totals.html
Normal file
@@ -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="../dist/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.validator.format("Your totals mustn'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.validator.format($.trim($("#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,149 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test for jQuery validate() plugin</title>
|
||||
|
||||
<link rel="stylesheet" media="screen" href="css/screen.css" />
|
||||
|
||||
<script src="../lib/jquery.js"></script>
|
||||
<script src="../dist/jquery.validate.js"></script>
|
||||
|
||||
<style>
|
||||
.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>
|
||||
// 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'
|
||||
});
|
||||
|
||||
$(".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)" required minlength="3">
|
||||
</p>
|
||||
<p>
|
||||
<label>Password</label>
|
||||
<input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" required 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" required type="email">
|
||||
</p>
|
||||
<p>
|
||||
<label for="agree">Favorite Color</label>
|
||||
<select id="color" name="color" title="Please select your favorite color!" required>
|
||||
<option> </option>
|
||||
<option>Red</option>
|
||||
<option>Blue</option>
|
||||
<option>Yellow</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="phone">Phone</label>
|
||||
<input id="phone" name="phone" required type="number" rangelength="[2,8]">
|
||||
</p>
|
||||
<p>
|
||||
<label for="address">Address</label>
|
||||
<input id="address" name="address" required minlength="3">
|
||||
</p>
|
||||
<p>
|
||||
<label for="avatar">Avatar</label>
|
||||
<input type="file" id="avatar" name="avatar" required>
|
||||
</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" required>
|
||||
</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>
|
||||
53
public/assets/plugins/jquery-validation/demo/file_input.html
Normal file
53
public/assets/plugins/jquery-validation/demo/file_input.html
Normal file
@@ -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="../dist/jquery.validate.js"></script>
|
||||
<script src="../dist/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>
|
||||
BIN
public/assets/plugins/jquery-validation/demo/images/bg.gif
Normal file
BIN
public/assets/plugins/jquery-validation/demo/images/bg.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
public/assets/plugins/jquery-validation/demo/images/checked.gif
Normal file
BIN
public/assets/plugins/jquery-validation/demo/images/checked.gif
Normal file
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 |
BIN
public/assets/plugins/jquery-validation/demo/images/loading.gif
Normal file
BIN
public/assets/plugins/jquery-validation/demo/images/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 418 B |
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
229
public/assets/plugins/jquery-validation/demo/index.html
Normal file
229
public/assets/plugins/jquery-validation/demo/index.html
Normal file
@@ -0,0 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery validation plug-in - main demo</title>
|
||||
|
||||
<link rel="stylesheet" href="css/screen.css" />
|
||||
|
||||
<script src="../lib/jquery.js"></script>
|
||||
<script src="../dist/jquery.validate.js"></script>
|
||||
|
||||
<script>
|
||||
$.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>
|
||||
<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>Synthetic 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-integration-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="../dist/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>
|
||||
BIN
public/assets/plugins/jquery-validation/demo/login/images/bg.gif
Normal file
BIN
public/assets/plugins/jquery-validation/demo/login/images/bg.gif
Normal file
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="../../dist/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>
|
||||
457
public/assets/plugins/jquery-validation/demo/login/screen.css
Normal file
457
public/assets/plugins/jquery-validation/demo/login/screen.css
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
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 |
228
public/assets/plugins/jquery-validation/demo/marketo/index.html
Normal file
228
public/assets/plugins/jquery-validation/demo/marketo/index.html
Normal file
@@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Subscription Signup | Marketo</title>
|
||||
|
||||
<script src="../../lib/jquery.js"></script>
|
||||
<script src="../../lib/jquery.mockjax.js"></script>
|
||||
<script src="../../dist/jquery.validate.js"></script>
|
||||
|
||||
<script src="jquery.maskedinput.js"></script>
|
||||
<script src="mktSignup.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="stylesheet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- 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.action" 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,338 @@
|
||||
/*
|
||||
Masked Input plugin for jQuery
|
||||
Copyright (c) 2007-2013 Josh Bush (digitalbush.com)
|
||||
Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
|
||||
Version: 1.3.1
|
||||
*/
|
||||
(function($) {
|
||||
function getPasteEvent() {
|
||||
var el = document.createElement('input'),
|
||||
name = 'onpaste';
|
||||
el.setAttribute(name, '');
|
||||
return (typeof el[name] === 'function')?'paste':'input';
|
||||
}
|
||||
|
||||
var pasteEventName = getPasteEvent() + ".mask",
|
||||
ua = navigator.userAgent,
|
||||
iPhone = /iphone/i.test(ua),
|
||||
android=/android/i.test(ua),
|
||||
caretTimeoutId;
|
||||
|
||||
$.mask = {
|
||||
//Predefined character definitions
|
||||
definitions: {
|
||||
'9': "[0-9]",
|
||||
'a': "[A-Za-z]",
|
||||
'*': "[A-Za-z0-9]"
|
||||
},
|
||||
dataName: "rawMaskFn",
|
||||
placeholder: '_',
|
||||
};
|
||||
|
||||
$.fn.extend({
|
||||
//Helper Function for Caret positioning
|
||||
caret: function(begin, end) {
|
||||
var range;
|
||||
|
||||
if (this.length === 0 || this.is(":hidden")) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof begin == 'number') {
|
||||
end = (typeof end === 'number') ? end : begin;
|
||||
return this.each(function() {
|
||||
if (this.setSelectionRange) {
|
||||
this.setSelectionRange(begin, end);
|
||||
} else if (this.createTextRange) {
|
||||
range = this.createTextRange();
|
||||
range.collapse(true);
|
||||
range.moveEnd('character', end);
|
||||
range.moveStart('character', begin);
|
||||
range.select();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (this[0].setSelectionRange) {
|
||||
begin = this[0].selectionStart;
|
||||
end = this[0].selectionEnd;
|
||||
} else if (document.selection && document.selection.createRange) {
|
||||
range = document.selection.createRange();
|
||||
begin = 0 - range.duplicate().moveStart('character', -100000);
|
||||
end = begin + range.text.length;
|
||||
}
|
||||
return { begin: begin, end: end };
|
||||
}
|
||||
},
|
||||
unmask: function() {
|
||||
return this.trigger("unmask");
|
||||
},
|
||||
mask: function(mask, settings) {
|
||||
var input,
|
||||
defs,
|
||||
tests,
|
||||
partialPosition,
|
||||
firstNonMaskPos,
|
||||
len;
|
||||
|
||||
if (!mask && this.length > 0) {
|
||||
input = $(this[0]);
|
||||
return input.data($.mask.dataName)();
|
||||
}
|
||||
settings = $.extend({
|
||||
placeholder: $.mask.placeholder, // Load default placeholder
|
||||
completed: null
|
||||
}, settings);
|
||||
|
||||
|
||||
defs = $.mask.definitions;
|
||||
tests = [];
|
||||
partialPosition = len = mask.length;
|
||||
firstNonMaskPos = null;
|
||||
|
||||
$.each(mask.split(""), function(i, c) {
|
||||
if (c == '?') {
|
||||
len--;
|
||||
partialPosition = i;
|
||||
} else if (defs[c]) {
|
||||
tests.push(new RegExp(defs[c]));
|
||||
if (firstNonMaskPos === null) {
|
||||
firstNonMaskPos = tests.length - 1;
|
||||
}
|
||||
} else {
|
||||
tests.push(null);
|
||||
}
|
||||
});
|
||||
|
||||
return this.trigger("unmask").each(function() {
|
||||
var input = $(this),
|
||||
buffer = $.map(
|
||||
mask.split(""),
|
||||
function(c, i) {
|
||||
if (c != '?') {
|
||||
return defs[c] ? settings.placeholder : c;
|
||||
}
|
||||
}),
|
||||
focusText = input.val();
|
||||
|
||||
function seekNext(pos) {
|
||||
while (++pos < len && !tests[pos]);
|
||||
return pos;
|
||||
}
|
||||
|
||||
function seekPrev(pos) {
|
||||
while (--pos >= 0 && !tests[pos]);
|
||||
return pos;
|
||||
}
|
||||
|
||||
function shiftL(begin,end) {
|
||||
var i,
|
||||
j;
|
||||
|
||||
if (begin<0) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (i = begin, j = seekNext(end); i < len; i++) {
|
||||
if (tests[i]) {
|
||||
if (j < len && tests[i].test(buffer[j])) {
|
||||
buffer[i] = buffer[j];
|
||||
buffer[j] = settings.placeholder;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
|
||||
j = seekNext(j);
|
||||
}
|
||||
}
|
||||
writeBuffer();
|
||||
input.caret(Math.max(firstNonMaskPos, begin));
|
||||
}
|
||||
|
||||
function shiftR(pos) {
|
||||
var i,
|
||||
c,
|
||||
j,
|
||||
t;
|
||||
|
||||
for (i = pos, c = settings.placeholder; i < len; i++) {
|
||||
if (tests[i]) {
|
||||
j = seekNext(i);
|
||||
t = buffer[i];
|
||||
buffer[i] = c;
|
||||
if (j < len && tests[j].test(t)) {
|
||||
c = t;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function keydownEvent(e) {
|
||||
var k = e.which,
|
||||
pos,
|
||||
begin,
|
||||
end;
|
||||
|
||||
//backspace, delete, and escape get special treatment
|
||||
if (k === 8 || k === 46 || (iPhone && k === 127)) {
|
||||
pos = input.caret();
|
||||
begin = pos.begin;
|
||||
end = pos.end;
|
||||
|
||||
if (end - begin === 0) {
|
||||
begin=k!==46?seekPrev(begin):(end=seekNext(begin-1));
|
||||
end=k===46?seekNext(end):end;
|
||||
}
|
||||
clearBuffer(begin, end);
|
||||
shiftL(begin, end - 1);
|
||||
|
||||
e.preventDefault();
|
||||
} else if (k == 27) {//escape
|
||||
input.val(focusText);
|
||||
input.caret(0, checkVal());
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function keypressEvent(e) {
|
||||
var k = e.which,
|
||||
pos = input.caret(),
|
||||
p,
|
||||
c,
|
||||
next;
|
||||
|
||||
if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {//Ignore
|
||||
return;
|
||||
} else if (k) {
|
||||
if (pos.end - pos.begin !== 0){
|
||||
clearBuffer(pos.begin, pos.end);
|
||||
shiftL(pos.begin, pos.end-1);
|
||||
}
|
||||
|
||||
p = seekNext(pos.begin - 1);
|
||||
if (p < len) {
|
||||
c = String.fromCharCode(k);
|
||||
if (tests[p].test(c)) {
|
||||
shiftR(p);
|
||||
|
||||
buffer[p] = c;
|
||||
writeBuffer();
|
||||
next = seekNext(p);
|
||||
|
||||
if(android){
|
||||
setTimeout($.proxy($.fn.caret,input,next),0);
|
||||
}else{
|
||||
input.caret(next);
|
||||
}
|
||||
|
||||
if (settings.completed && next >= len) {
|
||||
settings.completed.call(input);
|
||||
}
|
||||
}
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function clearBuffer(start, end) {
|
||||
var i;
|
||||
for (i = start; i < end && i < len; i++) {
|
||||
if (tests[i]) {
|
||||
buffer[i] = settings.placeholder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function writeBuffer() { input.val(buffer.join('')); }
|
||||
|
||||
function checkVal(allow) {
|
||||
//try to place characters where they belong
|
||||
var test = input.val(),
|
||||
lastMatch = -1,
|
||||
i,
|
||||
c;
|
||||
|
||||
for (i = 0, pos = 0; i < len; i++) {
|
||||
if (tests[i]) {
|
||||
buffer[i] = settings.placeholder;
|
||||
while (pos++ < test.length) {
|
||||
c = test.charAt(pos - 1);
|
||||
if (tests[i].test(c)) {
|
||||
buffer[i] = c;
|
||||
lastMatch = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (pos > test.length) {
|
||||
break;
|
||||
}
|
||||
} else if (buffer[i] === test.charAt(pos) && i !== partialPosition) {
|
||||
pos++;
|
||||
lastMatch = i;
|
||||
}
|
||||
}
|
||||
if (allow) {
|
||||
writeBuffer();
|
||||
} else if (lastMatch + 1 < partialPosition) {
|
||||
input.val("");
|
||||
clearBuffer(0, len);
|
||||
} else {
|
||||
writeBuffer();
|
||||
input.val(input.val().substring(0, lastMatch + 1));
|
||||
}
|
||||
return (partialPosition ? i : firstNonMaskPos);
|
||||
}
|
||||
|
||||
input.data($.mask.dataName,function(){
|
||||
return $.map(buffer, function(c, i) {
|
||||
return tests[i]&&c!=settings.placeholder ? c : null;
|
||||
}).join('');
|
||||
});
|
||||
|
||||
if (!input.attr("readonly"))
|
||||
input
|
||||
.one("unmask", function() {
|
||||
input
|
||||
.unbind(".mask")
|
||||
.removeData($.mask.dataName);
|
||||
})
|
||||
.bind("focus.mask", function() {
|
||||
clearTimeout(caretTimeoutId);
|
||||
var pos,
|
||||
moveCaret;
|
||||
|
||||
focusText = input.val();
|
||||
pos = checkVal();
|
||||
|
||||
caretTimeoutId = setTimeout(function(){
|
||||
writeBuffer();
|
||||
if (pos == mask.length) {
|
||||
input.caret(0, pos);
|
||||
} else {
|
||||
input.caret(pos);
|
||||
}
|
||||
}, 10);
|
||||
})
|
||||
.bind("blur.mask", function() {
|
||||
checkVal();
|
||||
if (input.val() != focusText)
|
||||
input.change();
|
||||
})
|
||||
.bind("keydown.mask", keydownEvent)
|
||||
.bind("keypress.mask", keypressEvent)
|
||||
.bind(pasteEventName, function() {
|
||||
setTimeout(function() {
|
||||
var pos=checkVal(true);
|
||||
input.caret(pos);
|
||||
if (settings.completed && pos == input.val().length)
|
||||
settings.completed.call(input);
|
||||
}, 0);
|
||||
});
|
||||
checkVal(); //Perform initial check for existing values
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
||||
133
public/assets/plugins/jquery-validation/demo/marketo/mktSignup.js
vendored
Normal file
133
public/assets/plugins/jquery-validation/demo/marketo/mktSignup.js
vendored
Normal file
@@ -0,0 +1,133 @@
|
||||
$(document).ready(function(){
|
||||
$.mockjax({
|
||||
url: "emails.action",
|
||||
response: function(settings) {
|
||||
var email = settings.data.email,
|
||||
emails = ["glen@marketo.com", "george@bush.gov", "me@god.com", "aboutface@cooper.com", "steam@valve.com", "bill@gates.com"];
|
||||
this.responseText = "true";
|
||||
if ( $.inArray( email, emails ) !== -1 ) {
|
||||
this.responseText = "false";
|
||||
}
|
||||
},
|
||||
responseTime: 500
|
||||
});
|
||||
|
||||
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");
|
||||
|
||||
$("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);
|
||||
});
|
||||
};
|
||||
263
public/assets/plugins/jquery-validation/demo/marketo/step2.htm
Normal file
263
public/assets/plugins/jquery-validation/demo/marketo/step2.htm
Normal file
@@ -0,0 +1,263 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Subscription Signup | Marketo</title>
|
||||
|
||||
<script src="../../lib/jquery.js"></script>
|
||||
<script src="../../lib/jquery.mockjax.js"></script>
|
||||
<script src="../../jquery.validate.js"></script>
|
||||
|
||||
<script src="jquery.maskedinput.js"></script>
|
||||
<script src="mktSignup.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="stylesheet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- 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 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.action" 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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1179
public/assets/plugins/jquery-validation/demo/marketo/stylesheet.css
Normal file
1179
public/assets/plugins/jquery-validation/demo/marketo/stylesheet.css
Normal file
File diff suppressed because it is too large
Load Diff
BIN
public/assets/plugins/jquery-validation/demo/milk/bg.gif
Normal file
BIN
public/assets/plugins/jquery-validation/demo/milk/bg.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 B |
233
public/assets/plugins/jquery-validation/demo/milk/index.html
Normal file
233
public/assets/plugins/jquery-validation/demo/milk/index.html
Normal file
@@ -0,0 +1,233 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Remember The Milk signup form - jQuery Validate plugin demo - with friendly permission from the RTM team</title>
|
||||
|
||||
<link rel="stylesheet" href="milk.css" />
|
||||
|
||||
<script src="../../lib/jquery.js"></script>
|
||||
<script src="../../lib/jquery.mockjax.js"></script>
|
||||
<script src="../../dist/jquery.validate.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$.mockjax({
|
||||
url: "emails.action",
|
||||
response: function(settings) {
|
||||
var email = settings.data.email,
|
||||
emails = ["glen@marketo.com", "george@bush.gov", "me@god.com", "aboutface@cooper.com", "steam@valve.com", "bill@gates.com"];
|
||||
this.responseText = "true";
|
||||
if ( $.inArray( email, emails ) !== -1 ) {
|
||||
this.responseText = "false";
|
||||
}
|
||||
},
|
||||
responseTime: 500
|
||||
});
|
||||
|
||||
$.mockjax({
|
||||
url: "users.action",
|
||||
response: function(settings) {
|
||||
var user = settings.data.username,
|
||||
users = ["asdf", "Peter", "Peter2", "George"];
|
||||
this.responseText = "true";
|
||||
if ( $.inArray( user, users ) !== -1 ) {
|
||||
this.responseText = "false";
|
||||
}
|
||||
},
|
||||
responseTime: 500
|
||||
});
|
||||
|
||||
|
||||
// validate signup form on keyup and submit
|
||||
var validator = $("#signupform").validate({
|
||||
rules: {
|
||||
firstname: "required",
|
||||
lastname: "required",
|
||||
username: {
|
||||
required: true,
|
||||
minlength: 2,
|
||||
remote: "users.action"
|
||||
},
|
||||
password: {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
password_confirm: {
|
||||
required: true,
|
||||
minlength: 5,
|
||||
equalTo: "#password"
|
||||
},
|
||||
email: {
|
||||
required: true,
|
||||
email: true,
|
||||
remote: "emails.action"
|
||||
},
|
||||
dateformat: "required",
|
||||
terms: "required"
|
||||
},
|
||||
messages: {
|
||||
firstname: "Enter your firstname",
|
||||
lastname: "Enter your lastname",
|
||||
username: {
|
||||
required: "Enter a username",
|
||||
minlength: jQuery.validator.format("Enter at least {0} characters"),
|
||||
remote: jQuery.validator.format("{0} is already in use")
|
||||
},
|
||||
password: {
|
||||
required: "Provide a password",
|
||||
rangelength: jQuery.validator.format("Enter at least {0} characters")
|
||||
},
|
||||
password_confirm: {
|
||||
required: "Repeat your password",
|
||||
minlength: jQuery.validator.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.validator.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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/assets/plugins/jquery-validation/demo/milk/left_white.png
Normal file
BIN
public/assets/plugins/jquery-validation/demo/milk/left_white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 538 B |
236
public/assets/plugins/jquery-validation/demo/milk/milk.css
Normal file
236
public/assets/plugins/jquery-validation/demo/milk/milk.css
Normal file
@@ -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;
|
||||
}
|
||||
BIN
public/assets/plugins/jquery-validation/demo/milk/milk.png
Normal file
BIN
public/assets/plugins/jquery-validation/demo/milk/milk.png
Normal file
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,410 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery accordion form with validation</title>
|
||||
|
||||
<script src="../../lib/jquery.js"></script>
|
||||
<script src="../../dist/jquery.validate.js"></script>
|
||||
|
||||
<script src="../marketo/jquery.maskedinput.js"></script>
|
||||
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.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,
|
||||
onfocusout: false,
|
||||
submitHandler: function() {
|
||||
alert("Submitted, thanks!");
|
||||
}
|
||||
});
|
||||
|
||||
// back buttons do not need to run validation
|
||||
$("#sf2 .prevbutton").click(function(){
|
||||
accordion.accordion("option", "active", 0);
|
||||
current = 0;
|
||||
});
|
||||
$("#sf3 .prevbutton").click(function(){
|
||||
accordion.accordion("option", "active", 1);
|
||||
current = 1;
|
||||
});
|
||||
// these buttons all run the validation, overridden by specific targets above
|
||||
$(".open2").click(function() {
|
||||
if (v.form()) {
|
||||
accordion.accordion("option", "active", 2);
|
||||
current = 2;
|
||||
}
|
||||
});
|
||||
$(".open1").click(function() {
|
||||
if (v.form()) {
|
||||
accordion.accordion("option", "active", 1);
|
||||
current = 1;
|
||||
}
|
||||
});
|
||||
$(".open0").click(function() {
|
||||
if (v.form()) {
|
||||
accordion.accordion("option", "active", 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>
|
||||
705
public/assets/plugins/jquery-validation/demo/multipart/style.css
Normal file
705
public/assets/plugins/jquery-validation/demo/multipart/style.css
Normal file
@@ -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,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test for jQuery validate() plugin</title>
|
||||
|
||||
<link rel="stylesheet" media="screen" href="css/screen.css">
|
||||
|
||||
<script src="../lib/jquery.js"></script>
|
||||
<script src="../dist/jquery.validate.js"></script>
|
||||
|
||||
<script>
|
||||
// only for demo purposes
|
||||
$.validator.setDefaults({
|
||||
submitHandler: function() {
|
||||
alert("submitted!");
|
||||
}
|
||||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
$("#form1").validate();
|
||||
$("#selecttest").validate();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.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" required>
|
||||
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" required>
|
||||
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" required>
|
||||
<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[]" required 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!" required>
|
||||
<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" required 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" required 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" required 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>
|
||||
16
public/assets/plugins/jquery-validation/demo/site-demos.css
Normal file
16
public/assets/plugins/jquery-validation/demo/site-demos.css
Normal file
@@ -0,0 +1,16 @@
|
||||
#field { margin-left: .5em; float: left; }
|
||||
#field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
|
||||
br { clear: both; }
|
||||
input { border: 1px solid black; margin-bottom: .5em; }
|
||||
input.error { border: 1px solid red; }
|
||||
label.error {
|
||||
background: url('images/unchecked.gif') no-repeat;
|
||||
padding-left: 16px;
|
||||
margin-left: .3em;
|
||||
}
|
||||
label.valid {
|
||||
background: url('images/checked.gif') no-repeat;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
229
public/assets/plugins/jquery-validation/demo/themerollered.html
Normal file
229
public/assets/plugins/jquery-validation/demo/themerollered.html
Normal file
@@ -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="../dist/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="../../dist/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>
|
||||
1
public/assets/plugins/jquery-validation/demo/tinymce/themes/simple/editor_template.js
vendored
Normal file
1
public/assets/plugins/jquery-validation/demo/tinymce/themes/simple/editor_template.js
vendored
Normal file
@@ -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 |
11
public/assets/plugins/jquery-validation/demo/tinymce/themes/simple/langs/en.js
vendored
Normal file
11
public/assets/plugins/jquery-validation/demo/tinymce/themes/simple/langs/en.js
vendored
Normal file
@@ -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
public/assets/plugins/jquery-validation/demo/tinymce/tiny_mce.js
vendored
Normal file
1
public/assets/plugins/jquery-validation/demo/tinymce/tiny_mce.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user