JavaScript - Validación de formulario en JavaScript

document.addEventListener("DOMContentLoaded", function() {

    var elements = document.getElementsByTagName("INPUT");

    for (var i = 0; i < elements.length; i++) {

        elements[i].oninvalid = function(e) {

            e.target.setCustomValidity("");

            if (!e.target.validity.valid) {

                e.target.setCustomValidity("Este campo no puede quedar en blanco");

            }

        };

        elements[i].oninput = function(e) {

            e.target.setCustomValidity("");

        };

    }

    var elements = document.getElementsByTagName("SELECT");

    for (var i = 0; i < elements.length; i++) {

        elements[i].oninvalid = function(e) {

            e.target.setCustomValidity("");

            if (!e.target.validity.valid) {

                e.target.setCustomValidity("Debe seleccionar una especialidad");

            }

        };

        elements[i].oninput = function(e) {

            e.target.setCustomValidity("");

        };

    }

});

$( "#submit" ).click(function() {

  solicitarCita($('#nombre').val(),$('#apellidos').val(),$('#id').val(),$('#email').val(),$('#telefono').val(),$('#especialidad').val(),$('#fecha').val(),$('#hora').val(),$('#notas').val());

});

<form id="apply_form" method="post">

    <ul class="form-style-1">

        <li>

            <label>Nombre Completo <span class="required">*</span></label>

            <input type="text" name="nombre" id="nombre" class="field-divided" placeholder="Nombre" required />&nbsp;<input type="text" name="apellidos" id="apellidos" class="field-divided" placeholder="Apellidos" required />

        </li>

        <li>

            <label>Identificación <span class="required">*</span></label>

            <input required placeholder="#-####-####" type="text" name="id" id="id" class="field-long"  />

        </li>

        <li>

            <label>Correo electrónico <span class="required">*</span></label>

            <input required placeholder="nom@gmail.com" type="email" name="email" id="email" class="field-long" pattern="^[\w._%-]+@[\w.-]+\.[a-zA-Z]{2,4}$"/>

        </li>

        <li>

            <label>Teléfono <span class="required">*</span></label>

            <input required placeholder="xxxx-xxxx" type="text" name="telefono" id="telefono" class="field-long" pattern="[0-9]" />

        </li>

        <li>

            <label>Especialidad<span class="required">*</span></label>

            <select name="especialidad" id="especialidad" class="field-select" required>

            <option value="Medicina General">Medicina General</option>

            <option value="Odontología">Odontología</option>

            <option value="Ginecología y Obstetricia">Ginecología y Obstetricia</option>

            <option value="Pediatría">Pediatría</option>

            <option value="Terapia Física">Terapia Física</option>

            </select>

        </li>

        <li>

            <label>Fecha de cita<span class="required">*</span></label>

            <input id="fecha" type="date" required="">

        </li>

        <li>

            <label>Hora de cita<span class="required">*</span></label>

            <input id="hora" type="time" required="">

        </li>

        <li>

            <label>Nota </label>

            <textarea name="notas" id="notas" class="field-long field-textarea"></textarea>

        </li>

        <li>

            <input type="submit" id="submit" value="Continuar" />

        </li>

    </ul>

</form>

$( "#submit" ).click(function(event) {

 event.preventDefault();

 solicitarCita($('#nombre').val(),$('#apellidos').val(),$('#id').val(),$('#email').val(),$('#telefono').val(),$('#especialidad').val(),$('#fecha').val(),$('#hora').val(),$('#notas').val());

});

document.addEventListener("DOMContentLoaded", function() {

    var elements = document.getElementsByTagName("INPUT");

    for (var i = 0; i < elements.length; i++) {

        elements[i].oninvalid = function(e) {

            e.target.setCustomValidity("");

            if (!e.target.validity.valid) {

                e.target.setCustomValidity("Este campo no puede quedar en blanco");

            }

        };

        elements[i].oninput = function(e) {

            e.target.setCustomValidity("");

        };

    }

    var elements = document.getElementsByTagName("SELECT");

    for (var i = 0; i < elements.length; i++) {

        elements[i].oninvalid = function(e) {

            e.target.setCustomValidity("");

            if (!e.target.validity.valid) {

                e.target.setCustomValidity("Debe seleccionar una especialidad");

            }

        };

        elements[i].oninput = function(e) {

            e.target.setCustomValidity("");

        };

    }

});

$( "#submit" ).click(function() {

    if (document.getElementById('apply_form').checkValidity()) {

        solicitarCita($('#nombre').val(),$('#apellidos').val(),$('#id').val(),$('#email').val(),

            $('#telefono').val(),$('#especialidad').val(),$('#fecha').val(),$('#hora').val(),$('#notas').val());

        alert("Validado");

    }

});