Sweetalert Does Not Return False

Asked

Viewed 172 times

0

I made some inputs in text format and then created a function in javascript to check empty fields of the same, but when I press the button next it shows the error(the normal sweetalert box describing the error as expected)but then it moves on to the next normal page to give false, follow the code:

                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="endereco-aluno">Endereço: <font color="red">*</font></label>
                            <input type="text" class="form-control" id="endereco-aluno">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="bairro-aluno">Bairro: <font color="red">*</font></label>
                            <input type="text" class="form-control" id="bairro-aluno">
                        </div>
                    </div>

this is the normal html the button I made to check the fields was this:

                    <button class="forward" id="botaoProximo2" style="margin-top: 15px; float: right;"
                        onclick="SOLICITAR_ESTAGIO.verificaCamposDadosEstudante()">Próximo</button>

And that was the Jedi:

    verificaCamposDadosEstudante: function () {

        var endereco_aluno = $("#endereco-aluno").val();
        var bairro_aluno = $("#bairro-aluno").val();

        if (endereco_aluno == '') {
            swal("Oops", "Para avançar você precisar informar o Endereço.", "error");
            return false;
        } else if (bairro_aluno == '') {
            swal("Oops", "Para avançar você precisar informar a Bairro.", "error");
            return false;
        } 
    },

fields with READONLY are already filled in automatically and no verification is required

javascript sweetalert sweetalert2

  • Your button is inside a form?

  • No, it’s all inside a joint

  • Then you advance the page with another event or within the verificaCamposDadosEstudante?

  • onclick="SOLICITAR_ESTAGIO.checkCamposDadosEstudante()", in this event, I want to know if the problem is by the button class="forward" and so it might not be returning false

  • in onclick I do the checks of the empty fields and if I am sending the sweetalert and consequently the false, I will have to put the class of the foward button inside that javascript ? I don’t understand what’s going on

  • So you use some plugin to control this page? Because it seems that there is some event in that same button that runs along with its validation function

  • for me what I think is happening is the foward button shitting everything

  • no problem at all in the part you reported, I put a reply with a functional example.

  • post code related to SOLICITAR_ESTAGIO

  • There is no way javascript has more than 1300 lines and here it does not allow

Show 5 more comments

2 answers

0

Try to put in your event the e.stopImmediatePropagation() (MDN), it interrupts all other events that would run along with the button. You need to pass the event object with onclick="SOLICITAR_ESTAGIO.verificaCamposDadosEstudante(event)" 

$('.forward').on('click', function() { alert('Proxima Pagina') })

const SOLICITAR_ESTAGIO = {
     verificaCamposDadosEstudante: function (e) {

        var endereco_aluno = '';
        var bairro_aluno = '';

        if (endereco_aluno == '') {
            e.stopImmediatePropagation();
            swal("Oops", "Para avançar você precisar informar o Endereço.", "error");
            return false;
        } else if (bairro_aluno == '') {
            e.stopImmediatePropagation();
            swal("Oops", "Para avançar você precisar informar a Bairro.", "error");
            return false;
        } 
    },
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <button onclick="SOLICITAR_ESTAGIO.verificaCamposDadosEstudante(event)" class="forward" id="botaoProximo2" style="margin-top: 15px; float: right;" >Próximo</button>

0

Your sweetalert has no problem.

function verificaCamposDadosEstudante () {

        var endereco_aluno = $("#endereco-aluno").val();
        var bairro_aluno = $("#bairro-aluno").val();

        if (endereco_aluno == '') {
            swal("Oops", "Para avançar você precisar informar o Endereço.", "error");
            return false;
        } else if (bairro_aluno == '') {
            swal("Oops", "Para avançar você precisar informar a Bairro.", "error");
            return false;
        } 
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<div class="row">
                        <div class="form-group col-md-6">
                            <label for="endereco-aluno">Endereço: <font color="red">*</font></label>
                            <input type="text" class="form-control" id="endereco-aluno">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="bairro-aluno">Bairro: <font color="red">*</font></label>
                            <input type="text" class="form-control" id="bairro-aluno">
                        </div>
                    </div>

<button class="forward" id="botaoProximo2" style="margin-top: 15px; float: right;"
                        onclick="verificaCamposDadosEstudante()">Próximo</button>

  • the problem is that if Voce create another page and leave the button on foward in case of empty field the seewtalert does not return true, I think it is giving conflict with the foward...

  • @Arthurfelipe has no conflict probably you made some builder who is running something that should not. And you need to put true Return in the code also right after sweetalert

Browser other questions tagged javascript sweetalert sweetalert2

You are not signed in. Login or sign up in order to post.