Highlight serving size form field when it does not contain a value

[CharlesNepote]

When serving size form field does not contain a value (eg. 60 g) but only text (eg. null), it would be useful to highlight the field and add an interrogation mark associated with a tooltip -- as for other fields in the nutrition facts form.

Here is what I'm going to implement in Power User Script (in vanilla JS):

    // Check serving size field
    checkServingSize(document.getElementById("serving_size").value);
    document.getElementById("serving_size").addEventListener("input", function() {
        checkServingSize(this.value);
    });

    /***
     * checkServingSize: check if serving size contains a right value; otherwise, highlight the field
     *                   and add a interrogation mark associated with a tooltip.
     *
     * @param {string} servingSize: value of the servingSize
     * @returns: none
     */
    function checkServingSize(servingSize) {
        log("serving size val: " + servingSize);
        const servingSizeElement = document.getElementById("serving_size");
        if (servingSize.length == 0) {
            servingSizeElement.style.setProperty("background-color", "LightYellow", "important");
            document.getElementById("serving_size_help") != null ? document.getElementById("serving_size_help").remove() : false;
            return;
        }
        const regex = /\d+(\.\d+)? ?(kg|g|dg|cg|mg|mcg|l|dl|cl|ml|fl|oz)(\W+.*)?$/gi; // Examples matching: 60 g, 12 oz, 20cl, 2 fl oz
        if (regex.test(servingSize) === false) {
            log("serving size is not correct!");
            servingSizeElement.style.setProperty("background-color", "orange", "important");
            servingSizeElement.style.setProperty("display", "inline");
            if(document.getElementById("serving_size_help") == null) {
                const servingSizeHelp = '<strong id="serving_size_help" href="#serving_size_help" title="Serving size needs a value. Leave it empty otherwise."> (?) <br></strong>';
                servingSizeElement.insertAdjacentHTML("afterend", servingSizeHelp);
                document.getElementById("serving_size_help").style.setProperty("cursor", "pointer");
            }
        }
        else {
            servingSizeElement.style.setProperty("background-color", "LightYellow", "important");
            document.getElementById("serving_size_help") != null ? document.getElementById("serving_size_help").remove() : false;
        }
    }

[github-actions[bot]]

This issue has been open 90 days with no activity. Can you give it a little love by linking it to a parent issue, adding relevant labels and projets, creating a mockup if applicable, adding code pointers from https://github.com/openfoodfacts/openfoodfacts-server/blob/main/.github/labeler.yml, giving it a priority, editing the original issue to have a more comprehensive description… Thank you very much for your contribution to 🍊 Open Food Facts

[anaritadauane]

I will be working on this

[anaritadauane]

I will be working on this

@CharlesNepote and @stephanegigandet, can you please help replicate this step?

[stephanegigandet]

@CharlesNepote and @stephanegigandet, can you please help replicate this step?

You can edit a product, and type "something without a number" in the "serving size" field: you won't see anything special. When there is a value that is not empty but does not contain a number, we want to display a tooltip.

[anaritadauane]

@CharlesNepote and @stephanegigandet, can you please help replicate this step?

You can edit a product, and type "something without a number" in the "serving size" field: you won't see anything special. When there is a value that is not empty but does not contain a number, we want to display a tooltip.

Thank you @stephanegigandet

[deveshidwivedi]

Hi, @anaritadauane! Could you please confirm if you are working on this currently or not? Thanks:)

[anaritadauane]

Hi @deveshidwivedi , I'm not working on this issue :)