2008-10-13 23 views

Trả lời

0

Dưới đây là một số tự chứa HTML/JS rằng hiện các trick:

<html> 
    <head> 
    <script type="text/javascript"> 
     function mkclr(cntl,clr) { 
     document.getElementById(cntl).style.backgroundColor = clr; 
     }; 
    </script> 
    </head> 
    <body> 
    <form> 
     <input type="textbox" id="tb1"></input> 
     <input type="submit" value="Go" 
     onClick="javascript:mkclr('tb1','red');"> 
     </input> 
    </form> 
    </body> 
</html> 
13

Bạn có thể sử dụng CustomValidator thay vì RequiredFieldValidator:

.aspx

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="" 
    ControlToValidate="TextBox1" ClientValidationFunction="ValidateTextBox" 
    OnServerValidate="CustomValidator1_ServerValidate" 
    ValidateEmptyText="True"></asp:CustomValidator> 

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

<script src="jquery-1.2.6.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    function ValidateTextBox(source, args) 
    { 
     var is_valid = $("#TextBox1").val() != ""; 
     $("#TextBox1").css("background-color", is_valid ? "white" : "red"); 
     args.IsValid = is_valid; 
    } 
</script> 

cs

protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args) 
{ 
    bool is_valid = TextBox1.Text != ""; 
    TextBox1.BackColor = is_valid ? Color.White : Color.Red; 
    args.IsValid = is_valid; 
} 

logic trong các chức năng client và máy chủ xác nhận là như nhau, nhưng các chức năng khách hàng sử dụng jQuery để truy cập giá trị textbox và sửa đổi màu nền của nó.

+0

Cảm ơn bạn rất nhiều – joncodo

+2

Nếu jquery không có mặt, bạn có thể sử dụng 'function ValidateTextBox (source, args) { var target = document.getElementById (" TextBox1 "); var is_valid = target.value! = ""; nếu (is_valid) { \t target.style.backgroundColor = "White"; \t} else { target.style.backgroundColor = "Red"; \t} args.IsValid = is_valid; } ' –

+0

thực hiện điều này có ngăn không cho đăng lại nếu không hợp lệ không? – DevDave

26

Điều bạn có thể làm là đăng ký hàm Javascript sẽ lặp qua mảng Page_Validators chung sau khi gửi và bạn có thể đặt nền phù hợp. Điều tốt đẹp về điều này là bạn có thể sử dụng nó trên tất cả các điều khiển của bạn trên trang. Chức năng trông như thế này:

function fnOnUpdateValidators() 
{ 
    for (var i = 0; i < Page_Validators.length; i++) 
    { 
     var val = Page_Validators[i]; 
     var ctrl = document.getElementById(val.controltovalidate); 
     if (ctrl != null && ctrl.style != null) 
     { 
     if (!val.isvalid) 
      ctrl.style.background = '#FFAAAA'; 
     else 
      ctrl.style.backgroundColor = ''; 
     } 
    } 
} 

Bước cuối cùng là để đăng ký kịch bản với sự kiện onsubmit:

VB.NET:

Page.ClientScript.RegisterOnSubmitStatement(Me.GetType, "val", "fnOnUpdateValidators();") 

C#:

Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "val", "fnOnUpdateValidators();"); 

Bạn sẽ duy trì trạng thái IsValid thích hợp trong tất cả các mã của bạn phía sau và nó có thể làm việc với tất cả các điều khiển của bạn.

Lưu ý: Tôi tìm thấy giải pháp này từ following blog. Tôi chỉ muốn ghi lại nó ở đây trong trường hợp blog nguồn bị hỏng.

+1

Tôi thích giải pháp này - một thay đổi mà tôi tự thực hiện là cho phép kiểm soát có nhiều trình xác thực. Không thể chỉnh sửa bài đăng vì vậy không chắc chắn cách chia sẻ nó. –

+1

Dieter G - chỉ cần thêm một câu trả lời khác với bản cập nhật – Rory

+0

đâu là WebForm_OnSubmit? tôi đã tìm kiếm toàn bộ dự án của mình nhưng không thể tìm thấy một tham chiếu đến nó – sQuijeW

3

Tôi thích câu trả lời của Alexander, nhưng muốn javascript trở nên chung chung hơn. Vì vậy, đây là một cách chung của tiêu thụ các lỗi từ một validator tùy chỉnh.

