検証に失敗した場合にdivを表示

Question

フォームの検証に失敗した場合、このdivを表示します。

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

私は

if(! ViewData.ModelState.IsValid) 

内側に包ましようとしましたが、フォームを送信する際のdivは表示されません。おそらく、jqueryの正当な検証のためのポストバックがないからです。 if文の検証要約リストをすべて削除して、すべての誤った入力フィールドを削除しても、検証ロジックは問題ないようです。

検証に基づいてdivの表示を切り替えるにはどうすればよいですか？

Answer 1

この簡単なスクリプトを適用できます。それは非常に洗練されていないのですが、あなたが見ることができるように、それはトリックに

$(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 
    }); 
}); 

を行う必要があり、これは実際に検証を気にしません。送信ボタンがクリックされると、単に 'alert' divが表示されます。検証エラーがある場合、divに警告が表示されます。フォームが有効な場合は、リフレッシュするかリダイレクトしているので、divに実際に表示することはありません。

Answer 2

更新

私は受け入れ答えを書き直しました。サーバー接続が遅い場合は、サーバーリクエスト中にエラーdivが表示されます。エラーがない場合でも。フォームを送信するときにフォームが有効かどうかを確認するために変更しました。このコードスニペットは、1つのフォームがあることを前提としています。

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

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