Validating user input using different javascript functions

Here's a solution that should support IE8+, but don't have IE8, so I can't confirm. It's written in Vanilla JavaScript, but you can clean this up a lot by using jQuery or some other framework.

Degrading your Browser

To simulate an old browser, I need to disable all "required" attributes. It's good to include them even if your browser doesn't support it as coding to the HTML5 standard will allow your web page to be forward compatible.

Here is a method to "turn-off" all required inputs.

// Strip out the require to simulate IE9
var simulateLegacyBrowser = function() {
    var nodes = document.querySelectorAll('[required=true]');
    Array.prototype.forEach.call(
        Array.prototype.slice.call(nodes),
        function(node) {
            node.required = false;
        });
};

Setting up your HTML

If you don't have access to the required attribute due to a legacy browser, the next best thing you can do is name your classes. You can then access all "required" elements by the class name. As an example:

<form id='myForm'>
    <div class="required">
        <label for='field1'>Field 1</label>
        <input typue="text" id='field1' name='field1' required='true' />
        <span class='status'></span>
    </div>
    <div class="required">
        <label for='field2'>Field 1</label>
        <input typue="text" id='field2' name='field2' required='true' />
        <span class='status'></span>
    </div>
    <div>
        <input type='submit' />
    </div>
</form>

Validating your Form

To validate the form, you'll have to hijack the onSubmit function. When working with JavaScript, it's best to be as unobtrusive as possible. That means that the HTML shouldn't be dependent on the JavaScript. If the user uses a browser without JavaScript, you'll have to use the server to validate your forms.

Here is the code. I had to create some helper methods to keep the code clean and working across browsers. This isn't a full proof solution, as it only select .required inputs. You'll have to modify this to support <select>, <textarea>, etc... I'll leave that as an exercise for you.

A note on getNextNode. The reason why I can't just call node.nextSibling is that in some browsers, node.nextSibling will return the next text node, in contrast, some browsers return the next element. So we need to setup a function to ensure cross-browser compatibility.

This code can be further generalized to work with any form you want, but I'll leave that to you to fix up.

// Get the next Element
var getNextNode = function(root) {
    var node = root;
    do {
        node = node.nextSibling;
    } while ( node.nodeType != 1 );
    return node;
};

// Set an input as invalid
var setInvalid = function(input) {
    var status = getNextNode(input);
    status.textContent = "This is a required field";
    input.className = [input.className, 'invalid'].join(' ');
};

// Set an input as valid
var setValid = function(input) {
    var status = getNextNode(input);
    status.textContent = '';
    input.className = input.className.replace(/invalid/g, '');
};

document.forms['myForm'].onsubmit = function(e) {
    e.preventDefault();
    e.stopPropagation();
    // Change this to select required elements
    var requiredInputs = document.querySelectorAll('.required input'); 
    // Loop through each "required" input
    Array.prototype.forEach.call(
        Array.prototype.slice.call(requiredInputs),
        // For each input
        function(input) {
            // If it's valid is empty
            if (input.value.length === 0) {
                setInvalid(input);
            } else {
                setValid(input);
            }
        });
};

Making it pretty

To make this look nice to the end user, if it permits, try to use CSS. This will separate your presentation from your logic. Use classes in your logic to call the correct presentations to apply. As an example, here is the presentation for this:

.required label:after {
    content: '*';
}

.required .status {
    color: red;
}

.required .invalid {
    border: 1px solid red;
}

Putting it all together

You can see a working example at this jsFiddle. Good luck and have fun coding!

Advanced Solution

For your interest, a more advance solution is available at this jsFiddle. I won't attach the code to this solution as it is beyond the scope, but it is much more configurable. In this solution, you can modify your HTML and then add the state settings for your HTML to a configuration array, which will update the DOM based on the state of the input.

You seem to be re-inventing the wheel a little bit. Why don't you simply add required to your input fields to stop them from being blank?

http://www.w3schools.com/tags/att_input_required.asp

That way it'll sort this issue out for you and you don't have the horrible alert message involved at all