CreateUserWizard - DuplicateUser Error Message not getting clear - Part 1

Problem:

This problem with CreateUserWizard(CUW) was pointed by David(haggis999) here.

When you try to Create a new user, CUW will display a message if the user with the same username already exists i.e. somebody took that username. Also the password fields will be cleared upon postback. Now change the username to something else but do not enter anything in the password fields. Now click the CreateUser button. You will see that there will be two * (asteriks) next to the password fields. Note the Duplicate User error message still exists. This is a kind of confusing for the user that the second username is also taken but in reality there was no check made for this second username and the error message displayed is from the pervious check.

Note: I am taking DuplicateUser error message as an example but it could be any other message that is set by server-side. e.g. Minimum Password Length 7 etc.

Background 

Now whats going on behind the scene. The username check is done on the Server-side. Upon the first CreateUser click the 'User already exists" message is displayed. But when you click the second time without entering the password the RequiredFieldValidators are at work. That work is done on client side. So still the second click has not reached the server at all. And CUW does not have any mechanism to clear the "User already exists" on client-side. It gets cleared only if the request hits the server and determines no other error and/or there is no duplicate username in the DB.

So we are left to clear that error on client-side ourself. Lets see how we will do that via JavaScript.

Steps:

1: Convert CreateUserStep to Template. Sample ClickHere.

2: Find LiteralControl named ErrorMessage ...change it to Lable Control:

<td align="center" colspan="2" style="color:Red;">

<asp:Label ID="ErrorMessage" runat="server" EnableViewState="True"></asp:Label>

</td>

3: Convert CUW to CustomNavigationTemplate . This is to get CreateUser button in .aspx source.

4: Set the OnClientClick property like below:

<CustomNavigationTemplate>

<table border="0" cellspacing="5" style="width:100%;height:100%;">

<tr align="right">

<td align="right" colspan="0">

<asp:Button class="clsTest" ID="StepNextButton" runat="server" CommandName="MoveNext"

Text="Create User" OnClientClick="clearMessage()" ValidationGroup="CreateUserWizard1" />

</td>

</tr>

</table>

</CustomNavigationTemplate>

5: Add this javascript function to your code:

<script type="text/javascript">

function clearMessage() {

var id = 'CreateUserWizard1_CreateUserStepContainer_ErrorMessage'; //IMPORTANT.Read the 'Points to Note'

var lblError = document.getElementById(id);

if (lblError != null) {

lblError.innerHTML = "";lblError.innerText = "";

}

}

</script>

Points to Note:

There is a limitation to the above code.  If you see the var id = 'CreateUserWizard1_CreateUserStepContainer_ErrorMessage'; looks something weird. But if you know asp.net does this work of changing the id of your control. Since the Label ErrorMessage is within the CreateUserStep of the CUW1, it gets this id. So say if your CUW is withing a MasterPage ContentPlaceHolder then your id would be something like this: 'ctl00_ContentPlaceHolder1_CreateUserWizard1_CreateUserStepContainer_ErrorMessage'.

Since the code above has the hardcoded value for this label it will not work if your CUW is inside the MasterPage. So here is what you can do.

Open your page in browser. Right Click and ViewSource of the page. Find your Label ErrorMessage. Get the 'id' and change the above code to reflect the id to your own.

var id = //Get this as mentioned above;

Conclusion:

This is not a robust solution but will work. There is a way to use ClientID of the control in JavaScript which I did not try. One other way is using jQuery which I will demonstrate in another blog article.

Also this is just one such problem. There are, I believe, similar error display issues with CUW. Feel free to point out.

Thanks for reading. I know there is a room for improvement so feel free to comment.