function ValidateTextBox(source, args) { 
     var cntrl_id = $(source).attr("controltovalidate"); 
     var cntrl = $("#" + cntrl_id); 
     var is_valid = $(cntrl).val() != ""; 
     is_valid ? $(cntrl).removeClass("error") : $(cntrl).addClass("error"); 

     args.IsValid = is_valid; 
    } 
1

Tôi cũng thích Alexanders và Steves trả lời nhưng tôi muốn giống như trong codebehind. Tôi nghĩ rằng mã này có thể làm điều đó nhưng nó khác nhau tùy thuộc vào thiết lập của bạn. Các điều khiển của tôi nằm bên trong một trình giữ chỗ.

protected void cvPhone_ServerValidate(object source, ServerValidateEventArgs args) 
{ 
    bool is_valid = !string.IsNullOrEmpty(args.Value); 
    string control = ((CustomValidator)source).ControlToValidate; 
    ((TextBox)this.Master.FindControl("ContentBody").FindControl(control)).CssClass = is_valid ? string.Empty : "inputError"; 
    args.IsValid = is_valid; 
} 
2

Tôi biết điều này là cũ, nhưng tôi có một kết hợp được sửa đổi khác từ Dillie-O và Alexander. Điều này sử dụng jQuery với sự kiện mờ để loại bỏ kiểu khi xác thực thành công.

function validateFields() { 
    try { 
     var count = 0; 
     var hasFocus = false; 

     for (var i = 0; i < Page_Validators.length; i++) { 
      var val = Page_Validators[i]; 
      var ctrl = document.getElementById(val.controltovalidate); 

      validateField(ctrl, val); 

      if (!val.isvalid) { count++; } 
      if (!val.isvalid && hasFocus === false) { 
       ctrl.focus(); hasFocus = true; 
      } 
     } 

     if (count == 0) { 
      hasFocus = false; 
     } 
    } 
    catch (err) { } 
} 

function validateField(ctrl, val) 
{ 
    $(ctrl).blur(function() { validateField(ctrl, val); }); 

    if (ctrl != null && $(ctrl).is(':disabled') == false) { // && ctrl.style != null 
     val.isvalid ? $(ctrl).removeClass("error") : $(ctrl).addClass("error"); 
    }    

    if ($(ctrl).hasClass('rdfd_') == true) { //This is a RadNumericTextBox 
     var rtxt = document.getElementById(val.controltovalidate + '_text'); 
     val.isvalid ? $(rtxt).removeClass("error") : $(rtxt).addClass("error"); 
    } 
} 
1

Một cách khác,

$(document).ready(function() { 
    HighlightControlToValidate(); 
    $('#<%=btnSave.ClientID %>').click(function() { 
     if (typeof (Page_Validators) != "undefined") { 
      for (var i = 0; i < Page_Validators.length; i++) { 
       if (!Page_Validators[i].isvalid) { 
        $('#' + Page_Validators[i].controltovalidate).css("background", "#f3d74f"); 
       } 
       else { 
        $('#' + Page_Validators[i].controltovalidate).css("background", "white"); 
       } 
      } 
     } 
    }); 
}); 

tham khảo: http://www.codedigest.com/Articles/ASPNET/414_Highlight_Input_Controls_when_Validation_fails_in_AspNet_Validator_controls.aspx

+2

