I have an issue where users are able to fill in a date field (Date of Birth) and the form with an input of 7/12/77 it does not show any error and lets the user save the form...but it does not save the date in the Sharepoint List. I need the form to give an error so that the user can not input a date this way they need to input it as 7/12/1977 for the date to save.
Hello @jktodd007,
You can make the date field required, so if user input invalid value, he will receive an error message.
To set the field required, go to List Setting >> Columns >> Date field >> Additional Column Settings
This is not a good solution to my issues the form allows for up to 6 Dates of Births and the user may fill any number so I can't make all 6 Dates required.
You can use custom validators, an example is below.
Please find more information in the Fields documentation.
fd.spRendered(function() {
fd.field('DateField').validators;
fd.field('DateField').validators.push({
name: 'MyCustomValidator',
error: '',
validate: function(value) {
if (fd.field('DateField').value == null && fd.field('Title').value == "Test") {
this.error = 'Please specify date';
return false;
}
return true;
}
});
});I saw this information however I don't understand how to get the DateField to validate on a specific format. Your examples are based on text fields
The condition in the custom validator checks if the date field is empty or not.
fd.field('DateField').value == null
If the date format does not match the SharePoint date pattern, the field will be treated as blank.
So if the user will input the date as 7/12/77, he will get the error message.
I was able to get this working now I also need to make a field require a certin length so I did below however this does not work
fd.spRendered(function() {
fd.field('Lastsix').validators;
fd.field('Lastsix').validators.push({
name: 'MyCustomValidator',
error: '',
validate: function(value) {
if (value.length >4) {
this.error = 'We need the last 6 digits';
return false;
}
return true;
}
});
});
To get the input value length, please use the below code.
fd.field('InternalFieldName').value.length
And the code to validate input length is
fd.spRendered(function() {
fd.field('Lastsix').validators;
fd.field('Lastsix').validators.push({
name: 'MyCustomValidator',
error: '',
validate: function(value) {
if (fd.field('Lastsix').value.length > 4) {
this.error = 'We need the last 6 digits';
return false;
}
return true;
}
});
});Hi. Here's my custom validator:
fd.validators.push({
name: 'Nogodate',
error: "Error text will change dynamically",
validate: function(value) {
if (!fd.field('Nogodate').value) {
this.error = "Enter dates using DD/MM/YYYY in " + fd.field('Nogodate').title;
return false;
}
return true;
}
I would like to fire this only when the control 'Nogodate' has a value in it. In other words, I would like to check for correct date format only if user has entered any information in the field. How can I achieve that?
Hello @Mamuka.Khantadze,
The thing is that if the value in the Date field is in the correct date format, it is treated as not blank.
If the value is not in the incorrect date format, it is treated as blank.
That means that with this validator you are already checking that the input is a valid date format.
Thanks @mnikitina, but what I have happening is that it treats blank date field as an error and won't allow me to save. Example:
I have two fields: Title and Date. None of them are mandatory and I could have user enter just title, just date or both.
When I insert this validation on it's own (i.e. not part of fd.spRendered or fd.spBeforeSave) it doesn't allow me to save just title (i.e. empty date) as it says date is incorrect format. How can I avoid this behavior? Maybe I have placed the validator in the wrong place?
I'm sorry for the slow reply.
Please try the following code, it will validate the Date field only if it was changed.
fd.spRendered(function(vue) {
var input = $(fd.field('Date').$el).find('input');
input.on("change paste keyup", function() {
if(fd.field('Date').value == null && fd.validators.length == 0) {
fd.field('Date').validators.push({
name: 'MyCustomValidator',
error: '',
validate: function(value) {
if (fd.field('Date').value == null) {
this.error = 'Please specify date';
return false;
}
return true;
}
});
}
});
});
@mnikitina thanks for the reply but unfortunately the code doesn't work as expected. I find it very strange that it is such a complicated process to ensure that user enters date correctly in the field. The code you provided does ensure that field is validated the first time, but it doesn't work when you edit the entry another time and enter wrong values.
Here's my test case:
Create a list with title and date fields in it.
- Create first entry with just the title in it (i.e. no date). Expected result - form saves;
- Create second entry with title and 'abcd' in the date. Expected result - form throws error complaining about the wrong date as 'abcd' isn't correct date format.
- in the second entry, correct the date format form 'abcd' to '11/11/2011'. Expected result - form saves;
- Edit second entry. Expected result - date is saved correctly and shows 11/11/2011.
- In the second entry, modify the correct date 11/11/2011 to 'abcd' and save. Expected result - form throws error complaining about the wrong date as 'abcd' isn't correct date format.
1 Like
That is the specific of the date field, and it is pretty tricky to manipulate.
Have you used the code only in New form?
In your scenario, this code should be used both in New and Edit Forms.
Please paste the same code in JavaScript editor in Edit Form, it should do the trick for you.
I am trying to set the date field to todays date i have this code seems not working
fd.field('date').value(new Date()); // the date field is is date and time field
i figured it out thank you
1 Like
HI Shanti,
Can you kindly share this code? I have the same issue on my form as well.
Hello @DryChips,
Do you need to add a date field validation? Try out this code:
fd.field("Date1").validators.push({
name:"Date validation",
error:'Enter a valid date',
validate: function(value){
if(!value){
return false;
}
return true
}
})
RE: Public Forms
Hi there, having issues with date format validation (date picker). It does throw up the error, but when corrected, it doesn't submit.I'm currently, working off a test form to see how it behaves.
Any assistance is appreciated.
Thank you.
Here is the code:
fd.rendered(function() {
// Set the date format to 'dd/MM/yyyy'
datePickerField.dateFormat = 'dd/MM/yyyy';
fd.field('DatePickerField').validators.push({
name: 'DatePickerValidator',
error: "Please use the date picker to select a date.",
validate: function() {
// Check if the value was manually entered (not selected from the date picker)
if (datePickerField.value && !datePickerField.control().isDateSelected())
{
return true;
}
return false;
}
});
})
Hello @Ameerah33,
If you want to set the format of the displayed date, use this code:
fd.field('DatePickerField').widgetOptions = {
format: 'dd/MM/yyyy'
}
Learn more in Date field description.
And to add validation to the date field use this code:
fd.field('DatePickerField').addValidator({
name: 'DatePickerValidator',
error: "Please use the date picker to select a date.",
validate: function(value) {
if (!value) {
return false;
}
return true;
}
});
Please see Manage fields article for more examples.