DatePicker Validation

[RealityMasque]

Hi,

I have a validation around a DatePicker, & a custom validation method that sets the error text. However, regardless of where the ValidationError is placed, whether or not the text is set by the method or a string in the markup, the error text does not display. Am I missing something?

Thanks,

Orion

[RealityMasque]

sample code

<FieldBody ColumnSize="ColumnSize.Is7">
    <Validation Validator="@ValidateDevPackagesNeededBy">
        <DatePicker TValue="DateTime?" Placeholder="YYYY-MM-DD" @bind-Date="@_record.Timings.DevPackagesNeededBy" ReadOnly="@(!CanEdit())">
            <Feedback>
                <ValidationError />
            </Feedback>
        </DatePicker>
    </Validation>
</FieldBody>

<FieldBody ColumnSize="ColumnSize.Is7">
    <Validation Validator="@ValidateDevPackagesNeededBy">
        <DatePicker TValue="DateTime?" Placeholder="YYYY-MM-DD" @bind-Date="@_record.Timings.DevPackagesNeededBy" ReadOnly="@(!CanEdit())" />
        <ValidationError />
    </Validation>
</FieldBody>

<FieldBody ColumnSize="ColumnSize.Is7">
    <Validation Validator="@ValidateDevPackagesNeededBy">
        <DatePicker TValue="DateTime?" Placeholder="YYYY-MM-DD" @bind-Date="@_record.Timings.DevPackagesNeededBy" ReadOnly="@(!CanEdit())" />
        <ValidationError>bad date</ValidationError>
    </Validation>
</FieldBody>

private void ValidateDevPackagesNeededBy(ValidatorEventArgs e)
{
    if (_record.Timings.DevPackagesNeededBy.HasValue)
    {
        if (_record.Timings.DevPackagesNeededBy < Utils.GetEasternTimeStampDate().AddDays(30))
        {
            e.Status = ValidationStatus.Error;
            e.ErrorText = "The date must be at least 30 days in the future";
        }
        else
        {
            e.Status = ValidationStatus.Success;
        }
    }
    else
    {
        e.Status = ValidationStatus.Error;
        e.ErrorText = "Please select a date when DEV key packages are required";
    }
}

[David-Moreira]

The ValidationError should be placed within the Feedback as seen on the docs.

https://blazorise.com/docs/components/validation

The first example you have sent seems correct. Is it not working?
@stsrki Do you see anything wrong with it?

[stsrki]

You should validate for the Value inside of ValidatorEventArgs e argument. That way you will be able to properly handle the current value.

As David mentioned, ValidationError should be placed within the Feedback. All other cases are not guaranteed to work properly.

[RealityMasque]

why would it matter what variable is being validated?

[RealityMasque]

full test code

<Validations @ref="validations" Mode="ValidationMode.Manual">
    <Field Horizontal=true>
        <FieldLabel ColumnSize="ColumnSize.Is5">
            <strong>
                The Date
            </strong>
        </FieldLabel>
        <FieldBody ColumnSize="ColumnSize.Is7">
            <Validation Validator="@ValidateTheDate">
                <DatePicker TValue="DateTime?" Placeholder="YYYY-MM-DD" @bind-Date="@theDate">
                    <Feedback>
                        <ValidationError />
                    </Feedback>
                </DatePicker>
            </Validation>
        </FieldBody>
    </Field>
</Validations>
<Button Color="Color.Secondary" Clicked="@(()=>ValidateTheDate())">Validate</Button>

@code {
    private Validations? validations = new();

    private DateTime? theDate = null;

    private void ValidateTheDate(ValidatorEventArgs e)
    {
        if (theDate.HasValue)
        {
            if (theDate < GetEasternTimeStampDate().AddDays(30))
            {
                e.Status = ValidationStatus.Error;
                e.ErrorText = "The date must be at least 30 days in the future";
            }
            else
            {
                e.Status = ValidationStatus.Success;
            }
        }
        else
        {
            e.Status = ValidationStatus.Error;
            e.ErrorText = "Please select a date when DEV key packages are required";
        }
    }

    private static DateTime GetEasternTimeStampDate()
    {
        return TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, Eastern_Standard_Time);
    }

    private static TimeZoneInfo Eastern_Standard_Time = TimeZoneInfo.FindSystemTimeZoneById("Eastern Standard Time");

    private async Task ValidateTheDate()
    {
        await validations.ValidateAll();
    }
}

[RealityMasque]

I just tried, as @stsrki indicated, validating for the Value inside of ValidatorEventArgs e argument, but the error text still isn't showing. Here's that code:

<Validations @ref="validations" Mode="ValidationMode.Manual">
    <Field Horizontal=true>
        <FieldLabel ColumnSize="ColumnSize.Is5">
            <strong>
                The Date
            </strong>
        </FieldLabel>
        <FieldBody ColumnSize="ColumnSize.Is7">
            <Validation Validator="@ValidateTheDate">
                <DatePicker TValue="DateTime?" Placeholder="YYYY-MM-DD" @bind-Date="@theDate">
                    <Feedback>
                        <ValidationError />
                    </Feedback>
                </DatePicker>
            </Validation>
        </FieldBody>
    </Field>
</Validations>
<Button Color="Color.Secondary" Clicked="@(()=>ValidateTheDate())">Validate</Button>

@code {
    private Validations? validations = new();

    private DateTime? theDate = null;

    private void ValidateTheDate(ValidatorEventArgs e)
    {
        DateTime? value = e.Value as DateTime?;

        if (value.HasValue)
        {
            if (value < GetEasternTimeStampDate().AddDays(30))
            {
                e.Status = ValidationStatus.Error;
                e.ErrorText = "The date must be at least 30 days in the future";
            }
            else
            {
                e.Status = ValidationStatus.Success;
            }
        }
        else
        {
            e.Status = ValidationStatus.Error;
            e.ErrorText = "Please select a date when DEV key packages are required";
        }
    }

    private static DateTime GetEasternTimeStampDate()
    {
        return TimeZoneInfo.ConvertTimeFromUtc(DateTime.UtcNow, Eastern_Standard_Time);
    }

    private static TimeZoneInfo Eastern_Standard_Time = TimeZoneInfo.FindSystemTimeZoneById("Eastern Standard Time");

    private async Task ValidateTheDate()
    {
        await validations.ValidateAll();
    }
}

[RealityMasque]

do the above 2 examples work on your machines?

[David-Moreira]

@stsrki

[stsrki]

The problem seems to be with how the date calendar is created. The error message is expected to be under the input element, and in this case, the input is wrapped with a container div, making the CSS selectors that show the error broken.

As a workaround, you can disable this behavior by setting the StaticPicker.

<DatePicker TValue="DateTime?" Placeholder="YYYY-MM-DD" @bind-Date="@theDate" StaticPicker="false">

---

We will need to fix this behavior in one of the next releases.

[RealityMasque]

that worked! Thanks @stsrki !