JSFiddle - React, Tailwind, and code Playground

by eddiriarte

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<form id="contact-form" class="form-horizontal" method="POST">
    <fieldset>
        <legend>Sample Contact Form <small>(will not submit any information)</small>
        </legend>
        <div class="control-group">
            <label class="control-label" for="name">Your Name</label>
            <div class="controls">
                <input type="text" class="input-xlarge" name="name" id="name">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="email">Email Address</label>
            <div class="controls">
                <input type="text" class="input-xlarge" name="email" id="email">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="subject">Subject</label>
            <div class="controls">
                <input type="text" class="input-xlarge" name="subject" id="subject">
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="message">Your Message</label>
            <div class="controls">
                <textarea class="input-xlarge" name="message" id="message" rows="3"></textarea>
            </div>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary btn-large">Submit</button>
            <button type="reset" class="btn">Cancel</button>
        </div>
    </fieldset>
</form>

JavaScript

function formValidation() {
    var validation = false;
    $(".help-inline").remove();
    var email = $("input[name=email]");
    if (email.val() == "") {
        validation = false;
        setError(email, "Empty field not allowed!");
    } else { setSuccess(email); }
    if (!isEmail(email.val())) {
        validation = false;
        setError(email, "This ist not an allowed E-Mail-Address!");
    } else { setSuccess(email); }
    return validation;
}

function setError(element, message = "") {
    var field = element.parent().parent();
    field.removeClass("error");
    field.removeClass("success");
    field.addClass("error");
    
    var help = element.parent().children(".help-inline");
    if (help.length > 0) {
        if (message !== "") { message = "<br>" + message; }
        help.append(message);
    } else {
        if (message !== "") {
            element.parent().append("<span class='help-inline'>" + message + "</span>");
        }
    }
}

function setSuccess(element, message = "") {
    var field = element.parent().parent();
    field.removeClass("error");
    field.removeClass("success");
    field.addClass("success");
    
    var help = element.parent().children(".help-inline");
    if (help.length > 0) {
        if (message !== "") { message = "<br>" + message; }
        help.append(message);
    } else {
        if (message !== "") {
            element.parent().append("<span class='help-inline'>" + message + "</span>");
        }
    }
}

function isEmail(email) {
    var regex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if(!regex.test(email)) {
        return false;
    }
    return true;
}

$("#contact-form").submit(formValidation);