Disabling asp.net client side validator affects page.IsValid

Sometime we need to disable page validator based on user selection. For example in the following image when user click the save button the three validators are used for client side validation.

Now if user clicks on Reset Password then we don't need to disable the client side validators related to the three fileds (old password, password, confirm password). To enable/disable validators we need to use asp.net provided client side method:

ValidatorEnable(validator, enabled);

The first parameter is the validator object itself. The second parameter defines whether the validator will be enabled or disabled. On the click event of Reset Password checkbox we'll call the ValidatorEnable method in javascript. As shown in the following image reset password will disable the client side validator.

 

Pretty simple! huh!

Now on the save button event you'll check if the Page.IsValid is true to ensure that client side code is validated properly. But you have disabled the client side validation with javascript. So the Page.IsValid will return false. The solution before calling Page.IsValid ensure that the validators that you disabled on the client side also disabled on server side. so you code will be like:

if(ResetPassword Chekcbox is checked)

{

1. disable validator related to old password.

2. disable validator related to password.

3. Disable validator related to confirm password

}

call Page.IsValid

Now when you'll call the page.Isavalid, you'll get the true as the call of page.isvalid will ignore those controls' that are not enabled. So if you disable a validator from server side then page.Isavalid will ignore whether the validator we validated or not on the client side.

Browser specific CSS

Sometimes the same css class renders differently in different browser. For example you have put padding-left:5px in your css class. But in different browsers the padding is showing different. So one workaround may be to use different css class or css class attribute in different browser. Consider the following css class.

 

.rightColForCheckBox

{

      float: left;

      padding-left: 2px; /* Default*/

      *padding-left:0px; /* This is for ie7 and hopefully ie8.*/

      _padding-left:0px; /* This is for ie6*/

}

 

The css class rightColForCheckBox has three attributes for padding-left each of for different browser that is described below:

*padding-left: This is for ie7 and hopefully ie8

_padding-left: This is for ie6

padding-left: This is default for browsers for which no specific css specified.

 

If we need safari specific css class then declare the same rightColForCheckBox again in the following manner:

 

@media screen and (-webkit-min-device-pixel-ratio:0) {

.rightColForCheckBox

{

      float: left;

      padding-left: 5px;

}/* This code is only recognize by safari*/

}

 

Although writing css class in this way is not recommended, this is the last way to get rid of the css comparability issue.