ASP.NET學習筆記：如何使用CustomValidator驗證多個RadioButton ?

2019-10-14

622
0
Asp.net WebForm
2019-10-17

前言：一般在工作上我們會使用RequiredFieldValidator等asp元件配合TextBox元件去實做必填非必填等功能，但是當遇到RadioButton元件時竟然無法搭配RequiredFieldValidator元件做使用，此時爬了文發現.net還有一個客製化的元件叫做CustonValidator，讓我可以去驗證更多不只是TextBox以外的控制項，結合Js去判斷是否勾選等等。

Html 語法：從語法可以看到這是一組選擇狀態的RadioButton Group，每一組RadioButton 下面都會放置一個CustomValidator進行驗證，其中Question屬性是額外加入為了讓之後的Js可以辨別出哪一組Button為填寫，該JS函式放置在ClientValidationFundation 的屬性裡如ClientValidationFunction="CustomValidator1_ClientValidate"， JS 中的CustomValidator1_ClientValidate(source,args)函示，透過source即可取得該驗證物件。

                                  <div class="row">
                                        <label class="col-md-5 col-form-label text-left"><span class="text-danger">*</span> 狀態</label>
                                        <div class="col-md-7">
                                            <div class="form-check" style="margin-top: 15px;">                              
                                                   <label class="form-check-label">
                                                    <asp:RadioButton ID="rb狀態_1" AutoPostBack="true" OnCheckedChanged="rb狀態_1_CheckedChanged" runat="server" Text="已獲准"  GroupName="狀態" />
                                                </label>
                                                <label class="form-check-label">
                                                    <asp:RadioButton ID="rb狀態_2" AutoPostBack="true" OnCheckedChanged="rb狀態_2_CheckedChanged" runat="server"  Text="申請中"  GroupName="狀態" />
                                                </label>
                                                <label class="form-check-label">
                                                    <asp:RadioButton ID="rb狀態_3" AutoPostBack="true" OnCheckedChanged="rb狀態_3_CheckedChanged" runat="server"  Text="著作/出版品完成後即取得智財權"  GroupName="狀態"  />
                                                </label>
                                                      <asp:CustomValidator ID="CustomValidator3"   Question="狀態" runat="server" ClientValidationFunction="CustomValidator1_ClientValidate" ForeColor ="Red" ErrorMessage="請勾選題目！"></asp:CustomValidator>
                                            </div>
                                        </div>
                                    </div>

JS語法：透過JQuery中的$('#'+ID).attr()等函示透過Question屬性即可取得驗證元件，之後要進行是否有勾選等驗證就輕鬆多了。

  function CustomValidator1_ClientValidate(source, args) {
             var question = $('#' + source.id).attr("Question");
             var radioValue = $("input[name='" + question + "']:checked").val();
             if (radioValue) {
                 args.IsValid = true;
             }
             else {
                 args.IsValid = false;
             }
         }

回首頁