Unable to make form field compulsory

Question

Below is the snapshopt of the form which i am rendering, everything works fine except that i am not able to make form fields compulsory.I am rendering this form by means of react component.

Code:-

    return <div className="panel alignment div-background" id="new-trade-form">
        {this.props.store.newTradeRender}
        <div className="panel panel-default">
            <div className="panel-heading center-align" ><strong>New Trade</strong></div>
        </div>

        <div className="panel-body">

            <fieldset>
                <form name="myForm" id="newForm" ref="newForm" data-toggle="validator" >

                    Trade Date:
                        <div className='input-group date'>
                        <input type='date' className="form-control" id="date" required />
                        <span className="input-group-addon">
                            <span className="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                    <br />

                    <div className="form-group">
                        Commodity:
                                <select className="form-control" id="commodity" ref="commodity" required>
                            <option disabled selected value=""> -- select a commodity -- </option>
                            {commodity}
                        </select>
                    </div>

                    Side:&nbsp; &nbsp;
                            <input type="radio" id="side" name="side" value="BUY" ref="side" />Buy &nbsp;
                            <input type="radio" id="side" name="side" value="SELL" ref="side" />Sell
                        <br />
                    <br />

                    <div className="form-group">
                        Counterparty:
                                <select className="form-control" id="counterparty" ref="counterparty" required>
                            <option disabled selected value=""> -- select a counter party -- </option>
                            {counterParty}
                        </select>
                    </div>
                    <br />

                    <div className="form-group">
                        Price($):<input id="price" name="price" type="number" step="any" className="form-control" ref="price" required />
                    </div>
                    <br />

                    <div className="form-group">
                        Quantity(MT):<input id="qty" name="qty" type="number" step="any" className="form-control" ref="qty" required />
                    </div>
                    <br />

                    <div className="form-group">
                        Location:
                                    <select className="form-control" id="location" ref="location" required>
                            <option disabled selected value=""> -- select a location -- </option>
                            {location}
                        </select>
                    </div>
                    <br />

                    <button type='submit' className="btn btn-css btn-size" onClick={this.onSave} >SAVE</button>
                </form>
            </fieldset>
        </div>

    </div>

Note i am not getting any errors and everything works fine. Below is the snapshot of the form:-

I can submit the form without filling any form field, this is not i want, what should happen is if a user submit the form and he misses any field then form should not get submitted, instead he should get warning that the has not entered that field — AConsumer, Mar 28 '18 at 11:18
Note that `
` and `` do not use or need a closing slash and never have. — Rob, Mar 28 '18 at 11:27
but it give error when i remove slash..since backward slash are always compulsory in react @Rob — AConsumer, Mar 28 '18 at 11:47
Someone with the React folk need to fix that blunder on their part then. No HTML specification has ever said to use a slash there. — Rob, Mar 28 '18 at 11:55
bro Rob..u r right with html ..but it didn't works that way in react.. — AConsumer, Mar 28 '18 at 11:58

Yossi · Answer 1 · 2018-03-28T11:24:22.363

0

Try moving the handler from the button to the 's onSubmit:

<form name="myForm" id="newForm" onSubmit={this.onSave} data-toggle="validator" >
  <input type='date' className="form-control" id="date" required />
  <button type='submit'>SAVE</button>
</form>

edited Mar 28 '18 at 11:24

answered Mar 28 '18 at 11:14

Yossi

5,577
7
41
76

Sorry. Generally speaking, using bootstrap with React may cause you problems. See explanation here: https://stackoverflow.com/questions/38015494/can-we-use-pure-bootstrap-with-react-js I recommend using reactstrap: https://github.com/reactstrap/reactstrap. I tried also the more popular react-bootstrap. I think that reactstrap is better. You can have as a starting point the following: https://github.com/rahamin1/reactstrap-form (it has link to a demo in it Readme) – Yossi Mar 28 '18 at 12:42

score 0 · Answer 2 · answered Mar 28 '18 at 11:33

0

remove onclick() and use submit only

answered Mar 28 '18 at 11:33

Ritul Lakhtariya

362
1
16

simply follow it ,!!https://stackoverflow.com/questions/42254697/required-in-html-form-not-working – Ritul Lakhtariya Mar 28 '18 at 11:35
..by doing what u suggested worked !, but the onSave handle didn't worked :(. & i don't know why the heck the page get refreshed by use of onSubmit – AConsumer Mar 28 '18 at 11:56
$(form).submit(function(){ call_ur_function(); return false; }); – Ritul Lakhtariya Mar 28 '18 at 12:08

sajan · Answer 3 · 2018-03-28T11:53:59.753

@Shivendra Gupta, I have removed form tag and using refs object and assigning formRefs object when the user clicks save button a loop will run for formRefs objects and if the objects value is empty then you can show the particular filed is required. For reference I am logging the message. Hope that helps.

class Form extends Component {


constructor(props) {
    super(props);
    this.formRefs = {};
  }



onSave = () => {
    for(let key in this.formRefs) {
      console.log(this.formRefs[key].value);
      if(!this.formRefs[key].value) {
        console.log(this.formRefs[key].getAttribute('id'), ' is required!');
      }
    }
}
  onCancel = () => {
    console.log('onCancel');
  }
render() {
return (
  <div className="panel alignment div-background" id="new-trade-form">
    <div className="panel panel-default">
        <div className="panel-heading" ><strong>Trade id: 0001 </strong></div>
    </div>
    <div className="panel-body">

        <fieldset>
            <div>

                Trade Date:
                    <div className='input-group date'>
                    <input type='date' className="form-control" id="date" ref={(input) => {this.formRefs.date = input}} />
                    <span className="input-group-addon">
                        <span className="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
                <br />

                <div className="form-group">
                    Commodity:
                            <select className="form-control" id="commodity" ref={(input) => {this.formRefs.commodity = input}}>
                        <option selected value=""> -- select a commodity -- </option>
                    </select>
                </div>

                Side:&nbsp; &nbsp;
                        <input type="radio" id="side" name="side" value="BUY"  ref={(input) => {this.formRefs.side = input}} />Buy &nbsp;
                        <input type="radio" id="side" name="side" value="SELL" ref={(input) => {this.formRefs.side = input}} />Sell
                    <br />
                <br />

                <div className="form-group">
                    Counterparty:
                            <select className="form-control" id="counterparty" ref={(input) => {this.formRefs.counterparty = input}} >
                        <option disabled selected value=""> -- select a counter party -- </option>

                    </select>
                </div>
                <br />

                <div className="form-group">
                    Price($):<input id="price" name="price" type="number" step="any" className="form-control" 
                    ref={(input) => {this.formRefs.price = input}} />
                </div>
                <br />

                <div className="form-group">
                    Quantity(MT):<input id="qty" name="qty" type="number" step="any" className="form-control" 
                    ref={(input) => {this.formRefs.qty = input}} />
                </div>
                <br />

                <div className="form-group">
                    Location:
                                <select className="form-control" id="location" ref={(input) => {this.formRefs.location = input}}>
                        <option disabled selected value="">-- select a location --  </option>
                    </select>
                </div>
                <br />

                <button className="btn btn-css btn-size btn-spacing"  onClick={this.onSave} >SAVE </button>
                <button className="btn btn-css btn-size btn-spacing"  onClick={this.onCancel} >CANCEL </button>
            </div>
        </fieldset>
    </div>

</div>
)


}
}

Unable to make form field compulsory

3 Answers3