Chào mừng bạn đến Stack Overflow! Trong khi điều này về mặt lý thuyết có thể trả lời câu hỏi, chúng tôi muốn bạn bao gồm các phần thiết yếu của bài viết được liên kết trong câu trả lời của bạn và cung cấp [liên kết để tham khảo] (http://meta.stackexchange.com/q/8259). Không làm điều đó để lại câu trả lời có nguy cơ bị thối liên kết. – Kev

2

Một khả năng khác ...mã này cung cấp một đường viền màu đỏ (hoặc bất kỳ thứ gì bạn đặt bên trong lớp CSS) vào điều khiển để xác thực (hoạt động cho danh sách thả xuống và hộp văn bản, nhưng có thể được mở rộng cho các nút ...)

Đầu tiên, tôi sử dụng một CustomValidator thay vì một RequiredFieldValidator, vì sau đó bạn có thể sử dụng ClientValidationFunction của CustomValidator để thay đổi CSS của điều khiển để xác thực.

Ví dụ: thay đổi biên giới của một MyTextBox textbox khi người dùng quên điền nó trong The CustomValidator cho sự kiểm soát MyTextBox sẽ trông như thế này:.

<asp:CustomValidator ID="CustomValidatorMyTextBox" runat="server" ErrorMessage="" 
    Display="None" ClientValidationFunction="ValidateInput" 
    ControlToValidate="MyTextBox" ValidateEmptyText="true" 
    ValidationGroup="MyValidationGroup"> 
    </asp:CustomValidator> 

Hoặc nó cũng có thể làm việc cho một DropDownList trong lựa chọn nào là bắt buộc. CustomValidator sẽ trông giống như trên, nhưng với ControlToValidate trỏ đến danh sách thả xuống.

Đối với tập lệnh phía máy khách, hãy sử dụng JQuery. Phương thức ValidateInput trông giống như sau:

<script type="text/javascript"> 
    function ValidateInput(source, args) 
    { 
     var controlName = source.controltovalidate; 
     var control = $('#' + controlName); 
     if (control.is('input:text')) { 
      if (control.val() == "") { 
       control.addClass("validation"); 
       args.IsValid = false; 
      } 
      else { 
       control.removeClass("validation"); 
       args.IsValid = true; 
      } 
     } 
     else if (control.is('select')) { 
      if (control.val() == "-1"[*]) { 
       control.addClass("validation"); 
       args.IsValid = false; 
      } 
      else { 
       control.removeClass("validation"); 
       args.IsValid = true; 
      } 
     } 
    } 
    </script> 

Lớp "xác nhận" là lớp CSS có chứa đánh dấu khi trình xác nhận được kích hoạt. Nó có thể trông như thế này:

.validation { border: solid 2px red; } 

PS: để làm cho công việc màu đường viền cho danh sách thả xuống trong IE, thêm thẻ meta sau để tiêu đề của trang: <meta http-equiv="X-UA-Compatible" content="IE=edge" />.

[*] Điều này giống với “InitialValue” của một RequiredFieldValidator. Đây là mục được chọn làm mặc định khi người dùng chưa chọn bất kỳ thứ gì.

18

Bạn có thể dễ dàng ghi đè hàm javascript của ASP.NET cập nhật hiển thị trường đã xác thực. Đây là một lựa chọn tốt đẹp vì bạn có thể giữ cho các Trình xác nhận hợp lệ hiện tại của bạn, và không phải viết bất kỳ logic xác nhận hợp lệ tùy chỉnh nào hoặc tìm kiếm các trường để xác nhận hợp lệ. Trong ví dụ dưới đây tôi thêm/loại bỏ một lớp 'lỗi' từ yếu tố phụ huynh có lớp 'kiểm soát nhóm' (vì tôi đang sử dụng twitter bootstrap css):

/** 
    * Re-assigns the ASP.NET validation JS function to 
    * provide a more flexible approach 
    */ 
    function UpgradeASPNETValidation() { 
     if (typeof (Page_ClientValidate) != "undefined") { 
      AspValidatorUpdateDisplay = ValidatorUpdateDisplay; 
      ValidatorUpdateDisplay = NicerValidatorUpdateDisplay; 
     } 
    } 

    /** 
    * This function is called once for each Field Validator, passing in the 
    * Field Validator span, which has helpful properties 'isvalid' (bool) and 
    * 'controltovalidate' (string = id of the input field to validate). 
    */ 
    function NicerValidatorUpdateDisplay(val) { 
     // Do the default asp.net display of validation errors (remove if you want) 
     AspValidatorUpdateDisplay(val); 

     // Add our custom display of validation errors 
     if (val.isvalid) { 
      // do whatever you want for invalid controls 
      $('#' + val.controltovalidate).closest('.control-group').removeClass('error'); 
     } else { 
      // reset invalid controls so they display as valid 
      $('#' + val.controltovalidate).closest('.control-group').addClass('error'); 
     } 
    } 

    // Call UpgradeASPNETValidation after the page has loaded so that it 
    // runs after the standard ASP.NET scripts. 
    $(document).ready(UpgradeASPNETValidation); 

này được chuyển thể luôn Somali hơi từ here và với thông tin hữu ích từ thesearticles.

+2

Điều này làm việc tuyệt vời cho những gì tôi cần. Cảm ơn bạn. –

+0

Hoạt động sai khi kiểm soát có nhiều trình xác nhận hợp lệ. –

+0

Đây là một ý tưởng tuyệt vời.Tôi đã cố gắng tìm cách để chiếm đoạt các công cụ xác thực hiện tại và điều này là hoàn hảo. Miễn là các tên hàm đó không bị thay đổi. Cảm ơn! Tôi nghĩ rằng bạn có ý kiến ​​của bạn xung quanh hợp lệ/không hợp lệ ngược trở lại, mặc dù. – xr280xr

4

Tôi thích câu trả lời của Rory, nhưng nó không hoạt động tốt với ValidationGroups, chắc chắn trong trường hợp của tôi, nơi tôi có hai trình xác nhận hợp lệ trên một trường được kích hoạt bởi hai nút khác nhau.

Vấn đề là ValidatorValidate sẽ đánh dấu trình xác nhận là 'isValid' nếu nó không nằm trong ValidationGroup hiện tại, nhưng mã thay đổi lớp của chúng tôi không chú ý. Điều này có nghĩa là màn hình không đúng (chắc chắn IE9 dường như không thích chơi).

như vậy để có được xung quanh nó tôi đã thực hiện những thay đổi sau:

/** 
    * Re-assigns the ASP.NET validation JS function to 
    * provide a more flexible approach 
    */ 
    function UpgradeASPNETValidation() { 
     if (typeof (Page_ClientValidate) != "undefined") { 
      AspValidatorUpdateDisplay = ValidatorUpdateDisplay; 
      ValidatorUpdateDisplay = NicerValidatorUpdateDisplay; 
      AspValidatorValidate = ValidatorValidate; 
      ValidatorValidate = NicerValidatorValidate; 
     } 
    } 

    /** 
    * This function is called once for each Field Validator, passing in the 
    * Field Validator span, which has helpful properties 'isvalid' (bool) and 
    * 'controltovalidate' (string = id of the input field to validate). 
    */ 
    function NicerValidatorUpdateDisplay(val) { 
     // Do the default asp.net display of validation errors (remove if you want) 
     AspValidatorUpdateDisplay(val); 

     // Add our custom display of validation errors 
     // IF we should be paying any attention to this validator at all 
     if ((typeof (val.enabled) == "undefined" || val.enabled != false) && IsValidationGroupMatch(val, AspValidatorValidating)) { 
      if (val.isvalid) { 
       // do whatever you want for invalid controls 
       $('#' + val.controltovalidate).parents('.control-group:first').removeClass('error'); 
      } else { 
       // reset invalid controls so they display as valid 
       //$('#' + val.controltovalidate).parents('.control-group:first').addClass('error'); 
       var t = $('#' + val.controltovalidate).parents('.control-group:first'); 
       t.addClass('error'); 
      } 
     } 
    } 

    function NicerValidatorValidate(val, validationGroup, event) { 
     AspValidatorValidating = validationGroup; 
     AspValidatorValidate(val, validationGroup, event); 
    } 

    // Call UpgradeASPNETValidation after the page has loaded so that it 
    // runs after the standard ASP.NET scripts. 
    $(document).ready(UpgradeASPNETValidation); 
+0

Rất đẹp! Điều này, tuy nhiên, phá vỡ cho tôi nếu tôi có nhiều hơn một validator liên kết với một điều khiển. Chỉ trình xác thực cuối cùng mới có hiệu lực, vì nó ghi đè bất kỳ tác vụ nào đã đi trước nó (tức là nó sẽ loại bỏ lớp css nếu nó hợp lệ, ngay cả khi một trong các trình xác nhận trước không thành công). –

0

tôi đã thực hiện một vài thay đổi để gợi ý của Steve để làm việc của tôi,

function ValidateTextBox(source, args) { 
    var controlId = document.getElementById(source.controltovalidate).id; 
    var control = $("#" + controlId); 
    var value = control.val(); 
    var is_valid = value != ""; 
    is_valid ? control.removeClass("error") : control.addClass("error"); 
    args.IsValid = is_valid; 
    } 

ví dụ tuyệt vời mặc dù, chính xác những gì Tôi cần.

0
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Custemvalidatin.aspx.cs" Inherits="AspDotNetPractice.Custemvalidatin" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript"> 
     function vali(source, args) { 
      if (document.getElementById(source.controltovalidate).value.length > 0) { 
       args.IsValid = true; 
       document.getElementById(source.controltovalidate).style.borderColor = 'green'; 
      } 
      else { 
       args.IsValid = false; 
       document.getElementById(source.controltovalidate).style.borderColor = 'red'; 
      } 

     } 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <asp:TextBox ID="TextBox1" Style="border:1px solid gray; width:270px; height:24px ; border-radius:6px;" runat="server"></asp:TextBox> 

      <asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="TextBox1" 
       ErrorMessage="Enter First Name" SetFocusOnError="True" Display="Dynamic" ClientValidationFunction="vali" 
       ValidateEmptyText="True" Font-Size="Small" ForeColor="Red">Enter First Name</asp:CustomValidator><br /><br /><br /> 

      <asp:TextBox ID="TextBox2" Style="border:1px solid gray; width:270px; height:24px ; border-radius:6px;" runat="server"></asp:TextBox> 

      <asp:CustomValidator ID="CustomValidator2" runat="server" ClientValidationFunction="vali" 
       ControlToValidate="TextBox2" Display="Dynamic" ErrorMessage="Enter Second Name" 
       SetFocusOnError="True" ValidateEmptyText="True" Font-Size="Small" ForeColor="Red">Enter Second Name</asp:CustomValidator><br /> 
      <br /> 
      <br /> 

      <asp:Button ID="Button1" runat="server" Text="Button" /> 
     </div> 
    </form> 
</body> 
</html> 
1

tôi đã thực hiện một ví dụ một pager làm việc này cho asp.net thường xuyên, không có .control nhóm

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html> 
<!-- http://stackoverflow.com/questions/196859/change-text-box-color-using-required-field-validator-no-extender-controls-pleas --> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script> 
     /** 
    * Re-assigns the ASP.NET validation JS function to 
    * provide a more flexible approach 
    */ 
     function UpgradeASPNETValidation() { 
      if (typeof (Page_ClientValidate) != "undefined") { 
       AspValidatorUpdateDisplay = ValidatorUpdateDisplay; 
       ValidatorUpdateDisplay = NicerValidatorUpdateDisplay; 
       AspValidatorValidate = ValidatorValidate; 
       ValidatorValidate = NicerValidatorValidate; 
      } 
     } 

     /** 
     * This function is called once for each Field Validator, passing in the 
     * Field Validator span, which has helpful properties 'isvalid' (bool) and 
     * 'controltovalidate' (string = id of the input field to validate). 
     */ 
     function NicerValidatorUpdateDisplay(val) { 
      // Do the default asp.net display of validation errors (remove if you want) 
      AspValidatorUpdateDisplay(val); 

      // Add our custom display of validation errors 
      // IF we should be paying any attention to this validator at all 
      if ((typeof (val.enabled) == "undefined" || val.enabled != false) && IsValidationGroupMatch(val, AspValidatorValidating)) { 
       if (val.isvalid) { 
        // do whatever you want for invalid controls 
        $('#' + val.controltovalidate).removeClass('error'); 
       } else { 
        // reset invalid controls so they display as valid 
        //$('#' + val.controltovalidate).parents('.control-group:first').addClass('error'); 
        var t = $('#' + val.controltovalidate); 
        t.addClass('error'); 
       } 
      } 
     } 

     function NicerValidatorValidate(val, validationGroup, event) { 
      AspValidatorValidating = validationGroup; 
      AspValidatorValidate(val, validationGroup, event); 
     } 

     // Call UpgradeASPNETValidation after the page has loaded so that it 
     // runs after the standard ASP.NET scripts. 
     $(document).ready(UpgradeASPNETValidation); 
    </script> 
    <style> 
     .error { 
      border: 1px solid red; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

     <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox> 
     <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator> 
     <asp:Button ID="Button1" runat="server" Text="Button" /> 

     <br /> 
     <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 
     <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox2" ErrorMessage="RegularExpressionValidator" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator> 
     <br /> 
     <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> 
     <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="TextBox3" ErrorMessage="RangeValidator" MaximumValue="100" MinimumValue="0"></asp:RangeValidator> 

    </div> 
    </form> 
</body> 
</html> 
0

Nó không phải là chính xác mà không thay đổi điều khiển người dùng sử dụng để, nhưng tôi nghĩ rằng cách này được dễ dàng hơn (không viết đầy đủ ví dụ, tôi nghĩ rằng nó không phải là cần thiết):

ASP.NET:

<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox> 
    <asp:CustomValidator runat="server" ControlToValidate="TextBox1" Display="Dynamic" Text="TextBox1 Not Set" ValidateEmptyText="true" OnServerValidate="ServerValidate" /> 
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Execute" /> 

Mã số:

protected void Execute(object sender, EventArgs e) 
{ 
    Page.Validate(); 
    if (Page.IsValid) 
    { 
     *some code* 
    } 
} 

protected void ServerValidate(object source, ServerValidateEventArgs args) 
{ 
    CustomValidator cval = source as CustomValidator; 
    if (cval == null) 
    { 
     args.IsValid = false; 
     return; 
    } 

    if (string.IsNullOrEmpty(args.Value)) 
    { 
     args.IsValid = false; 
     string _target = cval.ControlToValidate; 
     TextBox tb = cval.Parent.FindControl(_target) as TextBox; 
     tb.BorderColor = System.Drawing.Color.Red; 
    } 
    else 
    { 
     args.IsValid = true; 
    } 
} 
4

trong css:

 .form-control 
     { 
      width: 100px; 
      height: 34px; 
      padding: 6px 12px; 
      font-size: 14px; 
      color: black; 
      background-color: white; 
     } 
     .form-control-Error 
     { 
      width: 100px; 
      height: 34px; 
      padding: 6px 12px; 
      font-size: 14px; 
      color: #EBB8C4; 
      background-color: #F9F2F4 
      border: 1px solid #DB7791; 
      border-radius: 4px; 
     } 

trong trang của bạn:

<asp:TextBox ID="txtUserName" runat="server" CssClass="form-control"></asp:TextBox> 
<asp:RequiredFieldValidatorrunat="server"Display="Dynamic" ErrorMessage="PLease Enter UserName" ControlToValidate="txtUserName"></asp:RequiredFieldValidator> 

vào cuối trang của bạn trên của

<script type="text/javascript"> 
    function WebForm_OnSubmit() { 
     if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) { 
      for (var i in Page_Validators) { 
       try { 
        var control = document.getElementById(Page_Validators[i].controltovalidate); 
        if (!Page_Validators[i].isvalid) { 
         control.className = "form-control-Error"; 
        } else { 
         control.className = "form-control"; 
        } 
       } catch (e) { } 
      } 
      return false; 
     } 
     return true; 
    } 
</script> 
5

Rất muộn để đảng, nhưng chỉ trong trường hợp người khác tình cờ gặp điều này và muốn ac câu trả lời omplete mà làm việc với Bootstrap, tôi đã thực hiện tất cả các ví dụ trên, và tạo ra một phiên bản mà sẽ làm việc với nhiều trình xác nhận kèm theo một điều khiển duy nhất, và sẽ làm việc với các nhóm xác nhận:

<script> 
    /** 
    * Re-assigns the ASP.NET validation JS function to 
    * provide a more flexible approach 
    */ 
    function UpgradeASPNETValidation() { 
     if (typeof (Page_ClientValidate) != "undefined") { 
      AspValidatorUpdateDisplay = ValidatorUpdateDisplay; 
      ValidatorUpdateDisplay = NicerValidatorUpdateDisplay; 
      AspValidatorValidate = ValidatorValidate; 
      ValidatorValidate = NicerValidatorValidate; 

      // Remove the error class on each control group before validating 
      // Store a reference to the ClientValidate function 
      var origValidate = Page_ClientValidate; 
      // Override with our custom version 
      Page_ClientValidate = function (validationGroup) { 
       // Clear all the validation classes for this validation group 
       for (var i = 0; i < Page_Validators.length; i++) { 
        if ((typeof(Page_Validators[i].validationGroup) == 'undefined' && !validationGroup) || 
         Page_Validators[i].validationGroup == validationGroup) { 
         $("#" + Page_Validators[i].controltovalidate).parents('.form-group').each(function() { 
          $(this).removeClass('has-error'); 
         }); 
        } 
       } 
       // Call the original function 
       origValidate(validationGroup); 
      }; 
     } 
    } 

    /** 
    * This function is called once for each Field Validator, passing in the 
    * Field Validator span, which has helpful properties 'isvalid' (bool) and 
    * 'controltovalidate' (string = id of the input field to validate). 
    */ 
    function NicerValidatorUpdateDisplay(val) { 
     // Do the default asp.net display of validation errors (remove if you want) 
     AspValidatorUpdateDisplay(val); 

     // Add our custom display of validation errors 
     // IF we should be paying any attention to this validator at all 
     if ((typeof (val.enabled) == "undefined" || val.enabled != false) && IsValidationGroupMatch(val, AspValidatorValidating)) { 
      if (!val.isvalid) { 
       // Set css class for invalid controls 
       var t = $('#' + val.controltovalidate).parents('.form-group:first'); 
       t.addClass('has-error'); 
      } 
     } 
    } 

    function NicerValidatorValidate(val, validationGroup, event) { 
     AspValidatorValidating = validationGroup; 
     AspValidatorValidate(val, validationGroup, event); 
    } 

    // Call UpgradeASPNETValidation after the page has loaded so that it 
    // runs after the standard ASP.NET scripts. 
    $(function() { 
     UpgradeASPNETValidation(); 
    }); 
</script> 
Các vấn đề liên quan