.click not working when it enters if statement

I need to validate some inputs in order for the user to click the second link, like if inputs are empty don't let the user click on the second link. I know it gets to the function because i have an alert when it enters the if statement but it wont click.

I tried using return false; and i tried $("#crearCuestionario").click();that id is from the first link so when it enters the if it clicks on the first link in order for the user not to enter the second link.

here is the code:

function checkCampoVacio() {
            var titulo = $("#titulo").val();
            var textCuestionario = $("#mansajecreator2").val();
            var textCuestionario2 = $("#mensajecreator100").val();
          debugger;   
            if(titulo  ==  ''){     

                $("#titulo").css("border","1px solid red");
                $("#crearCuestionario").click();
                alert("Porfavor no dejes campos vacios");



            }else if (textCuestionario == '') {

                $("#mansajecreator2").css("border","1px solid red");
                $("#crearCuestionario").click();   
                alert("Porfavor no dejes campos vacios");
                document.getElementById("crearCuestionario").click();



            } else if(textCuestionario2 == ''){

                $("#mansajecreator100").css("border","1px solid red");
                alert("Porfavor no dejes campos vacios");
                 $("#crearCuestionario").click();   

            }else{
                 savelmainf();
            }

        }

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

         checkCampoVacio();

        }); 

And here is the html of the links/buttons:

<!-- Stepper -->
        <div class="steps-form-2" >
            <input type="hidden" id="masteridquest" value="">
            <div class="steps-row-2 setup-panel-2 d-flex justify-content-between">
                <div class="steps-step-2">
                    <a href="#step-1" id="crearCuestionario" class="btn btn-amber btn-circle-2 waves-effect ml-0" data-toggle="tooltip" data-placement="top" title="Crear cuestionario"><span class="glyphicon glyphicon-edit"></span></a>
                </div>
                <div  id="masteridquestb" class="steps-step-2">
                    <a href="#step-2" id="saveMainQuest" class="btn btn-blue-grey btn-circle-2 waves-effect" data-toggle="tooltip" data-placement="top" title="Crear preguntas"><span class="glyphicon glyphicon-comment"></span> </a>
                </div>
                <div   id="masteridquestc" class="steps-step-2">
                    <a href="#step-3"  id="saveMainQuest2"  class="btn btn-blue-grey btn-circle-2 waves-effect" data-toggle="tooltip" data-placement="top" title="Probar cuestionarios"><span class="glyphicon glyphicon-ok-circle"></span></a>
                </div>
                <div   id="masteridquestd" class="steps-step-2">
                    <a href="#step-4"  class="btn btn-blue-grey btn-circle-2 waves-effect mr-0" data-toggle="tooltip" data-placement="top" title="Terminar y publicar"><span class="glyphicon glyphicon-thumbs-up" ></span></a>
                </div>
            </div>
        </div>

I need that when the user clicks on the second link it wont let him if the inputs are empty or just return him where he was.

via Chebli Mohamed