Edit in JSFiddle

$(function () { // on DOM ready

    var formValidation = (function ($) { // self executing anonymous function => Revealing module pattern

        var config = {
            'fields': $('form input[type=text], form input[type=password], form input[type=email], form[type=number]')
        };

        var init = function () {
            bindEvents();
        };

        var bindEvents = function () {
            // blur 'required' field
            $(datajs('req', 'required')).on('blur', blurHandler);

            // click 'submit' button
            $(datajs('type', 'submit')).on('click', clickHandler);
        };

        // ---
        // event callbacks
        // ---
        var blurHandler = function (el) {
            var elem = $(el.currentTarget);
            var val = elem.val();
            var dataType = elem.data('type');
            var validateResult = validateField(val, dataType);
            console.log('Field validated... result: ' + JSON.stringify(validateResult, null, 4));
        };

        var clickHandler = function (el) {
            el.preventDefault();

            // setup message for user
            var message = {
                'result': 'success',
                    'message': ''
            };

            // validate all fields
            config.fields.each(function (index, element) {
                var validateResult = validateField($(element).val(), $(element).data('type'));
                if (!validateResult.value) { // error in field
                    message.message += validateResult.message + '|';
                    message.result = 'error';
                }
            });

            // return message to user
            console.log('Form validated... result: ' + JSON.stringify(message, null, 4));
        };



        // validate one field given its value and data type [email or phone]
        var validateField = function (v, dt) {
            var r = {
                'value': true,
                    'message': ''
            };
            if (v === '') {
                r.value = false;
                r.message = 'field empty';
            }
            if (dt === 'email' && !isEmail(v)) {
                r.value = false;
                r.message = 'no valid emailaddress';
            } else if (dt === 'phone' && !isPhone(v)) {
                r.value = false;
                r.message = 'no valid dutch phonenumber';
            }
            return r;
        };

        // ---
        // helpers
        // ---
        var datajs = function (key, value) {
            return document.querySelectorAll('[data-' + key + '=' + value + ']');
        };

        var isEmail = function (email) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            return regex.test(email);
        };

        var isPhone = function (phone) { // Dutch phonenumber, 10 digits
            var regex = /^([0-9]{10})+$/;
            return regex.test(phone);
        };

        return { // expose functions via object literal
            init: init
        };

    })(jQuery);

    formValidation.init();

});
<h2>Fill out the form below!</h2>

<p>Open your console to see the validation messages</p>

<form>
    <div class="form-cntr">
        <input type="email" placeholder="Your email" data-req="required" data-type="email">
    </div>
    <div class="form-cntr">
        <input type="text" placeholder="Your username" data-req="required">
    </div>
    <div class="form-cntr">
        <input type="text" placeholder="Your telephone number" data-req="required" data-type="phone">
    </div>
    <div class="form-cntr">
        <button type="submit" data-type="submit">Click to validate</button>
    </div>
</form>
.form-cntr {
    display: block;
    margin: 10px;
    width: 150px;
}
.form-cntr input {
    padding: 8px 20px;
    width:100%;
}
.form-cntr button[type=submit] {
    background: #fc0000;
    border: none;
    border-radius: 0;
    padding: 8px 20px;
    width:100%;
    color: white;
}
.form-cntr button[type=submit]:hover {
    cursor: pointer;
    background: #d50000;
}