--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
+<style>
+/* Style all input fields */
+input {
+ width: 100%;
+ padding: 12px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
+ margin-top: 6px;
+ margin-bottom: 16px;
+}
+
+/* Style the submit button */
+input[type=submit] {
+ background-color: #04AA6D;
+ color: white;
+}
+
+/* Style the container for inputs */
+.container {
+ background-color: #f1f1f1;
+ padding: 20px;
+}
+
+/* The message box is shown when the user clicks on the password field */
+#message {
+ display:none;
+ background: #f1f1f1;
+ color: #000;
+ position: relative;
+ padding: 20px;
+ margin-top: 10px;
+}
+
+#message p {
+ padding: 10px 35px;
+ font-size: 18px;
+}
+
+/* Add a green text color and a checkmark when the requirements are right */
+.valid {
+ color: green;
+}
+
+.valid:before {
+ position: relative;
+ left: -35px;
+ content: "✔";
+}
+
+/* Add a red text color and an "x" when the requirements are wrong */
+.invalid {
+ color: red;
+}
+
+.invalid:before {
+ position: relative;
+ left: -35px;
+ content: "✖";
+}
+</style>
+</head>
+<body>
+
+<h3>Password Validation</h3>
+<p>Try to submit the form.</p>
+
+<div class="container">
+ <form action="/action_page.php">
+ <label for="usrname">Username</label>
+ <input type="text" id="usrname" name="usrname" required>
+
+ <label for="psw">Password</label>
+ <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
+
+ <input type="submit" value="Submit">
+ </form>
+</div>
+
+<div id="message">
+ <h3>Password must contain the following:</h3>
+ <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
+ <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
+ <p id="number" class="invalid">A <b>number</b></p>
+ <p id="length" class="invalid">Minimum <b>8 characters</b></p>
+</div>
+
+<script>
+var myInput = document.getElementById("psw");
+var letter = document.getElementById("letter");
+var capital = document.getElementById("capital");
+var number = document.getElementById("number");
+var length = document.getElementById("length");
+
+// When the user clicks on the password field, show the message box
+myInput.onfocus = function() {
+ document.getElementById("message").style.display = "block";
+}
+
+// When the user clicks outside of the password field, hide the message box
+myInput.onblur = function() {
+ document.getElementById("message").style.display = "none";
+}
+
+// When the user starts to type something inside the password field
+myInput.onkeyup = function() {
+ // Validate lowercase letters
+ var lowerCaseLetters = /[a-z]/g;
+ if(myInput.value.match(lowerCaseLetters)) {
+ letter.classList.remove("invalid");
+ letter.classList.add("valid");
+ } else {
+ letter.classList.remove("valid");
+ letter.classList.add("invalid");
+ }
+
+ // Validate capital letters
+ var upperCaseLetters = /[A-Z]/g;
+ if(myInput.value.match(upperCaseLetters)) {
+ capital.classList.remove("invalid");
+ capital.classList.add("valid");
+ } else {
+ capital.classList.remove("valid");
+ capital.classList.add("invalid");
+ }
+
+ // Validate numbers
+ var numbers = /[0-9]/g;
+ if(myInput.value.match(numbers)) {
+ number.classList.remove("invalid");
+ number.classList.add("valid");
+ } else {
+ number.classList.remove("valid");
+ number.classList.add("invalid");
+ }
+
+ // Validate length
+ if(myInput.value.length >= 8) {
+ length.classList.remove("invalid");
+ length.classList.add("valid");
+ } else {
+ length.classList.remove("valid");
+ length.classList.add("invalid");
+ }
+}
+</script>
+
+</body>
+</html>
+++ /dev/null
-<HTML>
-<HEAD>
-<TITLE>Using DHTML to Create Sliding Menus (From JavaScript For Dummies, 4th Edition)</TITLE>
-<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
-<!-- Hide from older browsers
-
-function displayMenu(currentPosition,nextPosition) {
-
- // Get the menu object located at the currentPosition on the screen
- var whichMenu = document.getElementById(currentPosition).style;
-
- if (displayMenu.arguments.length == 1) {
- // Only one argument was sent in, so we need to
- // figure out the value for "nextPosition"
-
- if (parseInt(whichMenu.top) == -5) {
- // Only two values are possible: one for mouseover
- // (-5) and one for mouseout (-90). So we want
- // to toggle from the existing position to the
- // other position: i.e., if the position is -5,
- // set nextPosition to -90...
- nextPosition = -90;
- }
- else {
- // Otherwise, set nextPosition to -5
- nextPosition = -5;
- }
- }
-
- // Redisplay the menu using the value of "nextPosition"
- whichMenu.top = nextPosition + "px";
-}
-
-// End hiding-->
-</SCRIPT>
-
-<STYLE TYPE="text/css">
-<!--
-
-.menu {position:absolute; font:10px arial, helvetica, sans-serif; background-color:#ffffcc; layer-background-color:#ffffcc; top:-90px}
-#resMenu {right:10px; width:-130px}
-A {text-decoration:none; color:#000000}
-A:hover {background-color:pink; color:blue}
-
- -->
-
-</STYLE>
-
-</HEAD>
-
-<BODY BGCOLOR="white">
-
-<div id="resMenu" class="menu" onmouseover="displayMenu('resMenu',-5)" onmouseout="displayMenu('resMenu',-90)"><br />
-<a href="#"> Alert:</a><br>
-<a href="#"> </a><br>
-<a href="#"> You pushed that button again... Didn't yeah? </a><br>
-<a href="#"> </a><br>
-<a href="#"> </a><br>
-<a href="#"> </a><br>
-</div>
-ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
-<input type="button" value="Wake that alert up" onclick="displayMenu('resMenu',-5)">
-</BODY>
-</HTML>
vps2: / jmp / mailleur / commitdiff