I am making a web page in asp.net c# and I want to change the border color of textbox when it fails the validation.
For example :
Please tell me how can I do this.
Thanks.
This sulation is easy, but a little bit dirty:
Specify an onClientClick attribute on your button and this JavaScript-Function
<script type="text/javascript">
function YourButtonClickEvent() {
var validation = Page_ClientValidate();
if (!validation) {
for (var i = 0; i < Page_Validators.length; i++) {
if (!Page_Validators[i].isvalid) {
$("#" + Page_Validators[i].controltovalidate).css("border-color", "red");
}
}
}
return val;
}
</script>
using jQuery -- use on blur Event
if(!validation)
{
$('textboxid').css('border','1px solid red');
}
else
{
$('textboxid').css('border','1px solid black'); //set to normal color
}
using Javascript -- use on Blur event
document.getElementById('textboxId').Style.Border = "1px solid red";
For more information go through this link
Related
I am using a Telerik rad org chart. Basically I want to apply certain CSS style based on a condition.
I have figured out how to just override a css styles:
.rocToolbar_Metro .rocToolbarButton { background-color: #32b330 !important;}
But I can’t figure out how to do this conditionally via the code behind, so saying if condition == 1 then apply this:
.rocToolbar_Metro .rocToolbarButton { background-color: #32b330 !important;}
Else apply this:
.rocToolbar_Metro .rocToolbarButton { background-color: #25a0da !important;}
I am planning to do this within the NodeDataBound event. Any suggestions appreciated.
Thanks.
Add JS on your page which will be changing button color and next you can use ScriptManager to fire this javascript from nodedatabound event.
Add JS
function setColor1() {
$("#rocToolbarButton").css("background-color","#25a0da");
}
NodeDataBound event
protected void RadTreeView_OnNodeDataBound(object sender, RadTreeNodeEventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "setColor1", "setColor1();", true);
}
You can also add css property without needing to write new classes to override the actual one
$(document).ready(function(){
var condition = 1;
if(condition == 1){
$('.rocToolbarButton').css('background-color', '#32b330;');
}
else{
$('.rocToolbarButton').css('background-color', '#25a0da;');
}
});
This works as follows:
$('cssSelector').css('property','value');
I am trying to hide some divs using Javascript but i think the post back keeps reloading the page.
To make things more complicated my buttons are added programmatically by my code behind.
foreach (string line in thefilters)
{
Button newButton = new Button();
newButton.ID = Convert.ToString(line);
newButton.Text = Convert.ToString(line);
newButton.CssClass = "tblbutton";
//newButton.Attributes.Add("onclick", "hide_div("+newButton.ID+")");
newButton.OnClientClick = "return hide_div('" + newButton.ID + "')";
pnl_left.Controls.Add(newButton);
}
My javascript is located in the header as follows.
<script type="text/javascript">
function hide_div(filter) {
var pnl_right = document.getElementById("pnl_right");
var listofelements = pnl_right.getElementsById("div");
for (var i = 0; i < listofelements.length; i++) {
if (listofelements[i].id.indexOf(filter) == 0) {
document.getElementById(listofelements[i].id).style.display = 'inline';
}
else {
document.getElementById(listofelements[i].id).style.display = 'none';
}
}
return false;
}
I may have issues in the javascript for what i want to achieve but i am confident that if i can stop the postback then i can solve the javascript myself..
Thanks for any suggestions in advance.
You have not showed in which event you are adding controls. But I am assuming from your problem that you are doing this in Page_Load. If yes, try and move in OnInit event.
Second, in Page_Load you need to check
if(!IsPostBack)
{
//your code for adding controls
}
Hope that helps.
I need to be able do the following on a TR:
onmouseover highlight the whole row one colour
onclick the row highlight the row another colour (if you click the same row again it unhighlights the row - sets it to the original bgcolor)
a problem I have is that in my listview the row's bgcolor alternates between two colours.
the code below only works for highlighting one row at a time, the row needs to remain highlighted until it is clicked again.
Here is some code that I use for clicking to select which works but I need to change it so that it toggles the row highlight on/off
<script type="text/javascript">
var preEl;
var orgBColor;
var orgTColor;
function highlighttr(el, backColor, textColor) {
if (typeof (preEl) != 'undefined') {
preEl.bgColor = orgBColor;
try { ChangeTextColor(preEl, orgTColor); } catch (e) { ; }
}
orgBColor = el.bgColor;
orgTColor = el.style.color;
el.bgColor = backColor;
try { ChangeTextColor(el, textColor); } catch (e) { ; }
preEl = el;
}
function ChangeTextColor(a_obj, a_color) {
;
for (i = 0; i < a_obj.cells.length; i++)
a_obj.cells(i).style.color = a_color;
}
</script>
onmouseover highlight the whole row one colour
add :hover to tr styles
onclick the row highlight the row another colour (if you click the same row again it unhighlights the row - sets it to the original
bgcolor)
$('tr').click( function () {
if($(this).hasClass("clicked"))
{
$(this).removeClass("clicked");
}else{
$(this).addClass("clicked");
}
});
and add styles to it.
a problem I have is that in my listview the row's bgcolor alternates between two colours.
you can add :nth-child(2n) to your styles to get it all together.
EXAMPLE
http://jsfiddle.net/uuZdB/6/
This a traditional way which by the way is cross-browser (and platform).
CSS
.tr {background-color:#fff}
.trOver {background-color:#ddd}
.trClicked {background-color:#bbb}
JS
function over(o)
{
if ('trClicked' != o.className) o.className = 'trOver';
}
function out(o)
{
if ('trClicked' != o.className) o.className = 'tr';
}
function clicked(o)
{
o.className = ('trClicked' == o.className) ? 'tr' : 'trClicked';
}
HTML
<tr class="tr" onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)">
// tds without defined background color...
</tr>
I am creating some text boxes at runtime and I would like to change the color of the text box if the text box has been left blank
and the user submits the form.
I am using the code behind approach, this is the code I wrote in the .aspx.cs file
textBoxObj is the text box object that I create at runtime and it is the object on which I want the empty validation.
CustomValidator customValidatorObj = new CustomValidator();
customValidatorObj.ControlToValidate = textBoxObj.ID;
customValidatorObj.ClientValidationFunction = "changeColorofTextBox";
and I wrote a small Javascript snippet within the .aspx file which goes as follows (I haven't yet written the logic to change the color,
just making it not valid for now)
<script type="text/javascript">
function changeColorofTextBox(oSrc, args) {
if (args.Value.length > 0) {
args.IsValid = true;
}
else {
args.IsValid = false;
}
}
</script>
In the submit button click function of the form, I have this check if(Page.IsValid), then submit the form. However, even when the text box is empty,
the form gets submitted. It seems like the function is not even being hit. Do you have any pointers on what I am doing wrong?
I am fine with either client side or server side validation, whichever works.
EDIT
I got the error, I just had to do this
customValidatorObj.ValidateEmptyText = true;
and it started working.. Thank you, I didn't realize that the customValidator class does not try validating if the control is blank.
But I am stuck again :(
In the form, I have many text boxes. Suppose, the user entered text for 3 of the text boxes and left 2 of them blank, how do I find the text box ids so that I can change the color of only the blank ones. or, how can I write code in the javascript to find out the control ID at runtime?
I know we have to do this
document.getElementById(CONTROLIDGOESHERE).style.backgroundColor = "red";
but how I get the CONTROLIDGOESHERE value to pass to the getElementById function?
Any pointers, thanks.
Try setting customValidatorObj.EnableClientScipt = True
Assuming you are running .NET Framework version 4.0 then you could declare your textboxes using ClientIDMode="Static". That way they'll have the same ID client-side and server-side e.g.
<asp:TextBox runat="server" ID="txtName" ClientIDMode="Static" />
Then you could trigger client-side validation on a button click by declaring a button like this:
<input type="submit" id="btnSubmit" onclick="ClientSideValidation(); return false;" value="Save"/>
The JavaScript function could look something like this:
<script type="text/javascript">
function ClientSideValidation() {
var txtName = document.getElementById("txtName");
if (txtName.value.length == 0) {
txtName.style.background = "#DE0000";
}
// Check other text boxes...
}
</script>
Thank you guys, I figured it out. This code does the job for me
.aspx.cs
CustomValidator customValidator = new CustomValidator();
customValidator.ControlToValidate = textBox.ID;
customValidator.ClientValidationFunction = "changeColorofTextBox";
customValidator.ValidateEmptyText = true;
customValidator.EnableClientScript = true;
e.Item.Controls.Add(customValidator);
.aspx
<script type="text/javascript">
function changeColorofTextBox(oSrc, args) {
if (args.Value.length > 0) {
args.IsValid = true;
}
else {
var ctrlid = oSrc.id;
var validatorid = document.getElementById(ctrlid);
ctrlid = validatorid.controltovalidate;
document.getElementById(ctrlid).style.backgroundColor = "Tomato";
args.IsValid = false;
}
}
</script>
i'm using the below javascript to change an image on an aspx in asp.net c#
<script language="JavaScript" type="text/javascript">
var updateImageWhenHashChanges = function()
{
theImage = document.getElementById("ctl00_ContentPlaceHolder1_Image1a");
if(window.location.hash == "#size=2")
{
theImage.src = "<%# Eval("realfilename", "/files/l{0}") %>";
}
else if(window.location.hash == "#size=3")
{
theImage.src = "<%# Eval("realfilename", "/files/{0}") %>";
}
else if(window.location.hash == "#size=1")
{
theImage.src = "<%# Eval("fullthumbname", "/thumbnails/{0}") %>";
}
else
{
}
}
</script>
here's how i call it with a link
test
the problem is that it only does what i'm expecting on the SECOND click of the link, because it seems onclick fires before the href, so the first time i'm just placing the var and the 2nd time i'm actually getting what i want.
does anyone know how i can fix this? i'm trying to get the image to change on each click
Perhaps you can replace your href with javascript:void(0) and then handle the link's "natural" click behavior at the end of your onclick() script.
Have you tried a different event like onmouseup or onunload?
You should pass in the current anchor's href to the function call and then use that in your if statements, then return false so that the default behavior isn't used.
var updateImageWhenHashChanges = function(pChoice)
{
theImage = document.getElementById("ctl00_ContentPlaceHolder1_Image1a");
if(pChoice == "size2")
{
// more lines of picking and choosing... and finally:
return false;
and then in the anchor
test
It would also be much better if you could use your databinding to put the real href of the image into the href of the anchor so that if JavaScript wasn't enable the user would still end up being able to see the image in question. Then your function code would just be getting a handle to the image and setting the source to that inbound param.
What about something like this:
<script type="text/javascript">
var updateImageSize = function(imageType, imageID)
{
thisImage = document.getElementById(imageID);
switch(imageType)
{
case "thumb":
// change image src to the thumbnail's path
thisImage.src = "YourThumbNailPath";
case "medium":
// change image src to medium image path
thisImage.src = "YourMediumImagePath";
case "large":
// you get the picture
thisImage.src = "YourLargeImagePath";
default:
// whatever you want it to default to
thisImage.src = "YourThumbNailPath";
}
}
</script>
Then the implementation:
Update Image
Hope that helps.