Created
January 15, 2013 17:04
-
-
Save sruli/4540147 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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 class="mimi_field checkgroup"> | |
<div class="check"> | |
<input id="list_107" name="lists[]" value="107" type="checkbox" checked="checked"> | |
<label for="list_107">11</label> | |
<span class="mimi_field_feedback"></span><span class="mimi_funk"></span> | |
</div> | |
<div class="check"> | |
<input id="list_108" name="lists[]" value="108" type="checkbox" checked="checked"> | |
<label for="list_108">111</label> | |
<span class="mimi_field_feedback"></span><span class="mimi_funk"></span> | |
</div> | |
<div class="check"> | |
<input id="list_33" name="lists[]" value="33" type="checkbox" checked="checked"> | |
<label for="list_33">5000 Example.coms</label> | |
<span class="mimi_field_feedback"></span><span class="mimi_funk"></span> | |
</div> | |
<div class="check"> | |
<input id="list_27" name="lists[]" value="27" type="checkbox" checked="checked"> | |
<label for="list_27">Another new list</label> | |
<span class="mimi_field_feedback"></span><span class="mimi_funk"></span> | |
</div> | |
</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 = /.+@.+\..+/; | |
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"); | |
21 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 = ""; | |
} | |
} | |
} | |
})(); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment