Question

我的问题是，当我在输入日期（2016年4月29日）时尝试将输入类型的日期birthdate置于需要时，所需的仍会显示，并且不允许我提交我的表格。当我尝试删除birthdate输入中的必需属性时，它工作得很好......但我想要的是要求birthdate ....我不知道为什么它赢了＃39; t日期工作，但在其他所需输入（例如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>

FORM

   <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>

Answer 1

我认为它不起作用，因为AngularJS使用 ISO-8601格式验证类型日期 yyyy-mm-dd 。因此，使用 yyyy / mm / dd 输入日期将导致触发错误的格式无效。请阅读AngularJS文档http://world.episerver.com/blogs/Ben-McKernan/Dates/2014/8/Uncompressed-JavaScript-for-EPiServer-76/以获取更多信息。

AngularJs在日期验证在IE和Mozilla中不起作用

1 个答案: