0

Tenho uma tela de cadastro em uma modal bootstrap, porém ao fazer as validações, caso ocorra um erro ou o usuário deixou de preencher algum campo, a modal fecha.

<script>
 function enviar1() {

            if (document.getElementById('<% =PES_NM.ClientID %>').value == "") {
                //alert("Campo Nome é obrigatório!");
                document.getElementById('msg').innerHTML = "Campo Nome é obrigatório!";
                document.getElementById('<% =PES_NM.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =PES_END.ClientID %>').value == "") {
                document.getElementById('msg').innerHTML = "Campo Endereço é obrigatório!";
                //alert("Campo Endereço é obrigatório!");
                document.getElementById('<% =PES_END.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =PES_NUM_END.ClientID %>').value == "") {
                document.getElementById('msg').innerHTML = "Campo Número é obrigatório!";
                //alert("Campo Número é obrigatório!");
                document.getElementById('<% =PES_NUM_END.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =PES_CID.ClientID %>').value == "") {
                document.getElementById('msg').innerHTML = "Campo Cidade é obrigatório!";
                //alert("Campo Cidade é obrigatório!");
                document.getElementById('<% =PES_CID.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =PES_BAI.ClientID %>').value == "") {
                document.getElementById('msg').innerHTML = "Campo Bairro é obrigatório!";
                //alert("Campo Bairro é obrigatório!");
                document.getElementById('<% =PES_BAI.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =PES_CEP.ClientID %>').value == "") {
                document.getElementById('msg').innerHTML = "Campo CEP é obrigatório!";
                //alert("Campo CEP é obrigatório!");
                document.getElementById('<% =PES_CEP.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =PES_EMAIL.ClientID %>').value == "") {
                document.getElementById('msg').innerHTML = "Campo E-Mail é obrigatório!";
                //alert("Campo E-Mail é obrigatório!");
                document.getElementById('<% =PES_EMAIL.ClientID %>').focus();
                return false;
            }

            if (document.getElementById('<% =docTomador.ClientID %>').value.length == 14) {
                if (document.getElementById('<% =PES_INSCM.ClientID %>').value == "") {
                    document.getElementById('msg').innerHTML = "Campo Inscrição Municipal é obrigatório!";
                   // alert("Campo E-Mail é obrigatório!");
                    document.getElementById('<% =PES_INSCM.ClientID %>').focus();
                    return false;
                }
            }

        }


    </script>



   <div id="myModal" class="modal fade"  data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <%--     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;</button>--%>
                    <h4 class="modal-title" align="center">Cadastro de Pessoa</h4>
                </div>
                <div class="modal-body">
                    <div id="msg" aling="center"></div>
                    <table align="center" class="table table-overflow" width="100%" border="0">
                        <tr>
                            <td class="tblNormal" align="right">Documento:</td>

                            <td  align="left">
                                <asp:TextBox ID="PES_DOCID" runat="server" Width="150px" ReadOnly></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td class="tblNormal" align="right">Nome:</td>
                            <td align="left">
                                <asp:TextBox ID="PES_NM" runat="server" Width="300px" MaxLength="45"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td class="tblNormal" align="right">CEP:</td>
                            <td align="left">
                                <asp:TextBox ID="PES_CEP" runat="server" Width="100px" MaxLength="8"></asp:TextBox>
                                &nbsp;&nbsp;&nbsp;<font class="tblNormal">Numero:</font>&nbsp;&nbsp;&nbsp;
                                            <asp:TextBox ID="PES_NUM_END" runat="server" Width="40px" MaxLength="6"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td class="tblNormal" align="right">Endereço:</td>
                            <td align="left">
                                <asp:TextBox ID="PES_END" runat="server" Width="300px" MaxLength="45"></asp:TextBox></td>

                        </tr>
                        <tr>
                            <td class="tblNormal" align="right">Cidade:</td>
                            <td align="left">
                                <asp:TextBox ID="PES_CID" runat="server" Width="300px" MaxLength="45"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td class="tblNormal" align="right">Bairro:</td>
                            <td align="left">
                                <asp:TextBox ID="PES_BAI" runat="server" Width="300px" MaxLength="45"></asp:TextBox></td>
                        </tr>

                        <tr>
                            <td class="tblNormal" align="right">E-mail:</td>
                            <td align="left">

                                <asp:TextBox ID="PES_EMAIL" runat="server" Width="300px"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td class="tblNormal">
                                <div id="inscM1" align="right">Inscrição Municipal:</div>
                            </td>
                            <td align="left">
                                <div id="inscM2">
                                    <asp:TextBox ID="PES_INSCM" runat="server" Width="300px" MaxLength="45"></asp:TextBox>
                                </div>
                            </td>
                        </tr>

                    </table>
                </div>
                <div class="modal-footer" align="center">
                    <asp:Button runat="server" ID="btnSaveImage" Text="Enviar" class="btn btn-default"  OnClientClick="return enviar1();"
                        UseSubmitBehavior="false" data-dismiss="modal" OnClick="btnSaveImage_Click" />
                </div>
            </div>
        </div>
    </div>
1
  • Você está disparando o fechamento da modal no mesmo botão de submeter o formulário, remove isso, e use a resposta da submissão pra fechar a modal em caso de sucesso. Commented 18/09/2017 às 14:51

1 Resposta 1

0

Não entendi muito bem a sua dúvida, mas vi que você colocou para fechar o modal ao clicar em salvar. Isso não está correto, pois toda vez que você salvar, o modal será fechado.

Você deve mudar isso:

<asp:Button runat="server" ID="btnSaveImage" Text="Enviar" class="btn btn-default"  OnClientClick="return enviar1();"
                    UseSubmitBehavior="false" data-dismiss="modal" OnClick="btnSaveImage_Click" />

Para isso:

<asp:Button runat="server" ID="btnSaveImage" Text="Enviar" class="btn btn-default"  OnClientClick="return enviar1();"
                    UseSubmitBehavior="false" OnClick="btnSaveImage_Click" />

E se precisar fechar o modal, é só criar um botão novo com a função somente de fechar. Por exemplo:

<asp:Button runat="server" ID="btnCloseModal" Text="Close" class="btn btn-danger" data-dismiss="modal" />

E se quiser fechar o modal caso ocorra algum erro, é só colocar esse código acima do 'return false' no seu JavaScript.

$('#myModal').modal('hide');

Ele irá fechar o modal caso ocorra algum erro.

2
  • essa alteração é justamente o que eu queria, no entanto, o sistema não entra no Code Behide da página. A function Envia1 é só para validar os campos. Nesse caso eu faço um post por ajax? Commented 18/09/2017 às 16:44
  • Você pode verificar isso pelo JavaScript mesmo. Em vez de criar uma nova função e chamar ela. Verifica no JS se o botão foi pressionado. $('#btnSaveImage').click(function(){ //Resto do código aqui }); Commented 18/09/2017 às 23:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .