是否有方法使用javascript对文本输入的行进行验证并选择字段

嗨，开发者们，我是一个新的学习者，尝试探索一切。现在我有一个任务，一旦为行中的任何字段输入了信息，该行中的所有字段都应该是必需的。这是我发现的最好的例子，但他使用的是Jquery而不是javascript。请查看此链接。这篇文章和其中一条建议在如何处理行中文本输入字段的验证方面非常有用。但是，我还需要将该验证逻辑应用于选择字段和文本输入。因此，一旦用户尝试提交，但他忘记填写其他字段，它将提醒您忘记填写一些已填写的字段

这是我当前的表格：

我的JSX渲染表：

return (
         this.state.rows.map((x, i) => {

            let { customer, bank, branch, checkNo, amount, remarks, checkDate, select_day, select_months, select_year, selected_check_dates } = x
      
            return (
                
                <>
                <tr key={i}>
                    <td className="boder-gray">
                        <select
                            ref={(input) => { this.inputFocus = input; }}
                            className="form-control receive" style={{ width: "295px" }} value={customer} name="customer" onChange={e => this.handleInputChange(e, i)} >
                            <option value="" key="0" disabled>Select Customer</option>
                            {loadCustomers && loadCustomers ? loadCustomers.map(row => (

                                <option value={row.id} key={row.id}>{row.company_name != null && row.contact_person != null && row.payer == "" ? `${row.company_name} / ${row.contact_person}` : row.payer}</option>
                                
                            ))
                                : null
                            }
                        </select>
                    </td>
                    <td className="boder-gray">
                        <select className="form-control receive" style={{ width: " 145px", textAlign:'left'}} name="bank" value={bank} onChange={e => this.handleInputChange(e, i)} >
                            <option value="" key="0" disabled>Select Bank</option>
                            {loadBank && loadBank ? loadBank.map(row => (
                                <option value={row.id} key={row.id}>{row.bank_name}</option>
                            ))
                                : null
                            }
                        </select>
                    </td>
                    <td className="boder-gray" >
                        <input className="form-control input-sm receive" style={{width:'145px'}} placeholder="Branch" name="branch" value={branch} onChange={e => this.handleInputChange(e, i)}  />
                    </td>
                    <td className="boder-gray" >
                        <input type="number" className="form-control input-sm receive" style={{width:'175px'}} name="checkNo" placeholder="Check No."  value={checkNo} onChange={e => this.handleInputChange(e, i)}  />
                    </td>
                    <td className="boder-gray">
                        <input type="date"   value={checkDate} name="checkDate" onChange={e => this.handleInputChange(e, i)} className="form-control" style={{border:'none'}}/>
                    </td>
                    <td className="boder-gray" style={{textAlign:'right'}}>
                        <NumberFormat
                            name="amount"
                            onChange={e => this.handleInputChange(e, i)}
                            className="form-control receive input-sm"
                            thousandSeparator={true}
                            placeholder="Amount"
                            fixedDecimalScale
                            decimalScale={2}
                            style={{textAlign:'right',width:'137px'}}
                            value={amount}
                            
                        />
                        {/* <input className="form-control receive input-sm" name="amount" placeholder="Amount" onChange={e => this.handleInputChange(e, i)} /> */}
                    </td>
                    <td className="boder-gray" >
                        <select className="form-control input-sm receive" style={{width:'223px'}} name="remarks" value={remarks} onChange={e => this.handleInputChange(e, i)} >
                            <option value="" key="0" disabled>Select Remarks</option>
                            {getCheckRemark && getCheckRemark ? getCheckRemark.map(row => (
                                <option value={row.id} key={row.id}>{row.check_remark}</option>
                            ))
                                : null
                            }
                        </select>
                    </td>
                    {/* &nbsp;<span className="fa  fa-minus" onClick={() => this.ClearRowData(i)} index={i}></span> */}
                    {/* {this.state.numberRows >= 5 ? <td style={{width:'120px',borderTopColor:'white'}}><div style={{marginLeft:15}}><div className="row"><span className="fa  fa-trash" index={i} onClick={this.MinusRow}></span> &nbsp;<span className="fa  fa-minus" onClick={() => this.ClearRowData(i)} index={i}></span></div></div></td> : ''} */}
                    <td style={{borderTopColor:'white'}}><div style={{marginLeft:15}}><div className="row"><span className="fa  fa-trash" index={i} onClick={() => this.MinusRow(i)}></span> </div></div></td>
                </tr>
                </>

                
            );
        })
    )
}

希望有人能帮我。谢谢

    handleSubmit = (e) => {

    e.preventDefault();

    this.state.rows.map((obj, i) => {

       let obj_amount = obj.amount;
       let obj_bank = obj.bank;
       let obj_branch = obj.branch;
       let obj_check_date = obj.checkDate;
       let obj_check_no = obj.checkNo;
       let obj_customer = obj.customer;
       let obj_remarks = obj.remarks;

    });

}