Sử dụng xác thực không phô trương trong ASP.NET MVC 3, làm cách nào tôi có thể thực hiện hành động khi biểu mẫu không hợp lệ?

Question

Tôi có một trang có các tab Giao diện người dùng jQuery trên đó và một trường bắt buộc duy nhất trên tab đầu tiên. Xác thực hoạt động và thông báo xác thực xuất hiện bên cạnh trường nếu người dùng không nhập giá trị. Tuy nhiên, nếu người dùng không ở trên tab đầu tiên, không rõ là trường này không hợp lệ.

Trong trường hợp này, tôi muốn hiển thị tab đầu tiên, nhưng tôi không biết cách đăng ký gọi lại cho sự kiện 'không hợp lệ', nếu có.

Tôi cũng đã xem xét hiển thị tóm tắt xác thực phía trên các tab, tab này sẽ hiển thị bất kể tab người dùng đang bật, nhưng tùy chọn của tôi sẽ đưa người dùng đến trường.

Tôi đã thử xem qua tệp jquery.validate.unobtrusive.js và dường như mở rộng jquery.validate.js. Nhìn vào tài liệu cho jquery.validate, tôi thấy có một tùy chọn invalidHandler có thể được chuyển đến validate method, nhưng tôi không biết cách sử dụng điều này vì phương thức đó được gọi là jquery.validation.unobtrusive.

Tôi cảm thấy hơi bị mất ở đây, vì vậy mọi trợ giúp sẽ được đánh giá cao!

Sửa

tôi không bao giờ tìm ra câu trả lời, nhưng đã tìm ra một cách giải quyết, mà tôi đăng tải dưới đây. Tuy nhiên, tôi hy vọng một người nào đó trả lời với một cách tốt hơn để làm điều này.

Answer 1

tôi đã kết thúc việc chứng thực và nộp mẫu đơn bằng tay:

$("#save-button").button().click(function() { 
    if (!$("#profile-form").valid()) { 
     if ($("#tabs").tabs("option", "selected") > 0) { 
      $("#tabs").tabs("option", "selected", 0); 
     } 
     return false; 
    } 
    $("#profile-form").submit(); 
}); 

Answer 2

bạn có thể muốn search cho errorPlacement() chức năng

Answer 3

Hãy thử thêm một bộ chuyển đổi mới để phô trương.

Đánh dấu của tôi trông khác vì tôi đã sử dụng Telerik thay vì giao diện người dùng JQuery để tạo các tab. Đây là những gì đánh dấu của tôi trông giống như sau khi đi qua Validator (ví dụ, với lỗi xác nhận chèn qua kịch bản phô trương)

<div id="rItemTabs"> 

    <ul> 
     <li><a href="#rItemTabs-1">Tab 1</a></li> 
     <li><a href="#rItemTabs-2">Tab 2</a></li> 
    </ul> 
    <!-- End Tab Nav--> 

    <!-- Begin Tab Contents --> 
    <div id="rItemTabs-1"> 
     <div class="editor-label"> 
      <label for="Title">Title</label> 
     </div> 
     <div class="editor-field"> 
      <input id="Title" class="input-validation-error name="Title"> 
      <span class="field-validation-error">*</span> 
     </div> 
    </div> 

    <div id="rItemTabs-2"> 
     <div class="editor-label"> 
      <label for="Title">Title</label> 
     </div> 
     <div class="editor-field"> 
      <input id="Title" class="input-validation-error name="Title"> 
      <span class="field-validation-error">*</span> 
     </div> 
    </div> 

</div> 

Mục tiêu của kịch bản này là để đi qua từng div trong "Tab Contents", tìm " field-validation-error "class (chỉ nên tồn tại nếu có lỗi), và nếu lớp này được tìm thấy thì thay đổi màu của mục Nav Tab được liên kết (tức là id của nội dung tab giống với href của tab nav item).

$.validator.unobtrusive.adapters.add(
    'tab-validation', 
    function() { 
     var tabs = $('#rItemTabs [id*=rItemTabs]'); 
     $(tabs).each(function() { 
     if ($(this).has('.field-validation-error').length) { 
      var tabId = '#' + $(this).attr('id'); 
      $('a[href=' + tabId + ']').css({ 'color': 'red', 'font-weight': 'bolder' }); 
     } 
    }); 
} (jQuery)); 

Tôi hy vọng điều này có ý nghĩa cũng như phù hợp với bạn.

Answer 4

Mã này lấy từ here sẽ làm những gì bạn muốn:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myForm").submit(function() { 
      $("#tabs").tabs("select", $("#myForm .input-validation-error").closest(".ui-tabs-panel").get(0).id); 
     }); 
    }); 
</script> 

Nó sẽ đưa bạn đến tab đầu tiên có một lỗi. Nó làm việc tuyệt vời trong một dự án Tôi đang phát triển ...

Answer 5

Dưới đây là giải pháp mà làm việc cho tôi:

<button type="submit" onclick="ValidateRequired();">Save</button> 

function ValidateRequired(){ 
    $(':input[required]', '#myForm').each(function(){ 
     if ($(this).val() == ''){ 
      var errorTab = $(this).closest('div').attr('id'); 
      $('#tabs').tabs('select', '#'+errorTab); 
     } 
    }); 
}