RISOLTO validazione html senza bloccare invio

[BigIssue]

@zabi credo che tu gli stia complicando la vita cosi... piuttosto che ci faccia vedere il suo codice.... aspetterei a parlare di Php quando questi controlli li puo' fare tutti client side senza troppi problemi con una sola funzione

Sono d'accordo.

I controlli li puo fare anche in html5.

Puo darsi che la validazione lato server non gli serva.

Attualmente valida la form in html5. Se tutti i campi sono validi allora puo fare la richiesta per l'invio di dati. In caso contrario la puo fare comunque ma solo dei campi validi. li ho messo la struttura presa dal framework bootstrap.

 

[personalele]

Ciao e grazie a tutti.
Ho provato la soluzione di @zabi che ringrazio, ma che sembra non permettere di continuare il submit se la validazione fallisce. Il problema non è nella validazione dei dati in quanto lato server con PHP è già implementata. Avrei bisogno solamente di "evidenziare" all'utente i campi che ha tralasciato o inserito male ogni volta che apre i form (sono diversi moduli di raccolta informazioni). Volevo solo trovare una "scorciatoia" alla soluzione di @Skills07 che dovrei implementare sia per ogni controllo, per avere la validazione in tempo reale, che in fase di caricamento del form, per avere la situazione quando l'utente accede in modifica ai dati già memorizzati. Per quello avevo pensato di rendere obbligatori tutti i campi e validarli con HTML con i pattern, se solo riuscissi poi a salvare i dati nonostante la validazione html fallita.
Vi ringrazio!
Gabriele.

 

[Skills07]

@personalele la funzione che ti ho dato basta chiamarla una volta sulla submit, implementando li dentro i tuoi controlli.

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

puoi attuare anche un qualcosa cosi.

 

[BigIssue]

Ho provato la soluzione di @zabi che ringrazio, ma che sembra non permettere di continuare il submit se la validazione fallisce.

Ora ho capito. Non ti permette di continuare con il submit perchè è impostata per inviare i dati in modo asincrono in ajax.
In questo modo:

$(document).ready(function(){
   
    (function () {
      'use strict'

      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.querySelectorAll('.needs-validation')

      // Loop over them and prevent submission
      Array.prototype.slice.call(forms)
        .forEach(function (form) {
           
          form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
              event.preventDefault()
              event.stopPropagation()
            }
       
           
            form.classList.add('was-validated')
          }, false);
         
         
          $('#btnsubmit').click(function(event){
             
              var vusername = $("#username").val();
             
              console.log("username " + vusername);
             
              $.post("http://localhost/index.php", //Required URL of the page on server
                        { username:vusername },
               
                        function(response,status){ // Required Callback Function
                            alert("response: " + response+" status : " + status);
                        });
          });
         
        });  
   
    })()
   
});

Ma capisco che invece è richiesto l'effettivo submit. Allora l'impostazione è diversa.

1. Valida l'input lato client
2. effettua il submit comunque
3. aggiorna la pagina con i messaggi di errore e campi compilati ricevuti dal controllo lato server.

Dovrò trovare una libreria che mi fa le validazioni dei campi in php (non potendo usare un framework come codeigniter).

Senza complicare

nella pagina dove ce la validazione imposti i messaggi di errore in variabili di sessione:

session_start();
if(isset($_POST['username'])){
    
    if(empty($_POST['username'])){
        $err_fname = "Il campo username non puo essere vuoto";
        $_SESSION['form_username_error'] = $err_fname;
    }else{
        $fname = htmlentities(strip_tags(mysqli_real_escape_string($con, $_POST['username'])), ENT_QUOTES, 'UTF-8');
    }
    
}

nella pagina dove invii la form controlli se ci sono messaggi di errore nella sessione:

<?php session_start();
if(isset($_SESSION['form_username_error'] ) &&
   !empty($_SESSION['form_username_error'] ){
?>
     <input type="text" class="form-control was-validated " id="username" placeholder="Username" required value="<?php echo $_SESSION['form_username_valid'] ?>">
     <!-- html di messaggio di errore ->
     <?php echo $_SESSION['form_username_error'];
}
?>

 

[personalele]

Ragazzi vi ringrazio tutti,
farò una nuova domanda nel merito specifico di javascript, ma credo di poter dichiarare RISOLTO il problema della validazione dei campi.
A presto, Gabriele.

 

[BigIssue]

Ragazzi vi ringrazio tutti,
farò una nuova domanda nel merito specifico di javascript, ma credo di poter dichiarare RISOLTO il problema della validazione dei campi.
A presto, Gabriele.

Ottimo! ci sei riuscito.

 

[Skills07]

Ottimo perfetto chiudo