Forked3 for JaZahns video Unit 3B

by Lucille Kenney

HTML

<form autocomplete="off" action="" name="hw4Form" id="myform"><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"> 
              <br>
                 <span class="hint" id="pwd1Hint">Password is too short (must be at least 8 characters)</span>
          </div>
          <div>
              <label for="password">Repeat Password</label>
              <input size="30" required="required" placeholder="password" name="pwd2" id="pwd2" type="password"> 
              <br>
                 <span class="hint" id="pwd2Hint">Passwords don't match</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...

CSS

label {
    float: left;
    width: 110px;
}
form div {
    padding-bottom: 5px;
}
.error {
    color: red;
}

JavaScript

/* hw3b.js */

/*-------------------------------------------------------------------------------------------------
FORM VALIDATION ... javascript representation of this form using the DOM
-------------------------------------------------------------------------------------------------*/
// constructor to just get the first form on the page [0]
//this is the javascript Form object
var Form = function(obj){
    //this is the dom object
    this.form = obj.form || document.forms[0];
    //see the key value pairs and elements in the console
    //console.log(this.form.elements);

    // create an array of errors to keep track of them
    this.errors = [];
    
    // call the prototype that calls the Listener Even submit
    this.init();
    
};
// Event Listener
Form.prototype.init = function(){
    /* Scoping fix issue:
    // change this to that fixes the scoping issue for this inside the event listener
    // otherwise 'this' in the submit context is referring to the form DOM object
    // we want 'this.uname' or 'that.uname' to be associated with the javascript object form 
    // so that we can keep using it in the other functions
    */
    var that = this;
    this.form.addEventListener("submit", function(event){
    //console.log("submitted");
        
        // So in the init in the event listenter: As soon as submit is hit it grabs all of thes values
        //this.uname = this.form.elements["username"].value;
        that.uname = this.elements["username"].value;
        //that.pwd1 = this.elements["pwd1"].value;
        //that.pwd2 = this.elements["pwd2"].value;
        that.bio = this.elements["bio"].value;
        that.firstSelect = this.elements["firstSelect"].value;
        that.secondSelect = this.elements["secondSelect"].value;
        that.address = this.elements["address"].value;
        that.city = this.elements["city"].value;
        that.state = this.elements["state"].value;
        that.zip = this.elements["zip"].value;
        that.phone =...