Mostra div se la convalida fallisce

Question

Voglio questo div per mostrare se la convalida del modulo non ha successo.

<div class="alert"> 
    <strong>Warning!</strong> @Html.ValidationSummary(false, "Fix these errors:") 
</div> 

Ho cercato di avvolto all'interno

if(! ViewData.ModelState.IsValid) 

ma div non viene visualizzato quando inviare il modulo. Probabilmente perché non è stata postata la validazione di jquery. La logica di validazione sembra accettabile, se rimuovo il sommario della convalida dell'istruzione if elenca tutti i campi di input non corretti.

Come è possibile alternare la visibilità del div in base alla convalida?

Answer 1

È possibile applicare questo semplice script. Non è molto sofisticato, ma dovrebbe fare il trucco

$(document).ready(function() { 
    $('.alert').hide(); //hides the div on page load 
    $('#submit').click(function() { //assumes your submit button has id="submit" 
     $('.alert').show(); //shows the div when submit is clicked 
    }); 
}); 

Come potete vedere, questo in realtà non preoccupa la convalida. Rende semplicemente il div 'alert' visibile quando si fa clic sul pulsante di invio. Se ci sono errori di convalida, il div verrà mostrato con i tuoi avvertimenti. Se il modulo è valido, sto presupponendo un aggiornamento o un reindirizzamento, quindi il div non avrà mai la possibilità di mostrarlo.

Answer 2

Aggiornamento

ho riscritto la risposta accettata. Se la connessione al server è lenta, il div error sarà visibile durante la richiesta del server. Anche se non ci sono errori. L'ho modificato per verificare se il modulo è valido quando si invia il modulo. Questo snippet di codice presuppone che tu abbia un modulo.

$(document).ready(function() { 
    $(".alert").hide(); //hides the div on page load 

    $("form").submit(function() { 
     if (!$(this).valid()) { 
      $('.alert').show(); 
     } 
    });   
});