title: Trigger the React-Bootstrap Input Component Validation Programmatically
body: <p>I'm quite new to react so this may be a pretty easy thing to do. I am currently working on a Modal component (from ReactBootstrap) and I am using a react-bootstrap Input component inside the Modal dialog component, with <code>type=email</code>. This, when inside a <code>&lt;form&gt;</code> element and the form is submitted will trigger validation and a popoup type message is displayed on top of the input component if validation fails. However, I am not using this component inside a <code>&lt;form&gt;</code> element and want to trigger this when clicking on a button. This is a working piece of code I have that represents the issue:</p>
  
  <pre><code>/** @jsx React.DOM */
  
  var Modal = ReactBootstrap.Modal;
  var ModalTrigger = ReactBootstrap.ModalTrigger;
  var Button = ReactBootstrap.Button;
  var Input = ReactBootstrap.Input;
  
  var TheModal = React.createClass({
      handleSubmit: function() {
          // I want to trigger the email input validation here
          // via this.refs.theInput
      },
      render: function() {
          return (
              &lt;Modal {...this.props} title="Modal Title" animation={true} closeButton={false}&gt;
                  &lt;div className="modal-body"&gt;
                      &lt;Input ref="theInput" type="email" label="Email Address" defaultValue="Enter email" /&gt;
                  &lt;/div&gt;
  
                  &lt;div className="modal-footer"&gt;
                      &lt;Button bsStyle="primary" onClick={this.handleSubmit}&gt;Send&lt;/Button&gt;
                      &lt;Button bsStyle="danger" onClick={this.props.onRequestHide}&gt;Close&lt;/Button&gt;
  
                  &lt;/div&gt;
              &lt;/Modal&gt;
          );
      }
  });
  
  var App = React.createClass({
      render: function() {
          return (
              &lt;div&gt;
                  &lt;ModalTrigger modal={&lt;TheModal /&gt;}&gt;
                      &lt;Button bsStyle="primary" bsSize="large"&gt;Trigger Modal&lt;/Button&gt;
                  &lt;/ModalTrigger&gt;
              &lt;/div&gt;
          );
      }
  });
  
  React.render( &lt;App /&gt;,
      document.getElementById('content')
  );
  </code></pre>