Обязательный атрибут, но не проверка

Question

У меня есть загрузочный сайт и 4 разных формы. Я устанавливаю требуемый атрибут для определенных полей. На моей локальной машине проверка выполняется, если поля остаются пустыми, но когда я отправляю их на веб-хост, проверка не работает.

Типы полей варьируются от свободного ввода текста до флажков, выберите поля и переключатели.

Я пишу это со своего мобильного телефона, поэтому у меня нет фрагмента кода для показа. Извините. Предложения более чем приветствуются.

<fieldset> 
        <b><u><h4>Trip Type</h4></u></b> 
        <div class = "form-group"> 
         <label for="where">Will you be:</label> 
         <select class="form-control" id="where" name = "where" required> 
          <option></option> 
          <option value = "travelling to">Travelling to the Airport</option> 
          <option value = "travelling from">Travelling from the Airport</option> 
         </select> 
        </div> 
       <div class = "row"> 
        <div class = "col-lg-6 col-md-6"> 
         <div class = "form-group"> 
          <label for = "airporttype">From/to which airport:</label> 
          <div class = "radio"> 
           <label class="radio-inline"><input type="radio" name="airporttype" id = "airporttype" value = "International" required>International</label> 
           <label class="radio-inline"><input type="radio" name="airporttype" id = "airporttype" value = "Domestic">Domestic</label> 
          </div> 
         </div> 
        </div> 
        <div class = "col-lg-6 col-md-6"> 
         <div class="control-group form-group"> 
          <label for = "trip">Is this a Single or Return Trip:</label> 
          <div class = "radio"> 
           <label class="radio-inline"><input type = "radio" name = "trip" id = "trip" class = "return" value = "Single" required>Single</label> 
           <label class="radio-inline"><input type = "radio" name = "trip" id = "trip" class = "return" value = "Return">Return Trip</label> 
          </div> 
         </div> 
        </div> 
       </div> 
        <hr> 
        <b><u><h4>Your Details</h4></u></b> 
        <div class="control-group form-group"> 
         <div class="controls"> 
          <label for = "fname">First Name:</label> 
          <input type = "text" class = "form-control" id = "fname" name = "fname" required placeholder = "Enter First Name" data-validation-required-message="Please enter your first name."> 
          <p class="help-block"></p> 
         </div> 
        </div> 
        <div class="control-group form-group"> 
         <div class="controls"> 
          <label for = "surname">Last Name:</label> 
          <input type="text" class="form-control" id="surname" name = "surname" required placeholder = "Enter Last Name" data-validation-required-message="Please enter your last name."> 
          <p class="help-block"></p> 
         </div> 
        </div> 
        <div class="control-group form-group"> 
         <div class="controls"> 
          <label for = "cell1">Contact Mobile/Cell:</label> 
          <input type="text" class="form-control" id="cell1" name = "cell1" required placeholder = "Enter Mobile/Cell Number Main" data-validation-required-message="Please enter your main contact number."> 
          <p class="help-block"></p> 
         </div> 
        </div> 
        <div class="control-group form-group"> 
         <div class="controls"> 
          <label for = "cell2">Contact Mobile/Cell 2:</label> 
          <input type="text" class="form-control" id="cell2" name = "cell2" placeholder = "Enter Mobile/Cell Number Alt" data-validation-required-message="Please enter your alternate contact number."> 
          <p class="help-block"></p> 
         </div> 
        </div> 
        <div class="control-group form-group"> 
         <div class="controls"> 
          <label for = "email">Enter your email address:</label> 
          <input type = "email" class = "form-control" id = "email" name = "email" required placeholder = "you@yourdomain.com" data-validation-required-message="Please enter your email address."> 
          <p class="help-block"></p> 
         </div> 
        </div> 
        <br> 
        <div class="control-group form-group"> 
         <div class="controls"> 
          <label for = "date16">Travel Date:</label> 
          <input type = "text" class="form-control datepicker" id = "date16" name = "date16" required data-validation-required-message="Please enter your travel date." style = "text-align: center"> 
          <p class="help-block"></p> 
         </div> 
        </div> 
        <div class="control-group form-group"> 
         <div class="controls"> 
          <label for="address">Pick Up/Destination Address:</label> 
          <input type = "text" class = "form-control" id = "address" name = "address" placeholder = "The start or end of your journey" required data-validation-required-message = "Please enter the address where you will start or finish your journey."> 
         </div> 
        </div> 
        <div class="control-group form-group"> 
         <div class="controls"> 
          <label for = "passnum">Number of Passengers:</label> 
          <select class="form-control" id = "passnum" name = "passnum" required> 
           <option></option> 
           <option value = "1">1</option> 
           <option value = "2">2</option> 
           <option value = "3">3</option> 
           <option value = "4">4</option> 
           <option value = "5">5</option> 
           <option value = "6">6</option> 
           <option value = "7">7</option> 
           <option value = "8">8</option> 
           <option value = "9">9</option> 
           <option value = "10">10</option> 
           <option value = "11">11</option> 
           <option value = "12">12</option> 
           <option value = "13">13</option> 
           <option value = "14">14</option> 
           <option value = "15">15</option> 
           <option value = "16">16</option> 
           <option value = "17">17</option> 
           <option value = "18">18</option> 
           <option value = "19">19</option> 
           <option value = "20">20</option> 
           <option value = "21">21</option> 
           <option value = "22">22</option> 
           <option value = "23">23</option> 
           <option value = "24">24</option> 
          </select> 
         </div> 
        </div> 
        <div class="control-group form-group"> 
         <div class="controls"> 
          <label for = "flightnum">Flight Number:</label> 
          <input type = "text" class="form-control" id = "flightnum" name = "flightnum" placeholder = "Please enter your flight number" required data-validation-required-message = "Please enter your flight number."> 
          <p class="help-block"></p> 
         </div> 
        </div> 
        <hr> 
        <b><u><h4>Child Seats</h4></u></b> 
        <div class = "row"> 
         <div class = "col-lg-4"> 
          <div class="control-group form-group"> 
           <label for = "babyseat">Baby Seat Required:</label> 
           <div class = "radio"> 
            <label class="radio-inline"><input type = "radio" name = "babyseat" id = "babyseat" class = "bseat12" value = "Yes" required>Yes</label> 
            <label class="radio-inline"><input type = "radio" name = "babyseat" id = "babyseat" class = "bseat12" value = "No">No</label> 
           </div> 
          </div> 
          <div class="control-group form-group" id = "babyseat1"> 
           <div class="controls"> 
            <label for = "bseatnum">Number of Baby Seats:</label> 
            <select class="form-control" id = "bseatnum" name = "bseatnum"> 
             <option></option> 
             <option value = "1">1</option> 
             <option value = "2">2</option> 
             <option value = "3">3</option> 
             <option value = "4">4</option> 
             <option value = "5">5</option> 
            </select> 
           </div> 
          </div> 
         </div> 
         <div class = "col-lg-4"> 
          <div class="control-group form-group"> 
           <label for = "boost">Booster Seat Required:</label> 
           <div class = "radio"> 
            <label class="radio-inline"><input type = "radio" name = "boost" id = "boost" class = "boost12" value = "Yes" required>Yes</label> 
            <label class="radio-inline"><input type = "radio" name = "boost" id = "boost" class = "boost12" value = "No">No</label> 
           </div> 
          </div> 
          <div class="control-group form-group" id = "boost1" > 
           <div class="controls"> 
            <label for = "boostnum">Number of Booster Seats:</label> 
            <select class="form-control" id = "boostnum" name = "boostnum"> 
             <option></option> 
             <option value = "1">1</option> 
             <option value = "2">2</option> 
             <option value = "3">3</option> 
             <option value = "4">4</option> 
             <option value = "5">5</option> 
            </select> 
           </div> 
          </div> 
         </div> 
         <div class = "col-lg-4"> 
          <div class="control-group form-group"> 
           <label for = "cradle">Baby Cradle Required</label> 
           <div class = "radio"> 
            <label class="radio-inline"><input type = "radio" name = "cradle" id = "cradle" class = "cradle12" value = "Yes" required>Yes</label> 
            <label class="radio-inline"><input type = "radio" name = "cradle" id = "cradle" class = "cradle12" value = "No">No</label> 
           </div> 
          </div> 
          <div class="control-group form-group" id = "cradle1"> 
           <div class="controls"> 
            <label for = "cradlenum">Number of cradles:</label> 
            <select class="form-control" id = "cradlenum" name = "cradlenum"> 
             <option></option> 
             <option value = "1">1</option> 
             <option value = "2">2</option> 
             <option value = "3">3</option> 
             <option value = "4">4</option> 
             <option value = "5">5</option> 
            </select> 
           </div> 
          </div> 
         </div> 
        </div> 
        <hr> 
        <b><u><h4>Additional Services</h4></u></b> 
        <div class = "row"> 
         <div class = "col-lg-6"> 
          <div class="control-group form-group"> 
           <label for = "shuttle">Shuttle Service:</label> 
           <div class="radio"> 
            <label for = "shuttle" class="radio-inline"><input id = "shuttle" name = "shuttle" type="radio" value = "Yes" required>Yes</label> 
            <label for = "shuttle" class="radio-inline"><input id = "shuttle" name = "shuttle" type="radio" value = "No">No</label> 
            <p class="help-block"></p> 
           </div> 
          </div> 
         </div> 
         <div class = "col-lg-6"> 
          <div class="control-group form-group"> 
           <label for "charter">Private Charter:</label> 
           <div class="radio"> 
            <label class="radio-inline"><input type="radio" name="charter" id = "charter" value = "Yes" required>Yes</label> 
            <label class="radio-inline"><input type="radio" name="charter" id = "charter" value = "No">No</label> 
            <p class="help-block"></p> 
           </div> 
          </div> 
         </div> 
        </div> 
        <hr> 
       </fieldset> 

Answer 1

Проверка только с использованием обязательного атрибута не является хорошей, потому что во многих случаях это может не сработать. например, при использовании метода javascript submit(), также в некоторых браузерах требуется не работать. Так Лучший способ для проверки с помощью JavaScript (стороны клиента)

Так создать яваскрипт функцию и вызвать его во время формы onsubmit события

функции checkform (формы) {
вара входов = form.getElementsByTagName (» вход ');
для (вар я = 0; я < inputs.length; я ++) {
, если (входы [I] .hasAttribute ("требуемая")) {
, если (входы [I] .value == "") {
предупреждение («Пожалуйста, заполните все обязательные поля»);
return false;
}
}
} return true; }