Take note, I am not a very good JavaScript coder, but I am in process learning and improving. So do forgive me if I make a stupid mistake or write bloated code for this. But the way here is proven working on my scenario J
Here is the scenario.
I have 2 fields in a user details registration form.
Identification Number | : | Field 1 |
Date of Birth | : | Field 2 |
In Malaysia, our identification card number is broken into 3 sections:
[820904]-[XX]-[XXXX]
[820904] = The 1st part is our birthday probably in a format like yy/mm/dd.
[XX] = state id
[XXXX] = These 4 numbers are unique and represent each Malaysian
So for my case, my Identification Number field I will have 3 Text Boxes.
Identification Number | : | [TextBox1]-[TextBox2]-[TextBox3] |
Now for the 2nd field which is the Date of Birth. I will have a reusable user control just for this calendar functionality. Let’s assume that this user control has 2 fields: 1 textbox and 1 button. When you click on the button, it will show a div popup which shows Calendar. You selected on the date you want and it will display the value to the textbox in the calendar user control (e.g. 1-April-2007)
Let’s move on.
Now your boss is impressed with your work especially the user interface but he needs you to add a new functionality.
When you selected a date from the calendar control, it needs to validate with the Identification Number. He wants you to do on the client side with probably using JavaScript.
Solution
I will be implementing RegisterStartupScript for this situation as I need to use a CustomValidator. If you have not read my earlier article, check this out http://community.sgdotnet.org/blogs/chuawenching/archive/2007/04/09/ASP.NET-2.0-When-should-you-consider-using-RegisterStartupScript_3F00_.aspx
Let’s see the sample JavaScript code which is written in C#. I will explain further.
Place this static method inside the Global file
605 public static void IdAndDobValidation(System.Web.UI.Page page, Type type, params string[] args)
606 {
607 string jsFunctionName = "IdAndDobValidation";
608
609 StringBuilder jsBuilder = new StringBuilder();
610 jsBuilder.Append("<script language=\"javascript\">\n");
611 jsBuilder.Append("function " + jsFunctionName + "(sender, args)\n");
612 jsBuilder.Append("{\n");
613
614 // args[0] = 820904-XX-XXXX
615 jsBuilder.Append("\tvar year = document.all('" + args[0] + "').value.substring(0, 2);\n");
616 jsBuilder.Append("\tvar month = document.all('" + args[0] + "').value.substring(2, 4);\n");
617 jsBuilder.Append("\tvar day = document.all('" + args[0] + "').value.substring(4, 6);\n");
618
619 // convert it to a actual javascript date object
620 jsBuilder.Append("\tvar myDate = new Date(month + '/' + day + '/' + year);\n");
621
622 // remove the '-' in DOB
623 // args[1] = 4-September-1982
624 jsBuilder.Append("\tvar splitDOB = document.all('" + args[1] + "').value.split('-');\n");
625
626 // Generate a new date object based on dd/mm/yyyy
627 jsBuilder.Append("\tvar myDOB = new Date(checkMonth(splitDOB[1]) + '/' + splitDOB[0] + '/' + splitDOB[2].substring(2, 4));\n");
628
629 jsBuilder.Append("\tif (+myDate == +myDOB)");
630 jsBuilder.Append("{\n");
631 jsBuilder.Append("\t\targs.IsValid = true;");
632 jsBuilder.Append("}\n");
633 jsBuilder.Append("\telse");
634 jsBuilder.Append("{\n");
635 jsBuilder.Append("\t\targs.IsValid = false;");
636 jsBuilder.Append("}\n");
637
638 jsBuilder.Append("}\n");
639 jsBuilder.Append("</script>");
640
641 page.ClientScript.RegisterStartupScript(type, jsFunctionName, jsBuilder.ToString());
642 }
In line 614 – 617, basically it is expecting the 1st argument args[0] which is the the 1st section of the Identification Number. Remember this 1st section represents the 1st 6 numeric numbers of an Identification Number.
I need to break this string “820904” into three sections as below:
“82” “09” “04”
Then I need to create a JavaScript Date object based on these 3 strings. Check line 620.
Now I will focus on the Date of Birth instead. I need to remove the ‘-‘ from the string and create a new Date object like what I did above. When you are using Split method for your string, the string will be broken into 3 parts.
4-September-1982
splitDOB[0] = “4”
splitDOB[1] = “September”
splitDOB[2] = “1982”
Later you will wonder, why should I do this for? Why can’t you compare the date object by the Identification Number with Date of Birth like ‘4-September-1928’.
i) You are expecting a string value from args[1]
ii) You cannot compare a string value with a date object
iii) If you try to cast args[1] to a date object like below:
var myDate = new Date(document.all(‘args[1]’).value)
You will receive a NaN – Not a Number. I am too sure in detail on this, but I will need to investigate more on JavaScript.
Remember you are getting September, so you need to create a reusable function to convert it into an interger. Very simple, just do switch statements like below:
function checkMonth(varMonth)
{
switch(varMonth)
{
case "January":
varMonth = "1"
break
case "February":
varMonth = "2"
break
case "March":
varMonth = "3"
break
case "April":
varMonth = "4"
break
case "May":
varMonth = "5"
break
case "June":
varMonth = "6"
break
case "July":
varMonth = "7"
break
case "August":
varMonth = "8"
break
case "September":
varMonth = "9"
break
case "October":
varMonth = "10"
break
case "November":
varMonth = "11"
break
case "December":
varMonth = "12"
break
}
return(varMonth);
}
Next is the best part.
You cannot simply compare between the 2 dates like below:
If (myDate == myDOB) {}
Trust me, you will always get a false value even it is the same.
So instead use an unary operator ‘+’ in front of each date like line 629. There are recommendations ot use ValueOf instead, but I don’t seem to get the right results. This solves it J
Now, in your user registration form’s page_load event, paste the code below:
162 TextBox dobTextBox = uclDateOfBirth.FindControl("txtDateValue") as TextBox;
163 Global.IdAndDobValidation(Page, typeof(Page), txtNewIcNo1.ClientID, dobTextBox.ClientID);
Since I mentioned above that the textbox resides inside a calendar user control, so you need to use FindControl for this. You can create a property for this inside this calendar user control if you hate to use FindControl.
Lastly, this is the HTML code for the CustomValidator.
<asp:CustomValidator ID="csvDOB" runat="server" Display="Dynamic" ErrorMessage="DOB must be equivalent with your IC"
ClientValidationFunction="IdAndDobValidation">DOB must be equivalent with your IC</asp:CustomValidator>
Hope you find this useful. But I believe that this concept should work for Identification Numbers in other countries.
Have a nice weekend.