React input validation

validated-input.jsx

/** @jsx React.DOM */
"use strict";

var React = require("react");

// Usage:
// <ValidatedInput validateValue={myValidationFunction}
//   onValidationError={handleError}
//   valueLink={...} />

module.exports = React.createClass({
  getValueLink: function() {
    var valueLink = this.props.valueLink;
    var requestChange = valueLink.requestChange.bind(valueLink);
    var validateValue = this.props.validateValue;
    var onValidationError = this.props.onValidationError;

    valueLink.requestChange = function(value) {
      try {
        validateValue(value);
      }
      catch (err) {
        return onValidationError(err, value);
      }

      requestChange(value);
    };

    return valueLink;
  },

  render: function() {
    return this.transferPropsTo(
      <input valueLink={this.getValueLink()} />
    );
  },
});