在ASP.NET驗證上打開手風琴表格面板

我有一個使用ASP.NET MVC編寫的表單，我已經使用JQuery-UI手風琴將信息，聯繫人和付款分成了三部分。在ASP.NET驗證上打開手風琴表格面板

我已經設置了一個PaymentViewModel，其中包含必要的數據註釋以進行驗證。該視圖是使用內置腳手架創建的，然後，我從那裏進行修改。

當我點擊提交表單驗證正確（不是100％確定，如果它是客戶端或服務器端）。但是，如果用戶正確填寫了第一個手風琴選項卡（信息）但忽略了其餘部分並點擊提交，則表單似乎不會提交。

它顯示在第一個選項卡輸入的所有信息，如果你手動點擊第二個或第三個標籤，它旁邊顯示在第二和第三選項卡中的輸入框驗證錯誤消息..

我會像它這樣做激活標籤與驗證錯誤的第一個實例，所以用戶知道他們錯過了什麼。即在上面的例子中，當他們點擊提交時第二個標籤打開。

我已經嘗試添加以下內容：

$(function() { 
    $('#CreatePayment').submit(function() { 

     $('#CreatePayment').validate({ 
      invalidHandler: function (event, validator) { 
       if (validator.numberOfInvalids() > 0) { 
        validator.showErrors(); 
        var index = $(".input-validation-error") 
         .closest(".ui-accordion-content") 
         .index(".ui-accordion-content"); 
        console.log(index); 
        $(".accordion").accordion("option", "active", index); 
       } 
      }, 
      ignore: [], 
     }); 

    }); 
});

但它仍然是做同樣的事情.. 有誰知道的方法來達到我所上述的？

簡體細節： PaymentViewModel：

// Tab1 
[Required] 
public String Info1 { get; set; } 
[Required] 
public String Info2 { get; set; } 
[Required] 
public String Info3 { get; set; } 

// Tab2 
[Required] 
public String Name { get; set; } 
[Required] 
public String Address { get; set; } 
[Required] 
[DataType(DataType.EmailAddress)] 
public String Email { get; set; } 

// Tab3 
[Required] 
public String ccName{ get; set; } 
[Required] 
public String CardNo{ get; set; } 
[Required] 
public String ccExpiry{ get; set; }

查看：

@using (Html.BeginForm("Create", "Payment", FormMethod.Post, new { id = "CreatePayment" })) 
{ 
    @Html.AntiForgeryToken() 

... 
    <div id="accordion"> 
    <h3>Info</h3> <!-- Tab1 --> 
    .. UNTOUCHED SCAFFOLDED FORM ... 

    <h3>Contact</h3> <!-- Tab2 --> 
    .. UNTOUCHED SCAFFOLDED FORM ... 

    <h3>Payment</h3> <!-- Tab3 --> 
    .. UNTOUCHED SCAFFOLDED FORM ... 

    @section Scripts { 

    <script src="~/Scripts/jquery.validate.js"></script> 

    <script> 
     $(function() { 
      $('#CreatePayment').submit(function() { 
       $('#CreatePayment').validate({ 
        invalidHandler: function (event, validator) { 
         if (validator.numberOfInvalids() > 0) { 
          validator.showErrors(); 
          var index = $(".input-validation-error") 
           .closest(".ui-accordion-content") 
           .index(); 
          console.log(index); 
          $(".accordion").accordion("option", "active", index); 
         } 
        }, 
        ignore: [], 
       }); 

      }); 
     }); 
     $(function() { 
      $("#accordion").accordion({ 
       heightStyle: "content" 
      }); 
     }); 
    </script>

感謝。

我嘗試過使用Chrome的JavaScript調試器，在console.log(index);上放置了一個斷點，但代碼從未停止過。進一步的調查顯示，只有在$('#CreatePayment').validate({行上存在斷點時纔會停止。之後的任何內容都會被跳過？

來源

2014-01-28 Jake

它看起來像你的唯一的問題是，這些行：

var index = $(".input-validation-error") 
    .closest(".ui-accordion-content") 
    .index(".ui-accordion-content");

當你傳遞一個選擇器index它看起來在當前背景下該選擇。換句話說，它試圖找到.ui-accordion-content內部的.ui-accordion-content的索引。這顯然不正確。如果您將其更改爲：

var index = $(".input-validation-error") .closest(".ui-accordion-content") .index();

它應該再工作，因爲它會返回我更新腳本如你所說當前選定的jQuery元素（.ui-accordion-content）

來源

2014-01-28 02:32:52

的索引。但它仍然在做同樣的事情。我還用調試測試更新了這個問題。 – Jake

在ASP.NET驗證上打開手風琴表格面板

回答

相關問題