我的问题是,当我尝试将 required 放在我的输入类型日期(即 birthdate
)上时,当我输入日期(2016 年 4 月 29 日)时,required 仍然显示,但它不允许我输入提交我的表格。当我尝试删除我的 birthdate
输入上的必需属性时,它工作正常......但我想要的是使 birthdate
成为必需......我不知道为什么它在日期上不起作用,而在其他必需的输入(如 full_name
、gender
和 email
由于 html5 不适用于 Mozilla 和 IE 我使用插件来使其工作。
<!--HTML5 Date and Month Input Compatibility-->
<!-- cdn for modernizr-->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<!--end of compatibility-->
<script>
webshims.setOptions('waitReady', false);
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
</script>
提交按钮
<button type="submit" form="form-customer"
class="btn btn-primary pull-right" id="cmd_insert_customer" ng-show="tab == 3">
Insert Customer
</button>
表格
<div class="row" ng-show="tab == 3">
<div class="col-md-12">
<form name="form" ng-submit="form.$valid && insertCustomer(form)" id="form-customer" class="css-form" novalidate >
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
<img src="{{profilePic}}" id="profile_picture" class="img-responsive img-thumbnail" />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="file" name="image_path" id="image" class="form-control" onchange="angular.element(this).scope().uploadFile(this.files)" />
</div>
</div>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-md-7">
<label>Full Name*
<span class="required-label" ng-show="form.$submitted || form.full_name.$touched">
<span ng-show="form.full_name.$error.required">(Full Name is required.)</span>
</span>
</label>
<input type="text" ng-model="insertProfile.full_name" name="full_name" class="form-control" required="" />
</div>
</div>
<br />
<div class="row">
<div class="col-md-7">
<label>Gender*
<span class="required-label" ng-show="form.$submitted || form.gender.$touched">
<span ng-show="form.gender.$error.required">(Gender is required.)</span>
</span>
</label>
<select name="gender" class="form-control" ng-model="insertProfile.gender" required >
<option value ="">Select Gender</option>
<option value = "M">Male</option>
<option value = "F">Female</option>
</select>
</div>
</div>
<br />
<div class="row">
<div class="col-md-7">
<label>Birth Date*
<span class="required-label" ng-show="form.$submitted || form.birth_date.$touched">
<span ng-show="form.birth_date.$error.required">(Birthdate is required.)</span>
</span>
</label>
<input type="date" name="birth_date" class="form-control" ng-model="insertProfile.birth_date" required />
</select>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-5">
<label>Mobile #</label>
<input type="number" name="mobile" value="" class="form-control" ng-model="insertProfile.mobile" />
</div>
<div class="col-md-5">
<label>Email*
<span class="required-label" ng-show="form.email.$error.email">(Invalid email address.)</span>
<span class="required-label" ng-show="form.$submitted || form.email.$touched">
<span ng-show="form.email.$error.required">(Email is required.)</span>
</span>
</label>
<input type="email" name="email" value="" class="form-control" ng-model="insertProfile.email" required />
</div>
</div>
<br />
<div class="row">
<div class="col-md-5">
<label>City</label>
<input type="text" name="city" value="" class="form-control" ng-model="insertProfile.city" />
</div>
<div class="col-md-5">
<label>Address</label>
<textarea name="address" class="form-control" rows="4" cols="50" ng-model="insertProfile.address" ></textarea>
</div>
</div>
</form>
</div>
</div>
最佳答案
我认为它不起作用,因为 AngularJS 使用 ISO-8601 格式验证类型日期,即 yyyy-mm-dd。因此,输入带有 yyyy/mm/dd 的日期将导致格式无效,从而触发错误。请阅读 AngularJS 文档 here欲了解更多信息。
关于javascript - AngularJs 日期验证在 IE 和 Mozilla 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36931696/