Lucille 3B

by Lucille Kenney

HTML

<form autocomplete="off" method="post" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" action="" id="hw4Form" name="hw4Form"><br>

        <!-- from Nancy autocomplete="off" method="post" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" -->

        <fieldset name="LoginInfo">
          <div>
              <label for="username">Username</label>
              <input size="30" required="required" placeholder="username" name="username" pattern=".{2,}" type="text">
          </div>
           
          <div>
              <label for="password">Password</label>
              <input size="30" required="required" placeholder="password" name="pwd1" id="pwd1" type="password"> 
                <span id="pwd1Hint" class="hint">Password must be at least 8 characters.</span>
              <br>
          </div>
          <div>
              <label for="password">Repeat Password</label>
              <input size="30" required="required" placeholder="password" name="pwd2" id="pwd2" type="password"> 
              <span id="pwd2Hint" class="hint" >Passwords don't match</span>
              <br>
          </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>
               ...

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

/* hw4b.js */

window.onload = function(){

  /*-------------------------------------------------------------------------------------------------
  SET DEFAULT FOCUS TO USER NAME for EXTRA CREDIT
  -------------------------------------------------------------------------------------------------*/
  /*function setFocusToUserName(){
    document.getElementById("username").focus();
  }*/

  function setFocusToTextBox( _element ) {
    document.forms[ 'hw4Form' ].elements[ _element ].focus();

  }

  setFocusToTextBox( 1 );
  // sets focus on second element (username) of the form

  /*-------------------------------------------------------------------------------------------------
  PASSWORD FIELDS VALIDATION #1
  -------------------------------------------------------------------------------------------------*/
  var pwd1 = document.getElementById("pwd1");
  var pwd2 = document.getElementById("pwd2");

  //var success = "#66cc66";
  
  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 CHARACTERS MAX OF 140 IN BIO TEXT BOX #2
 ...