This is a migrated thread and some comments may be shown as answers.

angularjs, bootstrap, validator and datetime

4 Answers 349 Views

Validation

This is a migrated thread and some comments may be shown as answers.

Alistair asked on 10 Sep 2014, 12:09 PM

sourerequiredauthornotrequired.png

Hi,

When a form loads we want to highlight which fields are required fields by changing the colour of the label. If you look at the attached image SoureRequiredAuthorNotRequired.PNG you can see the Source field is highlighted in red as it is a required field. When a value is entered for the Source the red highlighting disappears.

To do this we have used:

<div class="form-group" ng-class="{'has-error' : editForm.Source.$error.required}">

<label for="Source" class="control-label required">Source</label>

<input type="text" id="Source" name="Source" ng-model="vm.data.record.source" class="form-control input" required />

</div>

<div class="form-group">

<label for="Author" class="control-label">Author</label>

<input type="text" id="Author" name="Author" ng-model="vm.data.record.author" class="form-control input" />

</div>

We have now added in a Kendo date picker and hoped this would work in the same way:

<div class="form-group" ng-class="{'has-error' : editForm.PressCuttingDate.$error.required}">

<label for="PressCuttingDate" class="control-label required">Date</label>

<input type="date" kendo-date-picker id="PressCuttingDate" name="PressCuttingDate" k-ng-model="vm.data.record.pressCuttingDate" k-format="'dd/MM/yyyy'" style="width: 100%" required />

</div>

<div class="form-group" ng-class="{'has-error' : editForm.Source.$error.required}">

<label for="Source" class="control-label required">Source</label>

<input type="text" id="Source" name="Source" ng-model="vm.data.record.source" class="form-control input" required />

</div>

<div class="form-group">

<label for="Author" class="control-label">Author</label>

<input type="text" id="Author" name="Author" ng-model="vm.data.record.author" class="form-control input" />

</div>

Unfortulately this does not work. It seems that to validate a kendo date picker you have to use the kendo validator. Is that correct?

Assuming that is correct, we added the following code:

<form name="editForm" novalidate kendo-validator="vm.formValidation">

to use the kendo validator. Looking at the documentation you have a validateInput function which validates just one field:

http://docs.telerik.com/kendo-ui/api/javascript/ui/validator#methods-validateInput

We then tried:

<div class="form-group" ng-class="{'has-error' : vm.formValidation.validateInput($('input[name=PressCuttingDate]')) }">

<label for="PressCuttingDate" class="control-label required">Date</label>

</div>

Which did not work. validateInput only seems to work if it used as part of a button click. Is this correct?

How can I get this to work so that the red highlighting appears when nothing has been entered and disappears when a value has been entered (without the user clicking on a save button etc)?

Many thanks

4 Answers, 1 is accepted

answered on 11 Sep 2014, 09:25 AM

Things have improved with AngularJS 1.3 RC 1 where this is now possible:

<div class="form-group" ng-class="{'has-error' : editForm.PressCuttingDate.$error.required || editForm.PressCuttingDate.$error.date}">

<label for="PressCuttingDate" class="control-label required">Date</label>

<input type="date" kendo-date-picker id="PressCuttingDate" name="PressCuttingDate" ng-model="vm.data.record.pressCuttingDate" style="width: 100%" k-format="'dd/MM/yyyy'" required />

</div>

along with:

<li ng-show="editForm.PressCuttingDate.$error.required">Please enter the Date.</li>

<li ng-show="editForm.PressCuttingDate.$error.date">Please enter a valid Date.</li>

which is great. Unfortunately with AngularJS 1.3 RC1 you cannot set the value of the date picker. If you run this example:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.default.min.css" rel="stylesheet" />

<script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example" ng-app="KendoDemos">

<div class="demo-section k-content" ng-controller="MyCtrl">

<div class="box-col">

<h4>Select date:</h4>

<input kendo-date-picker ng-model="dateString" type="date" k-format="dd/MM/yyyy" />

<pre>

dateString: {{ dateString }}

</pre>

</div>

<script>

angular.module("KendoDemos", ["kendo.directives"]).controller("MyCtrl", function MyCtrl($scope) {

$scope.dateString = "10/12/2014";

});

</script>

</div>

</body>

</html>

everything works. Now uncomment the AngularJS 1.3 RC1 script and comment out the other AngularJs script and this no longer works.

Questions:
Will the Kendo UI only work with certain versions of AngularJS? If so, where can I see the list of supported versions of AngularJs for each version of KendoUI?
Have a done something wrong?
Is this a bug?

Thanks for your help. I would also like to know whether this could ever work as mentioned in the previous post:

<div class="form-group" ng-class="{'has-error' : vm.formValidation.validateInput($('input[name=PressCuttingDate]')) }">

<label for="PressCuttingDate" class="control-label required">Date</label>

</div>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

angularjs, bootstrap, validator and datetime

4 Answers, 1 is accepted