Validando inputs no form

Oi pessoal. Criei dois arquivos de validação pra um site, um mostrando quais campos não foram validados ao pressionar o botão enviar e outro contendo os padrões necessários para que o campo seja válido. Eles funcionam bem separadamente, mas quando tento usar ambos na mesma página apenas um funciona e o outro não. Será que eles são mutuamente exclusivos? O input-validation.js é um exemplo de validação que encontrei aqui (https://www.sitepoint.com/instant-validation/), não entendo tudo o que o código faz mas decidi usar já que ainda não domino bem essa parte. Se não tiver jeito deles funcionarem juntos, qual seria a melhor alternativa pra fazer essas validações? Muito obrigada!

form.js

var contact = document.querySelector("#send");
 contact.addEventListener("click", function(event) {
    event.preventDefault();

    var erros = validateForm(contact);
    console.log(erros);

    if(erros.length > 0) {
        exibeErro(erros);
        return;
    }

    var errorMessage = document.querySelector("#error-message");
    errorMessage.innerHTML = "";
})

function exibeErro(erros){
    var ul = document.querySelector("#error-message");
    ul.innerHTML = "";

    erros.forEach(function(erro){
        var li = document.createElement("li");
        li.textContent = erro;
        ul.appendChild(li);
    });
}

function validateForm(contact) {

    var erros = [];

    if (document.forms["contactForm"]["name"].value == "") {
        erros.push("Name must be filled out");
    }

    if (document.forms["contactForm"]["email"].value == "") {
        erros.push("Email must be filled out");
    }

    if (document.forms["contactForm"]["msg"].value == "") {
        erros.push("Message cannot be blank");
    }

    return erros;
}

input-validation.js

function addEvent(node, type, callback) {
  if (node.addEventListener) {
    node.addEventListener(
      type,
      function(e) {
        callback(e, e.target);
      },
      false
    );
  } else if (node.attachEvent) {
    node.attachEvent("on" + type, function(e) {
      callback(e, e.srcElement);
    });
  }
}

//identify whether a field should be validated
//ie. true if the field is neither readonly nor disabled,
//and has either "pattern", "required" or "aria-invalid"
function shouldBeValidated(field) {
  return (
    !(field.getAttribute("readonly") || field.readonly) &&
    !(field.getAttribute("disabled") || field.disabled) &&
    (field.getAttribute("pattern") || field.getAttribute("required"))
  );
}

//field testing and validation function
function instantValidation(field) {
  //if the field should be validated
  if (shouldBeValidated(field)) {
    //the field is invalid if:
    //it's required but the value is empty
    //it has a pattern but the (non-empty) value doesn't pass
    var invalid =
      (field.getAttribute("required") && !field.value) ||
      (field.getAttribute("pattern") &&
        field.value &&
        !new RegExp(field.getAttribute("pattern")).test(field.value));
    //add or remove the attribute is indicated by
    //the invalid flag and the current attribute state
    if (!invalid && field.getAttribute("aria-invalid")) {
      field.removeAttribute("aria-invalid");
    } else if (invalid && !field.getAttribute("aria-invalid")) {
      field.setAttribute("aria-invalid", "true");
    }
  }
}
//now bind a delegated change event
//== THIS FAILS IN INTERNET EXPLORER <= 8 ==//
//addEvent(document, 'change', function(e, target)
//{
//  instantValidation(target);
//});
//now bind a change event to each applicable for field
var fields = [
  document.getElementsByTagName("input"),
  document.getElementsByTagName("textarea")
];
for (var a = fields.length, i = 0; i < a; i++) {
  for (var b = fields[i].length, j = 0; j < b; j++) {
    addEvent(fields[i][j], "change", function(e, target) {
      instantValidation(target);
    });
  }
}

contact.html

        <form action="#" method="get" name="contactForm" autocomplete="on">
                <fieldset>
                    <label for="name" title="Required">Name</label>
                    <input type="text" id="name" name="name" autofocus required="required"
                            aria-required="true" 
                            pattern="^([- \w\d\u00c0-\u024f]+)$"
                            size="20"
                            spellcheck="false"
                            value="">
                    <label for="email" title="Required">Email</label>
                    <input type="text" id="email" name="email" required="required"
                            aria-required="true"
                            pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$" 
                            size="30"
                            spellcheck="false"
                            value="">
                </fieldset>
                <fieldset>
                    <label for="msg" title="Required" autocomplete="off">Message</label>
                    <textarea id="msg" name="message" cols="60" rows="10" placeholder="Type your message here"
                            required="required"
                            aria-required="true"
                            spellcheck="true"></textarea>
                    <ul id="error-message"></ul>
                    <button id="send" type="submit">Send</button>
                </fieldset>