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.
thank you.
11 Answers, 1 is accepted
0

Princy
Top achievements
Rank 2
answered on 24 Sep 2012, 05:11 AM
Hi,
Try the following code to achieve your scenario.
ASPX:
JS:
CSS:
Thanks,
Princy.
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;
}
}
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:
CSS:
Thanks,
Princy.
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:
CSS:
Thanks,
Princy.
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:
JS:
CSS:
Hope this helps.
Thanks,
Princy.
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
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.
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.