Client validation highlight controls

12 posts, 0 answers
  1. nav100
    nav100 avatar
    48 posts
    Member since:
    Dec 2010

    Posted 21 Sep 2012 Link to this post

    I have a web form and would like to client validation and show pop up with validation error using alert box and would like to hightlight telerik radtextbox, combobox and textarea etc. Is there any example how to achieve this functionality? I am using telerik 2010 controls.

    thank you.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 Sep 2012 Link to this post

    Hi,

    Try the following code to achieve your scenario.

    ASPX: 
    <telerik:RadTextBox ID="RadTextBox1" runat="server" ></telerik:RadTextBox>
    <telerik:RadComboBox ID="RadComboBox1" runat="server" ></telerik:RadComboBox>
    <textarea id="textarea1" runat="server" rows="5" cols="5"></textarea>    
    <asp:Button ID="Button1" runat="server" OnClientClick=" return Validate()" />

    JS:
    <script type="text/javascript">
      function Validate(sender,args)
      {
       var txtBox = $find("<%= RadTextBox1.ClientID %>");
       var combo = $find("<%= RadComboBox1.ClientID %>");
       var txtArea = document.getElementById("textarea1");
       if() // Your validation code
       {
        txtBox.addCssClass("highlight");
        combo.addCssClass("highlight");
        txtArea.style.color = "red";
        txtArea.style.borderColor = "Red";
        txtArea.style.borderStyle = "solid";
        txtArea.style.borderWidth = "thin";
        alert("error");
        return false;
        }
      }
    </script>

    CSS: 
    <style type="text/css">
      .highlight
      {
       border-color:Red !important;
       border-style:solid !important;
       border-width :thin !important;
      }
    </style>

    Thanks,
    Princy.
  3. nav100
    nav100 avatar
    48 posts
    Member since:
    Dec 2010

    Posted 24 Sep 2012 Link to this post

    Hello Princy,
    Thank you for the example. I tried your code. It doesn't work with RadTextBox. Here is the code I am trying to highlight with yellow Rectangle. But it only works for RadTextBox. Could you please let me know how to highlight with yellow Rectangle for RadTextBox, RadComboBox and RadDatePicker? Thank you again.

        function Validate(sender,args)
      {
       var textBoxElement = $find("<%= RadTextBox1.ClientID %>")._textBoxElement;
       var combo = $find("<%= RadComboBox1.ClientID %>");
       var dateInput = $find("<%=RadDatePicker1.ClientID %>");
       setTimeout(function () { textBoxElement.className = textBoxElement.className + " riError"; }, 20);
       setTimeout(function () { combo.className = combo.className + " riError"; }, 20);
      setTimeout(function () { dateInput .className = dateInput .className + " riError"; }, 20);
     //  var txtArea = document.getElementById("textarea1");
       if () // Your validation code
       {
        alert("error");
        return false;
        }
      }
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Sep 2012 Link to this post

    Hi,

    Try modifying your code as follows to achieve your scenario.

    ASPX:
    <script type="text/javascript">
     function Validate(sender, args)
     {
      var textBoxElement = $find("<%= RadTextBox1.ClientID %>")._textBoxElement;
      var combo = $find("<%= RadComboBox1.ClientID %>")._element;
      var dateInput = $find("<%=RadDatePicker1.ClientID %>")._dateInput;
      setTimeout(function () { textBoxElement.className = textBoxElement.className + " riError"; }, 20);
      setTimeout(function () { combo.className = combo.className + " riErrorCombo"; }, 20);
      setTimeout(function () { dateInput._element.className = dateInput._element.className + " riError"; }, 20);
       
      if () // Your validation code
      {
       alert("error");
       return false;
      }
     }
    </script>

    CSS:
    <style type="text/css">
     .riErrorCombo
     {
      border-color:#D51923 !important;
      border-style:solid !important;
      border-width :thin !important;
     }
    </style>

    Thanks,
    Princy.
  5. nav100
    nav100 avatar
    48 posts
    Member since:
    Dec 2010

    Posted 25 Sep 2012 Link to this post

    Thanks Princy. But the code doesn't work for RadDatePicker. Also When I select RadComboBox item the highlight border doesn't go away. Could you please let me know?
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 25 Sep 2012 Link to this post

    Hi,

    You can remove the border in onClientFocus event of RadCombobox. And try modifying the code for RadDatePicker as follows.

    JS:
    <script type="text/javascript">
        function OnClientFocus()
        {
          var combo = $find("<%= RadComboBox1.ClientID %>")._element;
          var class1 = combo.className;
           combo.className = class1.replace("riErrorClass","");
        }
      function Validate(sender, args) {
         var textBoxElement = $find("<%= RadTextBox1.ClientID %>")._textBoxElement;
         var combo = $find("<%= RadComboBox1.ClientID %>")._element;
         var dateInput = $find("<%=RadDatePicker1.ClientID %>")._dateInput;
         setTimeout(function () { textBoxElement.className = textBoxElement.className + " riError"; }, 20);
         setTimeout(function () { combo.className = combo.className + " riErrorClass"; }, 20);
         setTimeout(function () { dateInput._element.className = dateInput._element.className + " riErrorClass"; }, 20);
         if () // Your validation code
       {
        alert("error");
        return false;
        }
         }
         function OnFocus()
         {
             var dateInput = $find("<%=RadDatePicker1.ClientID %>")._dateInput;
             var class1 = dateInput._element.className;
             dateInput._element.className = class1.replace("riErrorClass", "");
         }
    </script>

    CSS:
    <style type="text/css">
    .riErrorClass
         {
           border-color:#D51923 !important;
           border-style:solid !important;
           border-width :thin !important;
         }
    </style>

    Thanks,
    Princy.
  7. nav100
    nav100 avatar
    48 posts
    Member since:
    Dec 2010

    Posted 26 Sep 2012 Link to this post

    I couldn't get RadDatePicker to work. It's still not highlighting the control. Please suggest.
  8. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Sep 2012 Link to this post

    Hi,

    One suggestion is that you can try Jquery to highlight RadDatepicker as follows.

    ASPX:
    <telerik:RadDatePicker ID="RadDatePicker1" DateInput-ClientEvents-OnFocus="OnFocus" runat="server"></telerik:RadDatePicker>

    JS:
    function Validate(sender, args)
    {
     if () // Your validation code
     {
        alert("error");
        return false;
     }
     setTimeout(function () { $("#RadDatePicker1_dateInput_wrapper").addClass("riErrorClass"); }, 20);
    }
    function OnFocus()
    {
      $("#RadDatePicker1_dateInput_wrapper").removeClass("riErrorClass");
    }

    CSS:
    <style type="text/css">
    .riErrorClass
    {
      border-color:#D51923 !important;
      border-style:solid !important;
      border-width :thin !important;
    }
    </style>

    Hope this helps.

    Thanks,
    Princy.
  9. nav100
    nav100 avatar
    48 posts
    Member since:
    Dec 2010

    Posted 27 Sep 2012 Link to this post

    Thanks again. It's not working. Is there anyway I can use Jquery plugins to validate the form? Are there any examples? Thanks
  10. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 28 Sep 2012 Link to this post

    Hi,

    Try this jquery plugin which include the similar scenario.

    Hope his helps.

    Thanks,
    Princy.
  11. nav100
    nav100 avatar
    48 posts
    Member since:
    Dec 2010

    Posted 28 Sep 2012 Link to this post

    Sorry. The link is not working. Thanks
  12. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Oct 2012 Link to this post

    Hi,

    Here is the link which I mentioned in the last post. Please have a look.
    http://bassistance.de/jquery-plugins/jquery-plugin-validation/

    Hope this helps.

    Thanks,
    Princy.
Back to Top