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.

<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.

<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>