我有一个引导网站，有4种不同的形式。我针对某些字段设置了必需的属性。在我的本地计算机上，如果字段留空，则验证有效，但当我将其发布到Web主机时，验证不起作用。
字段类型包括从自由文本输入到复选框，选择框和单选按钮。
我是通过手机写的，所以请不要显示代码片段。对不起。建议非常受欢迎。
<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>
答案 0 :(得分：0)
仅使用必需属性进行验证并不好，因为在许多情况下它可能不起作用。例如，当使用javascript submit（）方法时，也需要在某些浏览器中使用。所以最好的方法是使用javascript验证（客户端）
因此，创建一个javascript函数并在表单onsubmit event
功能检查表（表格）{
var inputs = form.getElementsByTagName（＆＃39; input＆＃39;）;
for（var i = 0; i＆lt; inputs.length; i ++）{
如果（输入[I] .hasAttribute（＆＃34;需＆＃34））{
if（inputs [i] .value ==＆＃34;＆＃34;）{
提醒（＆＃34;请填写所有必填字段＆＃34;）;
返回false;
}
}
}
返回true;
}