Enhanced form

Example using a lot of Form extra's found in -more: - Form.Request - Form.Validator - OverText - Spinner (though without image)

by fizerkhan

HTML

<form id="myForm" action="/echo/html/" method="post">
    <fieldset>
        <legend>Contact form example</legend>
        <ul>
            <li><input type="text" name="name" class="required" title="Name" /></li>
            <li><input type="text" name="email" class="required validate-email" title="Email" /></li>
            <li><input type="text" name="phone" title="Phone" /></li>
            <li><input type="text" name="url" title="Website / blog" /></li>
            <li><textarea id="myMessage" name="message" class="required" title="Message" rows="5" cols="30"></textarea></li>
            <li>
                <label>Would you like to &lt;something&gt;?</label>
                <input type="radio" id="news_y" name="newsletter" />
                <label for="news_y">Yes</label>
                <input type="radio" id="news_n" name="newsletter" class="validate-one-required" />
                <label for="news_n">No</label>
            </li>
        </ul>
    </fieldset>
    <div><input type="submit" value="Send" /></div>
</form>
<div id="myResult"></div>

CSS

* {
    font-family: sans-serif;
    font-size: 12px;
}
fieldset {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
ul {
    list-style: none;
}
li {
    position: relative;
}
[type=text], [type=submit], textarea {
    margin-top: 3px;
    padding: 1px;
    border: 1px solid #000000;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
[type=check], [type=radio], [type=submit] {
    cursor: pointer;
}
label {
    display: block;
}
[type=check] + label, [type=radio] + label {
    display: inline-block;
    cursor: pointer;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
    background-color: #ddffdd;
}
.validation-failed {
    border-color: #ff0000;
    background-color: #ffdddd;
}
.validation-advice {
    padding-bottom: 5px;
    font-weight: bold;
    color: #ff0000;
}
#myResult {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #0000ff;
    background-color: #ddddff;
}
#myResult:empty {
    border-width: 0;
    padding: 0;
}
.spinner {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background-color: #f0f0f0;
}
.overTxtLabel {
    color: #888888;
}

JavaScript

// Code below works with both MooTools 1.2 and 1.3.

// The elements used.
var myForm = document.id('myForm'),
    myResult = document.id('myResult');

// Labels over the inputs.
myForm.getElements('[type=text], textarea').each(function(el){
    new OverText(el);
});

// Validation.
new Form.Validator.Inline(myForm);

// Ajax (integrates with the validator).
new Form.Request(myForm, myResult, {
    requestOptions: {
        'spinnerTarget': myForm
    },
    extraData: { // This is just to make this example work.
        'html': 'Form sent.'
    }
});