必需的属性集，但未验证
[英]Required attribute set but no validation
问题描述
i have a bootstrap site and have 4 different forms. 
我有一个引导站点，并有4种不同的形式。 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. 在我的本地计算机上，如果字段为空，则验证有效，但是当我将其发布到Web主机时，验证不起作用。
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>
1 个解决方案
解决方案1
0 2015-06-16 13:00:44
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. 例如，当使用javascript Submit（）方法时，在某些浏览器中，也无法使用。 So Best way is to validate using javascript(client side) 因此，最好的方法是使用javascript（客户端）进行验证
So create a javascript function and call it during form onsubmit event 因此，创建一个javascript函数并在表单onsubmit事件期间调用它
function checkform(form) { 函数checkform（form）{
var inputs = form.getElementsByTagName('input'); var输入= form.getElementsByTagName（'input'）;
for (var i = 0; i < inputs.length; i++) { for（var i = 0; i <inputs.length; i ++）{
if(inputs[i].hasAttribute("required")){ if（inputs [i] .hasAttribute（“ required”））{
if(inputs[i].value == ""){ if（inputs [i] .value ==“”）{
alert("Please fill all required fields"); alert（“请填写所有必填字段”）;
return false; 返回false；
} }
} }
} return true; 返回true； } }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
HTML5 表单必需属性。 设置自定义验证消息？ - HTML5 form required attribute. Set custom validation message?
如何在 HTML5 表单必填属性上设置验证消息的时间？ - How set time for validation message on HTML5 form required attribute?
表单所需的属性验证错误 - Form required attribute validation error
对具有必需属性的所有字段进行 Javascript 验证 - Javascript Validation for all field with Required attribute
在Html.Textbox上设置必需属性 - Set required attribute on Html.Textbox
Angular 2 验证和复选框“必需”属性在 Firefox 上不起作用 - Angular 2 validation and checkbox 'required' attribute does not work on Firefox
HTML和JavaScript验证问题：“元素脚本缺少必需的属性src” - Html & JavaScript validation problem: “Element script is missing required attribute src”
HTML，是否可以通过“ required”属性更改验证消息的位置？ - HTML, Is it possible to change validation message location from the “required” attribute?
HTML表单验证-在继续之前检查“必需”属性 - HTML form validation - check 'required' attribute before proceeding
非提交按钮上的文本验证必需属性？ - Text validation required attribute on non-submit button?
相关标签