JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<script src="http://www.ibiblio.org/wxyc/getElementsByClassName-1.0.1.js"></script>
<form class="formBuilder" action="/cs/Satellite" method="post">
    <input type="hidden" tabindex="-1" id="sitename_formid1225962538285" name="sitename" value="TheAustralian">
    <input type="hidden" tabindex="-1" id="cid_formid1225962538285" name="cid" value="1225962538285">
    <input type="hidden" tabindex="-1" id="pagename_formid1225962538285" name="pagename" value="Foundation/News_Form/formProcess">
    <fieldset>
        <legend><span class="legend-text">Please leave some feedback and we will get back to you</span></legend>
        <div class="form-item fpos-1 frpos-5">
            <label for="id1225962538285-1225962538249">
                <span class="label-text">Name<span class="required"><abbr title="required">*</abbr></span></span>
            </label>
            <input type="text" maxlength="50" size="20" class="required-field" name="form-name" id="id1225962538285-1225962538249">
        </div>
        <div class="form-item fpos-2 frpos-4">
            <label for="id1225962538285-1225962540527">
                <span class="label-text">Location<span class="required"><abbr title="required">*</abbr></span></span>
            </label>
            <input type="text" maxlength="50" size="20" class="required-field" name="form-location" id="id1225962538285-1225962540527">
        </div>
        <div class="form-item fpos-3 frpos-3">
            <label for="id1225962538285-1225962540642">
                <span class="label-text">Email<span class="required"><abbr title="required">*</abbr></span></span>
            </label>
            <input type="text" maxlength="50" size="20" class="required-field email" name="form-email" id="id1225962538285-1225962540642">
        </div>
        <div class="form-item fpos-4 frpos-2">
            <label for="id1225962538285-1225962538275">
                <span class="label-text">Comment<span class="required"><abbr...

JavaScript

window.onload = function() {
    var feedbackForm = getElementsByClassName("formBuilder"),
        feedbackName = document.getElementsByName("form-name")[0],
        feedbackLocation = document.getElementsByName("form-location")[0],
        feedbackEmail = document.getElementsByName("form-email")[0],
        feedbackComment = document.getElementsByName("form-comment")[0];

    feedbackForm.onsubmit = function() {
        var errors, errorDiv, errorUL = [];

        // check all the fields
        if (!feedbackName.value.match(/\b\w+\b/)) {
            errors.push("Please enter your full name");
        }
        if (!feedbackLocation.value.match(/\b\w+\b/)) {
            errors.push("Please enter your location");
        }
        if (!feedbackEmail.value.match(/^([0-9a-zA-Z]+[\-._+&])*[0-9a-zA-Z_]+@([\-0-9a-zA-Z]+[.])+[a-zA-Z]{2,6}$/)) {
            errors.push("Please enter a correct email address");
        }
        if (!feedbackComment.value.match(/\b\w+\b/)) {
            errors.push("Please make a comment");
        }

        // if there are errors, display them and cancel submit
        if (errors.length) {
            errorDiv = document.querySelector('#feedback-errors') || appendDiv(feedbackForm, {
                id: 'feedback-errors',
                innerHTML: '<ul></ul>'
            });
            errorUL = errorDiv.querySelector('ul');
            errorUL.innerHTML = errors.map(function(v) {
                return "<li>#{v}</li>";
            }).join('');
            return false;
        }

        // submit the form
        return true;

    };
}