Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Added demo files
  • Loading branch information
ryanseddon committed Sep 11, 2010
1 parent 31096ab commit f5a1120
Show file tree
Hide file tree
Showing 4 changed files with 537 additions and 0 deletions.
154 changes: 154 additions & 0 deletions demo/_styles.css
@@ -0,0 +1,154 @@
/* Just some base styles not needed for example to function */
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }

body, form, ul, li, p, h2, h3, h4, h5
{
margin: 0;
padding: 0;
}
body { background-color: #606061; color: #ffffff; }
img { border: none; }
p
{
font-size: 1em;
margin: 0 0 1em 0;
}
h2 { font-size: 14px; margin: 0 0 12px; }

/* Form styles */
#signup
{
margin: 20px auto;
width: 610px;
}
#signup fieldset
{
margin: 0 0 20px;
padding: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#signup ol
{
list-style-type: none;
padding: 0;
margin: 0;
}
#signup li
{
margin: 0 0 12px;
position: relative;
}
#signup label
{
width: 150px;
display: inline-block;
vertical-align: top;
}
#signup fieldset input,
#signup fieldset textarea,
#signup fieldset select
{
background: #fff url(ico_validation.png) 379px 24px no-repeat;
display: inline-block;
width: 371px;
border: 1px solid #fff;
padding: 3px 26px 3px 3px;

-moz-transition: background-color 1s ease;
-webkit-transition: background-color 1s ease;
-o-transition: background-color 1s ease;
transition: background-color 1s ease;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#signup fieldset select { width: 401px; padding: 3px; }
#signup fieldset #postcode { padding: 3px; width: 400px; }


#signup input::-webkit-input-placeholder,
#signup input:-moz-placeholder {
color: #A6A6A6;
}

#signup .validation01
{
background: red;
color: #fff;
display: none;
font-size: 12px;
padding: 3px;
position: absolute;
right: -160px;
text-align: center;
top: 0;
width: 150px;

-moz-box-shadow: 0px 0px 4px #ffffff;
-webkit-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#signup input:focus + .validation01 { display: block; }

#signup input:focus:required:valid + .validation01,
#signup input.valid:focus + .validation01 { background: green; }

#signup input:focus:required:valid + .validation01 .invalid,
#signup input.valid:focus + .validation01 .invalid { display: none; }

#signup input:focus:required:valid + .validation01 .valid,
#signup input.valid:focus + .validation01 .valid { display: block; }

#signup input:focus:required:invalid + .validation01 .valid,
#signup input.error:focus + .validation01 .valid,
#signup input.required:focus + .validation01 .valid,
#signup input:focus + .validation01 .valid { display: none; }

#signup fieldset input:required:valid
{
background-color: #fff;
background-position: 379px -61px;
}

/* Enhanced error styling */
#errors {
background: red;
display: none;
margin: 0 0 12px;
padding: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#errors li
{
font-size: 12px;
margin: 0 0 5px 20px;
}

#signup input.error
{
background-color: pink;
background-position: 379px 3px;
outline: none;
}
#signup input.required
{
background-color: #fff;
background-position: 379px -29px;
}
#signup input.valid
{
background-color: #fff;
background-position: 379px -61px;
}

#signup input.error::-webkit-input-placeholder,
#signup inputerror :-moz-placeholder {
color: #fff;
}
Binary file added demo/ico_validation.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
122 changes: 122 additions & 0 deletions demo/index.html
@@ -0,0 +1,122 @@
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="_styles.css" media="screen" />

<script type="text/javascript" src="_h5f.js"></script>

<title>Validate those forms with CSS3 Basic UI module pseudo-classes and HTML5 Form attributes</title>

</head>
<body>

<form id="signup">
<h1>Sign up now!</h1>

<h2>Fields marked (*) are required</h2>

<fieldset>
<legend>Your details</legend>

<ol>
<li>
<label for="fullname">Name *</label>
<input type="text" id="fullname" name="fullname" placeholder="Full name" required aria-required="true" />
</li>
<li>
<label for="email">Email *</label>
<input type="email" id="email" name="email" placeholder="e.g. ryan@example.net" title="Please enter a valid email" required aria-required="true" />
<p class="validation01">
<span class="invalid">Please enter a valid email address e.g. ryan@example.com</span>
<span class="valid">Thank you for entering a valid email</span>
</p>
</li>
<li>
<label for="tel">Phone *</label>
<input type="tel" id="tel" name="tel" pattern="\d{10}" placeholder="Please enter a ten digit phone number" required aria-required="true" />
<p class="validation01">
<span class="invalid">No spaces or brackets e.g. 0390001234</span>
<span class="valid">That's what we wanted!</span>
</p>
</li>
</ol>
</fieldset>

<fieldset>
<legend>Delivery address</legend>
<ol>
<li>
<label for="address">Address *</label>
<input id="address" name="address" type="text" required aria-required="true" />
</li>
<li>
<label for="suburb">Suburb *</label>
<input id="suburb" name="suburb" type="text" required aria-required="true" />
</li>
<li>
<label for="postcode">Post code *</label>
<input id="postcode" name="postcode" type="number" min="1001" max="8000" required maxlength="4" />
<p class="validation01">
<span class="invalid">Your postcode is out of range between 1001 - 8000</span>
<span class="valid">Thank you your postcode is in the correct range</span>
</p>
</li>
<li>
<label for="state">State</label>
<select name="state" id="state">
<option>ACT</option>
<option>NSW</option>
<option>NT</option>
<option>QLD</option>
<option>SA</option>
<option>TAS</option>
<option selected>VIC</option>
<option>WA</option>
</select>
</li>
</ol>
</fieldset>

<fieldset>
<legend>Membership information</legend>
<ol>
<li>
<label for="username">Username *</label>
<input id="username" name="username" type="text" pattern="\w{4,}" placeholder="Atleast 4 alphanumeric characters" required aria-required="true" />
</li>
<li>
<label for="password">Password *</label>
<input id="password" name="password" type="password" title="Minimum 8 characters, one number, one uppercase and one lowercase letter" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*" required aria-required="true" />
<p class="validation01">
<span class="invalid">Minimum 8 characters, one number, one uppercase letter and one lowercase letter</span>
<span class="valid">Your password meets our requirements, thank you.</span>
</p>
</li>
<li>
<label for="url">Website *</label>
<input type="url" name="url" id="url" required aria-required="true" />
</li>
</ol>
</fieldset>

<input type="submit" value="Sign up" />

</form>

<!-- Google analytics
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-4638292-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>-->

</body>
</html>

0 comments on commit f5a1120

Please sign in to comment.