Required attribute set but no validation - html

Question

i have a bootstrap site and have 4 different forms. I set the required attribute against certain fields. On my local machine, the validation works if the fields are left blank but when I post it to a web host, the validation does not work.
The field types range from free text input to check boxes, select boxes and radio buttons.
I am writing this from my mobile so don't have a snippet of code to show. Sorry all. Suggestions are more than welcome.
<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

validation only using required attribute is not good, because it may not work in many cases. for example when using javascript submit() method, also in some browsers,required wont work. So Best way is to validate using javascript(client side)
So create a javascript function and call it during form onsubmit event
function checkform(form) {
var inputs = form.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
if(inputs[i].hasAttribute("required")){
if(inputs[i].value == ""){
alert("Please fill all required fields");
return false;
}
}
}
return true;
}