Form Validation with Submit

Asked

Viewed 665 times

3

In My project I have three formularies being one independent of the other. The form1, form2 e form3. The form1 are mandatory fields to be filled in, and these data will be necessary to generate the information of the other two forms. So follow my problem, how can I check whether the form1 was filled in at the time I do the Submit by form2 ou form3? I managed to treat it with PHP, when you arrive on the page PHP I make a isset in the POST to see if the data from form1 came also, only that I need this work to be carried out on the client’s side.

<form class="form-horizontal" id="FormInfObg" action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST">
    <input type="text" class="form-control" name="nome" placeholder='<?php if(isset($_POST['nome'])){$_SESSION['nome']=$_POST["nome"];echo $_SESSION['nome'];}else{ echo "Nome Completo";}?>'>
    <input type="text" class="form-control" name="cargo" placeholder='<?php if(isset($_POST['cargo'])){$_SESSION['cargo']=$_POST["cargo"];echo $_SESSION['cargo'];}else{ echo "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>
php javascript jquery

  • From what you’re saying, you need to do the POST of FORMs via Ajax, but to present the best way you need to post the content of your page in the question...

  • All right, see if it helps.

  • The first form need to be saved before or only filled and will save at once?

  • It needs to be saved first. In order to avoid the situation of the user submit of the other two forms without having completed the form1

3 answers

0

Well if you have 2 Forms and they depend on Form1, I suggest you put the Form1 data on Hidden Fields in the 2 Forms...

I imagine the flow is this...

1° user fills the data in Form1

2° user clicks *(on some button, to save to server or to continue)

3° depending on the data that was entered the user is redirected to form2 or form3

4° Form1 data are set in <input type="hidden" name="dado_do_form1"/> via javascript in the form that was redirected

5° user fills in the remaining form2 or form3 data and sends it to server

6° server checks incoming data

If you have 2 Forms and der Submit in 1 of them, the data from the other form will not be sent.

  • I’ve done this kind of checking, when it hits the page PHP checks whether the data of the form1 were sent, if not returned to the HTML. Only when he returns to the HTML, the completed data disappear after the submit.

  • If you have 2 or more Forms and der Submit in 1 of them the data from the other Forms will not be sent. What you need to do is in Form1 to make 1 normal button and play an action in the click of it to fill the data of camp hidde in the following form.

0

You can validate in the event Submit of the form, and if the user has not filled in the values of the first, the second will not be submitted. 

$("#form2").submit(function(event) {
  event.preventDefault();      

  if (!validarForm1())
    alert("Primeiro preencha o primeiro formulário");
  else {
    // post por ajax do segundo formulário
  }

});

$("#form3").submit(function(event) {
 // faca a mesma coisa 
});

function validarForm1(){
    var form1Campo1 = $("#form1Campo1").val(),
        form1Campo2 = $("#form1Campo2").val();

    if (!form1Campo1 || !form1Campo2)
        return false;
    else
        return true;
}

Jsfiddle: https://jsfiddle.net/lbclucascosta/xyLrx3eg/2/

  • Then I’d have to do an event like this for each form? For example, $("#form3").submit(function(event) { ..}); That?

  • but I call where this function? In the button or in the form? For example, <form onsubmit="return validarForm1()"> or <button class="btn btn-default" onclick="validarForm1()">

  • I put her inside the event submit, here: if (!validarForm1()). Note that there it is being invoked.

0

In order to avoid the situation of the user doing the Submit of the other two Forms without having filled the Form1

validation with Jquery - performed on client side

Make all Buttons with the class btn trigger an event.

OBS: put ids in the inputs of the first form txt_1 and 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;
        }
    });

});

Full example for when to return to HTML, the filled data NÃO sumirem after the Submit. Comments on the code

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

Browser other questions tagged php javascript jquery

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