開始日期結束日期驗證提交表單應禁用

我不瓦納提交我的形式，如果開始日期，結束日期驗證失敗......在我的形式，如果我有這個...
開始日期結束日期驗證提交表單應禁用

<form name="scheduleForm" id="scheduleForm" class="form-vertical" novalidate> 

<input type="text" placeholder="Start Date" ng-model="schedule.startDate" class="form-control" ui-date novalidate required> 
<input type="text" name="endDate" placeholder="End Date" ng-model="schedule.endDate" class="form-control" ui-date novalidate ng-change='checkErr(schedule.startDate,schedule.endDate)' required> 

<button class="btn btn-primary" ng-click="addSchedule(schedule)" ng-disabled="errMessage || scheduleForm.$invalid">Add Schedule</button>

和Controller：

$scope.checkErr = function(startDate,endDate) { 
     $scope.errMessage = ''; 
     var curDate = new Date(); 

     if(new Date(startDate) > new Date(endDate)){ 
      $scope.errMessage = 'End Date should be greater than start date'; 
      // var err=function() { 
      // $window.alert('End Date should be greater than start date');}; 
      // err(); 
      return false; 
     } 
     if(new Date(startDate) < curDate){ 
      $scope.errMessage = 'Start date should not be before today.'; 
      // var err=function() { 
      // $window.alert('Start date should not be before today.');}; 
      // err(); 
      return false; 
     } 
    };

和附加功能：

$scope.addSchedule=function(schedule){ 

    $scope.schedules.push({ 
     startDate: schedule.startDate, 
     endDate: schedule.endDate, 
    }); 

    schedule.startDate=''; 
    schedule.endDate=''; 
    };

概率是按鈕看起來禁用BT添加它允許數據......你幫預先感謝

來源

2016-04-15 swati kiran

只知道...是在所有瀏覽器發生了什麼？我的意思是你看到它被禁用，但可以點擊按鈕... –

更新你的ng-disable像as-ng-disabled =「errMessage！=''|| scheduleForm。$ invalid」也啓動你的$ scope。 errMessage ='''chkErr'消息之前 –

爲什麼你不加驗證，當元素已經準備就緒。看看這裏的演示https://plnkr.co/edit/JunWzLjhLCPMqZnxsSYw?p=preview

var app = angular.module('myApp', ['ui.date']); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.schedule = {}; 
 
    $scope.dateOptions = { 
 
    changeYear: true, 
 
    date:$scope.schedule.startDate, 
 
    changeMonth: true, 
 
    yearRange: '1900:-0', 
 
    maxDate: new Date(new Date().setDate(new Date().getDate() + 2)), 
 
    minDate:new Date() 
 
    }; 
 
    
 
    $scope.addSchedule=function(schedule){ 
 
    console.log($scope.schedule) 
 
    }; 
 

 
});

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
 
    <script src="date.js"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <form name="scheduleForm" id="scheduleForm" class="form-vertical" novalidate> 
 

 
<input type="text" placeholder="Start Date" ng-model="schedule.startDate" ui-date-format="DD, d MM, yy" 
 
     class="form-control" min-date="minDate" max-date="maxDate" ui-date="dateOptions" novalidate required> 
 
<!--<input type="text" name="endDate" placeholder="End Date" ui-date-format="DD, d MM, yy" ng-model="schedule.endDate" class="form-control" ui-date novalidate ng-change='checkErr(schedule.startDate,schedule.endDate)' required> 
 
--> 
 
<button class="btn btn-primary" ng-click="addSchedule(schedule)" ng-disabled="scheduleForm.$invalid">Add Schedule</button> 
 
</form> 
 
    </body> 
 

 
</html>

來源

2016-04-15 14:27:55

正確比較時應該使用getTime()功能

if(new Date(startDate).getTime() > new Date(endDate).getTime())

和按鈕檢查日期驗證所以沒有必要在結束日期更改使用checkErr()

<button class="btn btn-primary" ng-click="addSchedule(schedule)" ng-disabled="checkErr(schedule.startDate,schedule.endDate)|| scheduleForm.$invalid">Add Schedule</button>

和你checkErr功能，如：

$scope.checkErr = function(startDate,endDate) { 
    var curDate = new Date(); 
    // can set error message if need to show 
    if(new Date(startDate).getTime() > new Date(endDate).getTime()){ 
     return true; // if invalid 
    } 
    if(new Date(startDate).getTime() < curDate.getTime()){ 
     return true; // if invalid 
    } else { 
     return false // if valid 
    } 
};

來源

2016-04-15 14:37:01

開始日期結束日期驗證提交表單應禁用

回答

相關問題