Entering data in Safari results in "Bad Request" message

[dboyer]

Using Browserstack, I tried to complete a monthly survey form in the most recent version of Safari on Mac. This is reproducing a bug reported by a user.

1. Add an apiary
2. Set the number of colonies to 10
3. Fill out the colony name and date of inspection for the three colonies
4. Check the checkbox
5. Hit submit
6. Receive a "bad request" message at the top of the screen

I'm not sure if this is related to the user listing 10 colonies or a general problem with Safari.

[fungjj92]

A quick investigation on staging.

On Safari, the date input does not offer the date picker, as in other browsers (at least Chrome and FF). The date must be in format YYYY-MM-DD for the request to succeed with a 200. Other formats fail, as in this bug report, with a 400.

{
    "monthlies": [
        {
            "inspection_date": [
                "Date has wrong format. Use one of these formats instead: YYYY[-MM[-DD]]."
            ]
        },
        {
            "inspection_date": [
                "Date has wrong format. Use one of these formats instead: YYYY[-MM[-DD]]."
            ]
        },
        {
            "inspection_date": [
                "Date has wrong format. Use one of these formats instead: YYYY[-MM[-DD]]."
            ]
        }
    ]
}

[fungjj92]

Either we remove date validation and accept whatever input, or we implement a cross-browser date picker. Probably, the former.

[rajadain]

Can we add YYYY-MM-DD to the date picker's label / placeholder? That may be the cheapest thing to do.

[fungjj92]

That's cheap, and may work. If they don't adhere to that perhaps accidentally and get an error, they'll be as confused.

[rajadain]

We may not be able to remove the validation without also changing the type of that field, which is currently date:

https://github.com/project-icp/bee-pollinator-app/blob/004e5bc83af089d9886ae4f6fa8d25ef8c8faf55/src/icp/apps/beekeepers/models.py#L265-L267

While the date input is not supported by Safari or IE https://caniuse.com/#feat=input-datetime, input pattern validation is https://caniuse.com/#feat=input-pattern. We could probably use a regex for the format we require as an attribute on that field https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression, and it should be picked up by the current validation system automatically.

[fungjj92]

Nice I didn't know about pattern matching for HTML form fields as well as a placeholder. Let's go with that! That way we get help text before the field is filled out, and a helpful field validation error upon a bad submit. Plus, quick 👍