CSCI E-3 Unit B

password fields on the form

by Angela Baruth

HTML

<form autocomplete="off" action="" name="hw4Form"><br>

        <fieldset name="LoginInfo">
          <div>
              <label for="username">Username</label>
              <input size="30" placeholder="username" name="username" id="username" type="text">
          </div>
          
          <div>
              <label for="password">Password</label>
              <input size="30" required="required" placeholder="password" name="pwd1" id="pwd1" type="password"> 
               
                 <span class="hint" id="pwd1Hint"></span>
          </div>
          <div>
              <label for="password">Repeat Password</label>
              <input size="30" required="required" placeholder="repeat password" name="pwd2" id="pwd2" type="password"> 
              
                 <span class="hint" id="pwd2Hint"></span>
          </div>
                  
          <legend>Login Info</legend>
        </fieldset>

        <br>

        <fieldset id="bioInfo">
            <label for="bio">Brief Bio</label>
            <textarea wrap="soft" rows="6" cols="40" name="bio" id="bio"></textarea>
             <div id="charLimit">Limit: 140 characters. You have <span id="charsLeft">140</span>
            left.</div><br>

          <div id="selects">
            <div id="select1Div" style="float:left;margin-right:15px;"> Select
              Your &lt;Chain&gt; <br>
              
              <select name="firstSelect" id="firstSelect">
                <option>----</option>
              </select>
            </div>

            <div id="select2Div"> Select Your &lt;Chain Length&gt;
              <br>
              <select name="secondSelect" id="secondSelect">
                <option>----</option>
                &nbsp;
              </select>
            </div>
            <span id="feedback"></span>
           </div>

          <br>
          Contact Info<br>
              <fieldset name="Postal Code">
          <div>
              <label for="address">Address</label>
   ...

CSS

body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.container {
	width: 80%;
	margin: auto;
}

h4 {
	border-top: 1px solid black;
	padding-top: 1em;
	width: 95%;
}

.hint {
	display:none;
	color:red;
}

.button {
    text-indent:0;
    border:1px solid #eda933;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    height:65px;
    line-height:65px;
    padding: .5 em;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #cd8a15;
    background-color:#f6b33d;
}

.list_style1{
	border: 1px solid #ccc;
	width: 12em;
	padding: 2em;
	background-color: rgb(252, 236, 215);
}
.list_style2{
	border: 1px solid #ccc;
	width: 12em;
	padding: 2em;
	background-color: rgb(152, 175, 173);
}
.list_style2 li {
	list-style-image: url(../img/arrow_right.png);
}
.myTable{
	width: 28em;
	border: 1px solid #aaa;
}
.myTable th {
	border-bottom: 1px solid #a88;
}
.uid{
	width: 10em;
}

JavaScript

/*-------------------------------------------------------------------------------------------------
	PASSWORD
	-------------------------------------------------------------------------------------------------*/

    var pwd1 = document.getElementById("pwd1");
    var pwd2 = document.getElementById("pwd2");
    
    pwd1.addEventListener("keyup", function(){
        // pwd1 must have at least 8 characters
        if (pwd1.value.length < 8) {
           pwd1Hint.setAttribute('class', 'red');
           pwd1Hint.innerHTML = "Your password must be at least 8 characters.";            
        }
        // success
        if (pwd1.value.length >= 8) {
            //pwd1Hint.setAttribute('class', 'pass');
            pwd1Hint.innerHTML = "";
        }
    });
    
    pwd2.addEventListener("keyup", function(){
        // compare the values in the password fields
        if(pwd1.value != pwd2.value){
            //The passwords do not match
            pwd2Hint.setAttribute('class', 'red');
            pwd2Hint.innerHTML = "Your passwords must match";
            
        } else {
            //The passwords match
           //pwd2Hint.setAttribute('class', 'pass');
           pwd2Hint.innerHTML = "";
        }
    });
    
    

	/*-------------------------------------------------------------------------------------------------
	Counting Bio Characters: enter max of 140 and stop
	-------------------------------------------------------------------------------------------------*/
    
	var maxChars = 140;
    var bioInput = document.getElementById("bio");
    var c = document.getElementById("charsLeft");
    c.innerHTML = maxChars;

	// All we need is events, the length property, and writing
	// to the DOM to make a counter

	bioInput.addEventListener("keydown", charsLeft);

    function charsLeft(e) {
        var len = bioInput.value.length;
        //console.log(len);
        if (len >= maxChars) {
        console.log(maxChars);
            e.preventDefault();
         ...