Validating Date on the Client

One of the most frequent, and most important, uses of client-side scripting is data validation. Before doing anything else, the Web form should check that the data entered is valid. This example demonstrates how to validate the date value in a cell on the Spread component on the client side by using a custom cell type and customized client-side scripting.

The following code for the ASPX page creates a custom cell type based on the DateTimeCellType and uses a custom HTC file, mydatetype.htc, to accomplish the client-side date validation.

VB .NET	Copy Code
<Serializable()> _ Class MyDateType Inherits FarPoint.Web.Spread.DateTimeCellType Public Overrides ReadOnly Property EditorClientScriptUrl() As String Get Return "mydatetype.htc" End Get End Property End Class

VB .NET

Copy Code

<Serializable()> _
Class MyDateType
  Inherits FarPoint.Web.Spread.DateTimeCellType
  Public Overrides ReadOnly Property EditorClientScriptUrl() As String
    Get
      Return "mydatetype.htc"
    End Get
  End Property
End Class

Here is the listing of the mydatetype.htc file.

JavaScript	Copy Code
<PUBLIC:COMPONENT> <PUBLIC:METHOD NAME="isValid"> </PUBLIC:METHOD> </PUBLIC:COMPONENT> <SCRIPT language=javascript> function isValid(val) { if (val!=null && val.length>0) { var yearLastExp = new RegExp("^\\s(\\d{1,2})([-./]) (\\d{1,2})\\2((\\d{4})\|(\\d{2}))\\s$"); m = val.match(yearLastExp); if (m == null) { return "Invalid value"; } day = m[3]; month = m[1]; year = (m[5].length == 4) ? m[5] : m[6]; month -= 1; var date = new Date(year, month, day); if (typeof(date) == "object" && year == date.getYear() && month == date.getMonth() && day == date.getDate()) return ""; else return "Invalid value"; } return ""; } </SCRIPT>

JavaScript

Copy Code

<PUBLIC:COMPONENT>
  <PUBLIC:METHOD NAME="isValid">
  </PUBLIC:METHOD>
</PUBLIC:COMPONENT>
<SCRIPT language=javascript>
  function isValid(val) {
    if (val!=null && val.length>0) {
      var yearLastExp = new RegExp("^\\s*(\\d{1,2})([-./]) (\\d{1,2})\\2((\\d{4})|(\\d{2}))\\s*$");
      m = val.match(yearLastExp);
      if (m == null) {
        return "Invalid value";
      }
      day = m[3];
      month = m[1];
      year = (m[5].length == 4) ? m[5] : m[6];
      month -= 1;
      var date = new Date(year, month, day);
      if (typeof(date) == "object" && year == date.getYear() && month == date.getMonth() && day == date.getDate())
        return "";
      else
        return "Invalid value";
    }
    return "";
  }
</SCRIPT>

Return to Developing a Custom HTC File.