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 - Exemplo funcional
<?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>