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')
);

benjaminjosephw · Accepted Answer · 2015-08-27 05:08:31Z

3

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.

edited Aug 27, 2015 at 5:08

benjaminjosephw

4,4273 gold badges23 silver badges42 bronze badges

answered Mar 19, 2015 at 18:57

Z. Huey Hu

614 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter · Accepted Answer · 2014-12-04 02:27:22Z

0

Your onClick event is wired up to handleSubmit(), that looks OK.

Does accessing the email value via this.refs.theInput.getDOMNode().value not work in handleSubmit()?

If so, I wonder if ReactBootstrap's <Input> is wrapping the native DOM <input> in some other elements; you might have to navigate the DOM tree in order to get to the actual <input> to grab the email value from.

answered Dec 4, 2014 at 2:27

Peter

6,3821 gold badge34 silver badges30 bronze badges

Comments

igreulich · Accepted Answer · 2015-03-13 01:26:40Z

0

Like Peter mentioned, I had to traverse the object pretty far.

In my component's render function;

render: function() {
  return (
    <form onSubmit={this.handleSubmit}>
      <Input ref='gameTitle' type='text' buttonAfter={<Button type="submit">Save</Button>} />
    </form>
  );
}

In my handleSubmit function;

handleSubmit: function() {
  console.log(this.refs.gameTitle.refs.input.getDOMNode().value);
}

answered Mar 13, 2015 at 1:26

igreulich

1389 bronze badges

Collectives™ on Stack Overflow

Trigger the React-Bootstrap Input Component Validation Programmatically

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related