Блог

Я столкнулся с проблемой с ошибкой обратной связи при проверке формы bootstrap 4. Я бы хотел, чтобы метка меняла цвет вместо того, чтобы div с недопустимой обратной связью отображался под полем ввода. Пожалуйста, как я могу достичь своей цели? Ниже приведена форма, которую я использую, и версия boostrap 4.5. Большое спасибо за любую помощь, которую вы можете мне оказать.

 enter code here 
               <div class="row">
                <div class="col-md-12"><!--Grid column-->
                 <div class="myeditform">
                  <form action="page.asp" id="add-form" class="add-form" method="post" novalidate>
                   <input type="hidden" id="action" name="action" value="addnew">
                   <div class="row">
                    <div class="col-md-8">
                     <div class="md-form mb-0">
                        <label for="ev_title">Title *</label>
                        <input type="text" class="form-control" name="ev_title" id="ev_title" placeholder="Title ..." required="required">
                        <div class="invalid-feedback">This field is required</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="md-form mb-0">
                        <label for="ev_is_active">Status</label>
                        <select class="browser-default form-control" id="ev_is_active" name="ev_is_active">
                                <option value="true">ON LINE</option>
                                <option value="false">OFF LINE</option>
                        </select>
                    </div>
                </div>
            </div><!-- row -->
            
            <div class="row">
                <div class="col-md-6">
                    <div class="md-form mb-0">
                        <label for="ev_at_place">Location *</label>
                        <input type="text" class="form-control" name="ev_at_place" id="ev_at_place" placeholder="Location ..." required="required">
                        <div class="invalid-feedback">This field is required</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="md-form mb-0">
                        <label for="ev_dance_type">Evening of *</label>
                        <select class="browser-default form-control" id="ev_dance_type" name="ev_dance_type" required="required">
                                <option value="">Seleziona...</option>
                                <option value="op1">op1</option>
                                <option value="op2">op2</option>
                                <option value="op3">op3</option>
                                <option value="op4">op4</option>
                                <option value="op5">op5</option>
                                <option value="op6">op6</option>
                                <option value="other">other</option>
                        </select>
                        <div class="invalid-feedback">This field is required</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="md-form mb-0">
                        <label for="ev_cycle">Frequency *</label>
                        <select class="browser-default form-control" id="ev_cycle" name="ev_cycle" required="required">
                                <option value="">Seleziona...</option>
                                <option value="7">7</option>
                                <option value="14">14</option>
                                <option value="21">21</option>
                                <option value="28">28</option>
                                <option value="0">One time off</option>
                        </select>
                        <div class="invalid-feedback">This field is required</div>
                    </div>
                </div>
            </div><!-- row -->
            <div class="row">
                <div class="col-md-12">
                    <div class="md-form mb-0">
                        <label for="ev_description">Description *</label>
                        <textarea class="form-control" name="ev_description" id="ev_description" rows="10" placeholder="Description required ..." required="required"></textarea>
                        <script>
                             CKEDITOR.replace( 'ev_description');
                        </script>
                        <div class="invalid-feedback">This field is required</div>
                    </div>
                </div>
            </div><!-- row -->
            
            <div class="row">
                <div class="col-md-12">
                    <div class="md-form mb-0">
                        <label for="ev_notes">Note</label>
                        <input type="text" class="form-control" name="ev_notes" id="ev_notes" placeholder="Es.  ...">
                    </div>
                </div>
                
            </div><!-- row -->
            <div class="row">
                <div class="col-md-12">
                    <div class="md-form mb-0">
                        <button type="button" class="btn btn-primary mybtn float-left" onclick="history.go(-1)">Back</button>
                        amp;nbsp;<button type="reset" class="btn btn-warning mybtn float-left">Reset</button>
                        <button type="submit" class="btn btn-primary float-right" >Add</button>
                    </div>
                </div>
            </div><!-- row -->
        </form>
            
    </div> <!--myedit form-->
</div><!--Grid column-->