至少選中一個複選框 - Asp.Net MVC - jQuery

我想通過使用「@ Html.ValidationMessageFor」在客戶端驗證表單。它正確地爲文本框工作。我在表單中也有一些複選框。我想用相同的方法來驗證，每個組至少有一個複選框被選中。但是如果我沒有弄錯的jQuery驗證插件使用複選框的名稱如果選擇至少一個知道的人（例如：http://jqueryvalidation.org/files/demo/radio-checkbox-select-demo.html）：至少選中一個複選框 - Asp.Net MVC - jQuery

<html> 
    <head> 
     <script src="http://jqueryvalidation.org/files/lib/jquery-1.11.1.js"></script> 
     <script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"> </script> 
     <script> 
      $(document).ready(function() { 
       $("#form1").validate({ 
        rules:{ 
         spamName: { 
          required: true, 
         }, 
        }, 
        messages:{ 
         spamName:{ 
         required: "This is my custom message", 
         }, 
        } 
       }); 
      }); 
     </script> 
     <style> 
      .block { 
       display: block; 
      } 
      form.cmxform label.error { 
       display: none; 
      } 
     </style> 
     <title></title> 
    </head> 
    <body> 
     <form class="cmxform" id="form1" method="get" action=""> 
      <fieldset> 
       <legend>Spam</legend> 
       <label for="spam_email"> 
       <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spamName" required>Spam via E-Mail 
    </label> 
       <label for="spam_phone"> 
        <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spamName">Spam via Phone 
    </label> 
       <label for="spam_mail"> 
        <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spamName">Spam via Mail 
    </label> 
       <label for="spamName" class="error">This field is required custom message.</label> 
      </fieldset> 
      <p> 
       <input class="submit" type="submit" value="Submit"> 
      </p> 
     </form> 
    </body> 
</html>

所以複選框應該有相同的名稱組。

這意味着在提交表單後不可能檢索哪些值，因爲名稱用於通過在名稱（http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx）中添加索引屬性將html表單綁定到模型。

是否有人知道或有解決方案來繞過此問題？

的代碼示例是：

public class Mandatory 
{ 
    public Mandatory() 
    { 
     CheckboxItems = new List<CheckboxItem>(); 
    } 

    public IList<CheckboxItem> CheckboxItems { get; set; } 
} 
public class CheckboxItem 
{ 
    public bool CheckboxValue { get; set; } 

    public string Name { get; set; } 
}

在視圖：

@model WebApplication20.Models.Mandatory 
@using (Html.BeginForm("Index", "Home", FormMethod.Post)) 
{ 
    @Html.ValidationMessageFor(model => model.CheckboxItems) 
    @Html.EditorFor(model => model.CheckboxItems) 
    <input type="submit" value="Submit" id="submit"> 
}

編輯器模板中使用：

@model WebApplication20.Models.CheckboxItem 
<div class="form_row"> 
    @Html.HiddenFor(x => x.Name, Model.Name) 
    <label for="@Model.CheckboxValue"></label> 
    <span class="content-checkbox"> 
     @Html.CheckBoxFor(x => x.CheckboxValue) 
     @Html.LabelFor(x => x.CheckboxValue, Model.Name) 
    </span> 
</div>

最後在HomeController中：

public ActionResult Index() 
{ 
    var items = new Mandatory(); 
    items.CheckboxItems.Add(new CheckboxItem 
    { 
     CheckboxValue = true, 
     Name = "test 1", 
    }); 

    items.CheckboxItems.Add(new CheckboxItem 
    { 
     CheckboxValue = false, 
     Name = "test 2", 
    }); 

    items.CheckboxItems.Add(new CheckboxItem 
    { 
     CheckboxValue = true, 
     Name = "test 3", 
    }); 

    return View(items); 
} 

[HttpPost] 
public ActionResult Index(Mandatory test) 
{ 
    return RedirectToAction("Index"); 
}

Thx！

來源

2014-10-27 prorace

看來，頂部HTML片段是一個測試用例與普通的HTML ，不在'asp.net mvc'中。想知道你是否使用'Microsoft.jQuery.Unobtrusive.Validation'？ – 2014-10-28 01:46:53

開箱即可解決此問題。創建服務器端驗證就足夠簡單了，但客戶端驗證需要創建自己的驗證器，該驗證器只適用於模型中的一個特定屬性。只要處理'submit'事件並取消事件並顯示一條消息（並處理所有「複選框」的更改事件以刪除該消息）將會容易得多 – 2014-10-28 10:28:16

Venkaka，實際上我正在使用不顯眼的驗證。這個html代碼片段就是爲了顯示jquery驗證僅在複選框具有相同名稱時才起作用。如果可以使用不同的複選框名稱進行驗證，我可以調整asp.net mvc來呈現正確的html。 – prorace 2014-10-28 20:11:37

我實現的解決方案：

添加（在我的例子強制性類）模型中的一個額外的字符串屬性，與「必需的」屬性
顯示該屬性爲隱藏字段
實施所有複選框上的onchange jquery事件。在這個事件中，我檢查是否至少有一個複選框被選中。
如果至少選中了一個複選框，我填充顯示爲隱藏字段的新屬性的值。否則，我刪除這個隱藏字段的值。
然後我調用我的隱藏字段上的「有效」方法來自動顯示或刪除錯誤消息。

作爲用於驗證字段是隱藏的（一個由複選框組），默認jQuery驗證行爲需要進行修改：

jQuery.validator.setDefaults({ 
     ignore: "" 
    });

來源

2014-10-28 20:30:22 prorace

請問您可以分享代碼嗎？ – 2017-12-21 09:30:48

至少選中一個複選框 - Asp.Net MVC - jQuery

回答

相關問題