星期四, 7月 29, 2010

[Asp.Net] 如何使用javascript 控制 .net 驗證控制項

今天遇到了一個需求,起因是因為使用textbox搭配jquery datepicker元件驗證控制項時,
使用IE8瀏覽時,會產生javascript錯誤訊息(使用1.3.2,改用1.4.2不會有這個問題)
於是換了一個方法來直接避掉這個錯誤,於是又新增了第二個textbox,並利用css設定成style="visibility:hidden"。


 $(document).ready(function() {
       $("#<%=this.tbHWStart.ClientID%>").datepicker();

        $("#<%=this.tbHWStart.ClientID%>").change(function(){
           $("#<%=this.hdHwStart.ClientID%>").val($(this).val());
       });
});

不過不幸又產生另一個問題,
但驗證失敗時,再將值調回正確驗證的值時,並不會將錯訊訊息給hidden。
在第二個textbox接受到值時,並未呼叫客戶端的js來判斷驗證資料是否正確,
因此必需再補上客戶端的js method,透過google大神找到以下解法。


以下為驗證控制項在client提供的 js api
ValidatorValidate(val) Takes a client-validator as input. Makes the validator check its input and update its display.
ValidatorEnable(val, enable) Takes a client-validator and a Boolean value. Enables or disables a client validator. Being disabled will stop it from evaluating and it will always appear valid.
ValidatorHookupControl(control, val) Takes an input HTML element and a client-validator. Modifies or creates the element's change event so that it updates the validator when changed. This can be useful for custom validators that depend on multiple input values.



ValidatorValidate(val) 則是我需要的方法,加上去後就大告完成!!
 $(document).ready(function() {
      $("#<%=this.tbHWStart.ClientID%>").datepicker();

       $("#<%=this.tbHWStart.ClientID%>").change(function(){
           $("#<%=this.hdHwStart.ClientID%>").val($(this).val());
            //Page_ClientValidate();
                     ValidatorValidate(document.getElementById('<%=RequiredFieldValidator2.ClientID%>'));
            ValidatorValidate(document.getElementById('<%=RegularExpressionValidator1.ClientID%>'));

        });

       });

註:Page_ClientValidate()是會呼叫驗證所有頁面上的驗證控制項

頁面配置:
<asp:TextBox ID="tbHWStart" runat="server" CssClass="keyTxt"></asp:TextBox>
                                 <asp:TextBox ID="hdHwStart" runat="server"  style="visibility:hidden"></asp:TextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
                                    ControlToValidate="hdHwStart" ErrorMessage="必填" CssClass="errorTip"
                                        ValidationGroup="Add"></asp:RequiredFieldValidator><br />
                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1"
                                    runat="server" ControlToValidate="hdHwStart" ErrorMessage="时间格式错误"
                                    ValidationExpression="^[0-9]{2}/[0-9]{2}/[0-9]{4}$" CssClass="errorTip"
                                        ValidationGroup="Add"></asp:RegularExpressionValidator>
                 



目前想到的解法,記錄一下。

Reference:
How to control ASP.NET Validator Controls Client Side validation from JavaScript

ASP.NET Validation in Depth(很詳細的MSDN文件)

沒有留言:

張貼留言

留個話吧:)

其他你感興趣的文章

Related Posts with Thumbnails