无法强制填写表单字段

Question

下面是我正在渲染的表单的 snapshopt，一切正常，除了我无法强制表单字段。我正在通过 react 组件渲染此表单。

代码：-

    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>

请注意，我没有收到任何错误，一切正常。 以下是表单截图：-

Answer 1

尝试将处理程序从按钮移动到 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>

Answer 2

删除 onclick() 并仅使用提交

Answer 3

@Shivendra Gupta，我已删除表单标签并使用 refs 对象并在用户单击保存按钮时分配 formRefs 对象，将为 formRefs 对象运行一个循环，如果对象值为空，那么您可以显示特定的字段是必需的。作为参考，我正在记录该消息。希望有帮助。

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


}
}