Hiển thị div nếu xác thực không thành công

Question

Tôi muốn div này hiển thị nếu xác thực biểu mẫu không thành công.

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

Tôi cố gắng để quấn nó bên

if(! ViewData.ModelState.IsValid) 

nhưng div không được hiển thị khi nộp mẫu đơn. Có lẽ vì không có đăng lại xác nhận jquery do. Logic xác nhận có vẻ ổn, nếu tôi xóa tóm tắt xác thực if-statement liệt kê tất cả các trường nhập không chính xác.

Làm cách nào để chuyển đổi chế độ hiển thị của div dựa trên xác thực?

Answer 1

Bạn có thể áp dụng tập lệnh đơn giản này. Nó không phải là rất phức tạp, nhưng nó nên làm các trick

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

Như bạn có thể thấy, điều này không thực sự quan tâm đến việc xác thực. Nó chỉ đơn giản là làm cho div 'cảnh báo' có thể nhìn thấy khi nhấn nút gửi. Nếu có lỗi xác thực, div sẽ hiển thị cùng với cảnh báo của bạn. Nếu biểu mẫu hợp lệ, tôi giả sử làm mới hoặc chuyển hướng, vì vậy div sẽ không bao giờ thực sự có cơ hội hiển thị.

Answer 2

Cập nhật

Tôi viết lại câu trả lời chấp nhận. Nếu kết nối máy chủ chậm thì div lỗi sẽ hiển thị trong yêu cầu máy chủ. Ngay cả khi không có lỗi. Tôi đã thay đổi nó để kiểm tra xem biểu mẫu có hợp lệ khi gửi biểu mẫu hay không. Đoạn mã này giả định bạn có một biểu mẫu.

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

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