Trigger the React-Bootstrap Input Component Validation Programmatically

Question

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 type=email. This, when inside a <form> 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 <form> element and want to trigger this when clicking on a button. This is a working piece of code I have that represents the issue:

/** @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 (
            <Modal {...this.props} title="Modal Title" animation={true} closeButton={false}>
                <div className="modal-body">
                    <Input ref="theInput" type="email" label="Email Address" defaultValue="Enter email" />
                </div>

                <div className="modal-footer">
                    <Button bsStyle="primary" onClick={this.handleSubmit}>Send</Button>
                    <Button bsStyle="danger" onClick={this.props.onRequestHide}>Close</Button>

                </div>
            </Modal>
        );
    }
});

var App = React.createClass({
    render: function() {
        return (
            <div>
                <ModalTrigger modal={<TheModal />}>
                    <Button bsStyle="primary" bsSize="large">Trigger Modal</Button>
                </ModalTrigger>
            </div>
        );
    }
});

React.render( <App />,
    document.getElementById('content')
);

Answer 1

Call the getValue() function directly on the Input.

this.refs.theInput.getValue() should return your theInput value.

Don't use getDOMNode() if you possibly can avoid it, because it assumes the underlying DOM implementation won't change in future versions. Look at the react-bootstrap Input.jsx file for other functions.