Skip to main content
4 de 4
removeu 117 caracteres do conteúdo
user avatar
user avatar

Para não ter situação de o usuário fazer o submit dos outros dois forms sem ter preenchido o form1

validação com Jquery - realizado no lado do cliente

Faça que todos os buttons com a classe btn disparem um evento.

OBS: coloque ids nos inputs do primeiro formulario txt_1 e txt_2

$(document).ready(function(){
    $(".btn").click(function(e) {
        if($("#txt_1").val()== "" || $("#txt_2").val() ==""){

            //aqui você decide, pode ser um alerta, mudar a cor de fundo dos inputs, as bordas etc..
            alert('Campos vazios');  
            if($("#txt_1").val()== ""){
                $('#txt_1').css("background-color", "#FA8258");
            }else{
                $('#txt_1').css("background-color", "Aquamarine");
            }
            if($("#txt_2").val()== ""){
                $('#txt_2').css("background-color", "#FA8258");
            }else{
                $('#txt_2').css("background-color", "Aquamarine");
            }

            e.preventDefault();//evito o submit do form ao apertar o enter..    
            return false;
        }
    });

});

Exemplo completo para quando retornar para o HTML, os dados preenchidos NÃO sumirem após o submit. Comentários no código

<?php
session_start();

//cria as sessions para preencher os values dos inputs no submit do form
if(isset($_POST['nome'])){
    $_SESSION['nome']=$_POST["nome"];
}
if(isset($_POST['cargo'])){
    $_SESSION['cargo']=$_POST["cargo"];
}

?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".btn").click(function(e) {
        if($("#txt_1").val()== "" || $("#txt_2").val() ==""){

            //aqui você decide, pode ser um alerta, mudar a cor de fundo dos inputs, as bordas etc..
            alert('Campos vazios');  
            if($("#txt_1").val()== ""){
                $('#txt_1').css("background-color", "#FA8258");
            }else{
                $('#txt_1').css("background-color", "Aquamarine");
            }
            if($("#txt_2").val()== ""){
                $('#txt_2').css("background-color", "#FA8258");
            }else{
                $('#txt_2').css("background-color", "Aquamarine");
            }

            e.preventDefault();//evitar o submit do form ao apertar o enter..    
            return false;
        }
    });

});
</script>

<!-- ##  Você deve usar o atributo value para definir o valor enviado pelos inputs e ao retornar preenche-lo com o valor da session ## -->

<form class="form-horizontal" id="FormInfObg" action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST">
    <input type="text" class="form-control" name="nome" id="txt_1" value='<?php  echo $_SESSION['nome'] ?>' placeholder='Nome Completo'>
    <input type="text" class="form-control" name="cargo" id="txt_2" value='<?php  echo $_SESSION['cargo'] ?>' placeholder='Cargo'>
    <button class="btn btn-default" name="btnSalvar" value="btnSalvar">Salvar <span class="fa fa-floppy-o"></span></button>
</form>

 <form class="form-horizontal" id="Form2" action="proc.php" method="POST">
    <input type="text" class="form-control" name="filial">
    <button class="btn btn-default" type="submit" value="btnSubmitForm2">Enviar</button>
</form> 

<form class="form-horizontal" id="Form3" action="proc.php" method="POST">
    <input type="text" class="form-control" name="nSerial">
    <button class="btn btn-default" type="submit" value="btnSubmitForm3">Enviar</button>
</form>
user60252