Usage of showErrorMessage in SpreadJS data validation

In this article, we will show you how to use the showErrorMessage property in SpreadJS to display error popups for invalid cell entries and explain the difference between the Designer and SpreadSheets components.

SpreadJS allows you to create a validation popup similar to Excel using a few key properties. The showErrorMessage(true) property enables the error popup, while errorStyle determines how invalid input is handled—whether it should be blocked, warned about, or simply provide information. The errorTitle and errorMessage properties define the content of the popup that the user sees.

Here’s a simple example. Suppose you want to restrict a cell to only accept a list of values like “Apple”, “Banana”, or “Orange”. You can create a list validator and configure it as follows:

// Create a list validator
var validation = GC.Spread.Sheets.DataValidation.createListValidator("Apple,Banana,Orange");

// Show error popup
validation.showErrorMessage(true);

// Choose alert style (stop blocks invalid input)
validation.errorStyle(GC.Spread.Sheets.DataValidation.ErrorStyle.stop);

// Set title and message
validation.errorTitle("Invalid Entry");
validation.errorMessage("Please select a value from the list.");

// Apply the validator to cell B2
sheet.setDataValidator(1, 1, validation);

After entering a value not in the list, a popup will appear showing the title and message, but this behavior depends on the component you are using. In the Designer component, built-in popup dialogs appear automatically whenever validation fails. In the SpreadSheets component, these popups are not included, so while the validation still works, no dialog is displayed. To handle this, you can use the ValidationError event to show a custom alert or dialog, for example:

sheet.bind(GC.Spread.Sheets.Events.ValidationError, function(e, info) {
    alert("Invalid value: " + info.value + "\n" + info.validator.errorMessage);
});

This way, SpreadJS can closely mimic Excel’s behavior, giving your application a familiar and user-friendly experience.