gistfile1.txt

<form action="http://localhost:3000/signups/subscribe/9" method="post" id="mad_mimi_signup_form" target="_blank"> 
  <fieldset> 
   <div class="mimi_field text email required"> 
    <label for="signup_email">Email</label> 
    <input id="signup_email" name="signup[email]" type="text" placeholder="you@example.com" class="required" /> 
    <div class="mimi_field_feedback"></div><span class="mimi_funk"></span> 
   </div> 
   <div class="mimi_field text"> 
    <label for="signup_first_name" id="wf_label">First Name</label> 
    <input id="signup_first_name" name="signup[first_name]" type="text" /> 
    <div class="mimi_field_feedback"></div><span class="mimi_funk"></span> 
   </div> 

  <div>
    <label>Foo</label>
    <select id="first" name='lists[]'>
      <option value="" />Please select...
      <option value="107" />11
      <option value="108" />111
    </select>
  </div>  

  <div>
    <label>Foo</label>
    <select id="second" name='lists[]'>
      <option value="" />Please select...
      <option value="33" />5000 Example.coms
      <option value="27" />Another new list
    </select>
  </div>  

   <div class="mimi_field action"> 
    <input id="webform_submit_button" value="Sign up!" type="submit" class="submit" data-default-text="Sign up!" data-submitting-text="Sending…" data-invalid-text="↑ You forgot some required fields" /> 
   </div> 
  </fieldset> 
 </form> 
<script type="text/javascript">
(function() {
  var form = document.getElementById("mad_mimi_signup_form"),
      submit = document.getElementById("webform_submit_button"),
      email = /.+@.+\..+/;

  addLoadEvent(function() {
    var dropdowns = form.getElementsByTagName("select");
    setInterval(function() {
      for(var i = 0; i < dropdowns.length; ++i) {
        if(dropdowns[i].value != "") {
          if(document.getElementsByClassName(dropdowns[i].id).length == 0) {
            var input = document.createElement("input");
            input.type = "hidden";
            input.className = dropdowns[i].id;
            input.name = "lists[]";
            input.value = "108";
            form.appendChild(input);
          }
        } else {
          var input = document.getElementsByClassName(dropdowns[i].id);
          if(input.length != 0) {
            input[0].parentNode.removeChild(input[0]);
          }
        }
      }
    }, 3000);
  });
      
  form.onsubmit = function(event) {
    var isValid = validate();
    if(!isValid) {
      for(var i = 0; i < form.elements.length; ++i) {
        var input = form.elements[i];
        if(input.className.indexOf("required") >= 0) {
          input.onchange = validate;
        }
      }
      return false;
    }
    if(form.getAttribute("target") != "_blank") {
      form.className = "mimi_submitting";
      submit.value = submit.getAttribute("data-submitting-text");    
    submit.disabled = true;
      submit.className = "disabled";
    }

    setTimeout(function() {
      for(var i = 0; i < form.getElementsByTagName("input").length; ++i) {
        var input = form.getElementsByTagName("input")[i];
        if(input.getAttribute("type") == "text") {
          input.value = "";
        }
        if(input.id == "signup_email") {
          input.placeholder = "you@example.com";
        } else {
          input.placeholder = "";
        }
      }
    }, 3000);
  };
  
  function validate() {
    var isValid = true;
    
    for(var i = 0; i < form.elements.length; ++i) {
      var input = form.elements[i],
          allDivs = input.parentNode.getElementsByTagName("div");

      if(input.className.indexOf("required") >= 0) {
        if(input.id == "signup_email") {
          if(!email.test(input.value)) {
            emailErrorMessage(input, allDivs);
            isValid = false;
          } else {
            removeErrorMessage(input, allDivs);
          }
        } else {
          if((input.type == "checkbox" && !input.checked) || input.value == "" || input.value == "-1") {
            fieldErrorMessage(input, allDivs);
            isValid = false;
          } else {
            removeErrorMessage(input, allDivs);
          }
        }
      }
    }
    
    form.className = isValid ? "" : "mimi_invalid";
    submit.value = isValid ? submit.getAttribute("data-default-text") : submit.getAttribute("data-invalid-text");
    submit.disabled = !isValid;
    submit.className = isValid ? "submit" : "disabled";
    
    return isValid;
  }

  function emailErrorMessage(input, allDivs) {
    if(input.getAttribute("data-webform-type") == "iframe") {
      input.className = "required invalid";
      input.placeholder = input.getAttribute("data-required-message") || "This field is required";
    } else {
      allDivs[0].innerHTML = input.getAttribute("data-invalid-message") || "This field is invalid";
    }
  }

  function fieldErrorMessage(input, allDivs) {
    if(input.getAttribute("data-webform-type") == "iframe") {
      input.className = "required invalid";
      input.placeholder = input.getAttribute("data-required-message") || "This field is required";
    } else {
      for(var i = 0; i < allDivs.length; ++i) {
        var element = allDivs[i];
        if(element.className.indexOf("mimi_field_feedback") >= 0) {
          return element.innerHTML = input.getAttribute("data-required-message") || "This field is required";
        }
      }
    }
  }

  function removeErrorMessage(input, allDivs) {
    if(input.getAttribute("data-webform-type") == "iframe") {
      input.className = "required";
    }

    for(var i = 0; i < allDivs.length; ++i) {
      var element = allDivs[i];
      if(element.className.indexOf("mimi_field_feedback") >= 0) {
        return element.innerHTML = "";
      }
    }
  }
  function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
      window.onload = func; 
    } else { 
      window.onload = function() { 
        if (oldonload) { 
          oldonload(); 
        } 
        func(); 
      } 
    } 
  }
})();
</script>