tengo el siguiente problema, tengo un botón que debería mostrar un modal con un formulario en su interior, pero el navegador me lanza el siguiente mensaje de error:
*Uncaught ReferenceError: formRol is not defined*
el código que tengo es:
--------Archivo function_roles.js:

    var formRol = document.querySelector("#formRol");
	formRol.onsubmit = function(e)
	{
		e.preventDefault();
		var intIdRol = document.querySelector('#idRol').value;
		var strNombre = document.querySelector('#txtNombre').value;
		var strDescripcion = document.querySelector('#txtDescripcion').value;
		var intStatus = document.querySelector('#listStatus').value;
		if (strNombre == '' || strDescripcion=='' || intStatus=='') 
		{
			swal("Atención", "Todos los campos son obligatorios", "Error");
			return false;
		}...

y el archivo donde esta el modal es:

    <div class="modal fade" id="modalFormRol" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
    <div class="modal-header headerRegister">
    <h5 class="modal-title" id="titleModal">Nuevo Rol</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
    <div class="tile">
    <div class="tile-body">
    <form id="formRol" name="formRol">
    <input type="hidden" id="idRol" name="idRol" value="">
    <div class="form-group">
    <label class="control-label">Nombre</label>
    <input class="form-control" id="txtNombre" name="txtNombre" type="text" placeholder="Nombre del rol" 
    required="">
    </div>
    <div class="form-group">
    <label class="control-label">Descripcion</label>
    <textarea class="form-control" id="txtDescripcion" name="txtDescripcion" rows="2" 
    placeholder="Descripcion del rol" required=""></textarea>
    </div>
                
    <div class="form-group">
    <label for="exampleSelect1">Estado</label>
    <select class="form-control" id="listStatus" name="listStatus" required="">
    <option value="1">Activo</option>
    <option value="2">Inactivo</option>
    </select>
    </div>
    <div class="tile-footer">
    <button id="btnActionForm" class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check- 
    circle"></i><span id="btnText">Guardar</span></button>&nbsp;&nbsp;&nbsp;<a class="btn btn-secondary" 
    href="#" data-dismiss="modal"><i class="fa fa-fw fa-lg fa-times-circle"></i>Cancelar</a>
    </div>
    </form>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>

Alguien puede ayudarme con este error? me tiene loco y no se como solucionarlo.
Gracias.