I'm trying to validate a YYYY-MM-DD date with the following code (parsley plugin), but i wish to show an error message with the %s value in DD/MM/YYYY format.
Is there a way to do that?
Thx!
<div class='input-group date' id='datetimepicker'>
<input type='text' name="contact-date" id="contact-date" data-parsley-mindate="2000-01-01" />
</div>
<script>
window.ParsleyValidator
.addValidator('mindate', function (value, requirement) {
// is valid date?
var timestamp = Date.parse(value),
minTs = Date.parse(requirement);
return isNaN(timestamp) ? false : timestamp > minTs;
}, 32)
.addMessage('en', 'mindate', 'This date should be greater than %s');
$('#myForm').parsley();
$('#datetimepicker').datetimepicker({
language:'en'
});
</script>
You could return a "dynamic" error message is by returning a failed promise from your validateString method. This example uses this technique.
Thank you!!
I added the following code when the validation fails and it works (it allows me to access the "%s" value to customize the message)
return $.Deferred().reject("custom message");
Related
I am trying to use Standard Date picker using below component but however I want to display custom error message when the enterted date is not in the speciied min & max range. But I am not able to achieve it as I could see the standard error message. I implemented the same by referring to : https://developer.salesforce.com/docs/component-library/bundle/lightning:input/example and in this link I can see that the custom error messages can be shown. But nothing worked for me can anyone please help.
https://developer.salesforce.com/docs/component-library/bundle/lightning:input/documentation
<lightning:input aura:id="field
type="date"
name="MyDatefield"
label="MyDateField"
value="2017-09-07"
min="2017-09-05"
messageWhenRangeUnderflow="Select correct date range1"
max="2017-09-22"
messageWhenRangeOverflow="Select correct date range2"
onchange="{!c.checkValidity }"
</aura:component>
This was asked 1 month back but sharing the answer if anybody else runs across this. Use lightning's setCustomValidity() and reportValidity() methods.
Component:
<aura:component >
<lightning:input aura:id="field"
type="date"
name="MyDatefield"
label="MyDateField"
value="2017-09-07"
min="2017-09-05"
max="2017-09-22"
onblur ="{!c.checkValidity }"
/>
</aura:component>
Controller:
({
checkValidity : function(component, event, helper) {
var inputCmp = component.find("field");
inputCmp.setCustomValidity(""); //reset error
var value = inputCmp.get("v.value");
console.log('value: '+value);
var lowerRange = new Date("2017/09/05");
var higherRange = new Date("2017/09/22");
if(!inputCmp.checkValidity()){
if(Date.parse(value)){
if (Date.parse(value) < lowerRange) {
inputCmp.setCustomValidity("Select correct date range1");
}else if (Date.parse(value) > higherRange){
inputCmp.setCustomValidity("Select correct date range2");
}
}else{
inputCmp.setCustomValidity("Invalid value");
}
}
inputCmp.reportValidity();
}
})
My HTML for date field is
<input class="form-control"type="text" name="txtOrderContractFinishDate" id="txtOrderContractFinishDate" ng-model="SelectedOrder.OrderContractFinishDate | jsDate | date:'MM/dd/yyyy'" placeholder="mm/dd/yyyy" />
jsDate function is as below
app.filter("jsDate", function () {
return function (x) {
return new Date(parseInt(x.substr(6)));
};
});
the date gets converted from JSON date format to MMddyyy format without any problem. But once after data is displayed if I try to edit the date field it is not allowing me to do so. I am new to angularjs. Can anyone help, please ?
I am having trouble displaying a date (stored as Unix timestamp integer) from firebase using Angularfire.
I have the following html:
<div class="form-group"">
<label for="message-followUp" class="control-label">Follow Up Date:</label>
<input type="date" id="message-followUp" ng-model="postToUpdate.followUp">
</div>
and the following controller:
$scope.notePost = function (id) {
var firebaseObj = new Firebase("https://firebase_url/Records/" + id);
$scope.postToUpdate = $firebaseObject(firebaseObj);
};
Within the data returned I have a key called 'followUp' that contains the Unix timestamp. When displaying the html I get the following error:
Error: [ngModel:datefmt] Expected 1466773470397 to be a date
I was hoping I could wrap 'postToUpdate.followUp' in new date() but that doesn't work
How do I convert the Unix timestamp to the correct date format (yyyy-MM-dd) so it displays without getting the error?
Thanks
The data you are retrieving from firebase is a string and the inux timestamp should be an Integer when passed to new Date.
JS
$scope.notePost = function (id) {
var firebaseObj = new Firebase("https://firebase_url/Records/" + id);
$scope.postToUpdate = $firebaseObject(firebaseObj);
$scope.postToUpdate.$loaded(
function(data) {
console.log(data);
$scope.date = new Date(parseInt(data.followUp));
},
function(error) {
console.error("Error:", error);
}
);
};
HTML
<div class="form-group"">
<label for="message-followUp" class="control-label">Follow Up Date:</label>
<input type="date" id="message-followUp" ng-model="date">
</div>
Working jsFiddle here.
i have a html5 input date field,
<input type="date" data-ng-model="personalDetailsObj.personalDetails.dob" name="dob"/>
i want to send the date format to server in the following order,
2013-09-22
controller
$scope.personalDetailsObj = {
"personalDetails": {
"dob": new Date(2015, 2, 2)
}
}
$scope.submitbtn = function(){
$scope.personalDetailsObj.personalDetails.dob = $filter('date')($scope.personalDetailsObj.personalDetails.dob,'yyyy-MM-dd');
}
But i am getting error saying: Error: [ngModel:datefmt] Expected 2015-02-02 to be a date
Filter will format date as string
$filter('date')($scope.personalDetailsObj.personalDetails.dob,'yyyy-MM-dd');
And you are assign it to the model which input type is a date
$scope.personalDetailsObj.personalDetails.dob = $filter('date')($scope.personalDetailsObj.personalDetails.dob,'yyyy-MM-dd');
If input type is date then ng-model should remain as date type
I'm using Valdr on my project and I need to validate that a date input "startDate" is before another date input "endDate".
<input id="startDate" name="startDate" type="text" ng-model="project.startDate"/>
<input id="endDate" name="endDate" type="text" ng-model="project.endDate"/>
I know that, without Valdr, this problem can be solved using a custom directive, as shown here: Directive for comparing two dates
I found a little unclear how to create a custom validator on Valdr that uses the values of other fields.
The answer is short but dissatisfactory: valdr does currently not support this. There is an open feature request on GitHub, though.
Until the feature gets implemented in valdr, you can use your own validator directive and kind of make it talk to valdr. The directive can require a 'form' and can get the names of the date models you want to compare. Then you do your logic to compare the two values and set the validity of the appropriate 'ngModelController'. Since you need to provide an error when setting the validity to that model, the error name will be your connection with valdr.
After that, you just only need to map the error in the 'valdrMessage' service:
.run(function (valdrMessage) {
valdrMessage.angularMessagesEnabled = true;
valdrMessage.addMessages({
'date': 'Invalid date!'
});
});
Valdr will show the message bellow the invalid field as usual.
Actually you can solve this through a custom validator, which can get another field and compare the values with each other. The code below is using the valdr-bean-validation for serverside generation of valodation.json.
If you want to use it without this, just look into the JS code and add the validator in your validation.json manually.
Java Annotation (serverside declaration of the valdr validator):
package validation;
#Documented
#Retention(RetentionPolicy.RUNTIME)
#Target({ ElementType.METHOD, ElementType.FIELD, ElementType.CONSTRUCTOR,
ElementType.PARAMETER, ElementType.ANNOTATION_TYPE })
public #interface DateFormat {
String message();
Class[] groups() default { };
String beforeFieldName();
}
Java Bean (usage of the annotation, this class has to be used in the generation of validation.json):
package pojo;
import validation.DateFormat;
public class RegistrationPojo implements BasePojo {
#NotNull(message = "message.date1.required")
private Date date1;
#NotNull(message = "message.date2.required")
#DateFormat(message = "message.date2.date", beforeFieldName = "date1")
private Date date2;
}
JS (implementation of the custom validator and registering it in valdr):
module.factory('validation.DateFormat', [
function () {
return {
name: 'validation.DateFormat',
validate: function (value, constraint) {
var minOk = true;
var maxOk = true;
var format = false; // constraint.pattern is mandatory
//do not validate for required here, if date is null, date will return true (valid)
console.log("my date validator called");
console.log(" beforeFieldName: " + constraint.beforeFieldName);
var field = document.querySelector('[name="' + constraint.beforeFieldName + '"]');
console.log("field value: " + (field ? field.value : "null"));
return (!field || value > field.value);
}
};
}]);
module.config([
"valdrProvider",
function(valdrProvider) {
valdrProvider.addValidator('validation.DateFormat');
}]);
You could go with this solution:
Have a bool value calculated upon changes in any of the date fields - a value indicating if the validation rule is met
Create a simple custom validator to check if that value is true or not
Register your validator and add a constraint for that calculated value
Place a hidden input for that calculated value anywhere you like your validation message to appear