This is a migrated thread and some comments may be shown as answers.

Client validation highlight controls

11 Answers 244 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
nav100
Top achievements
Rank 1
nav100 asked on 21 Sep 2012, 02:04 PM
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.

11 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 24 Sep 2012, 05:11 AM
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.
0
nav100
Top achievements
Rank 1
answered on 24 Sep 2012, 07:22 PM
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;
    }
  }
0
Princy
Top achievements
Rank 2
answered on 25 Sep 2012, 07:24 AM
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.
0
nav100
Top achievements
Rank 1
answered on 25 Sep 2012, 02:01 PM
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?
0
Princy
Top achievements
Rank 2
answered on 26 Sep 2012, 04:53 AM
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.
0
nav100
Top achievements
Rank 1
answered on 26 Sep 2012, 03:12 PM
I couldn't get RadDatePicker to work. It's still not highlighting the control. Please suggest.
0
Princy
Top achievements
Rank 2
answered on 27 Sep 2012, 03:55 AM
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.
0
nav100
Top achievements
Rank 1
answered on 27 Sep 2012, 05:35 PM
Thanks again. It's not working. Is there anyway I can use Jquery plugins to validate the form? Are there any examples? Thanks
0
Princy
Top achievements
Rank 2
answered on 28 Sep 2012, 07:36 AM
Hi,

Try this jquery plugin which include the similar scenario.

Hope his helps.

Thanks,
Princy.
0
nav100
Top achievements
Rank 1
answered on 28 Sep 2012, 01:27 PM
Sorry. The link is not working. Thanks
0
Princy
Top achievements
Rank 2
answered on 03 Oct 2012, 04:31 AM
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.
Tags
General Discussions
Asked by
nav100
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
nav100
Top achievements
Rank 1
Share this question
or