4

I would like to check if a given string could be a valid HTML attribute. If this isn't the case, I will add that string with a prefix of data- to the element. How would I go about this?

For example when the user wants to add a attribute, it passes it to the $attributes array like this:

    $attr = '';
    foreach ( $attributes as $key => $value ) {
        if (is_attr($key)) {
            $attr .= $key . '="' . $value . '" ';
        } else {
            $attr .= 'data-' . $key . '="' . $value . '" ';
        }
    }

So this will finally be added to a form element like an input or textarea or something like that.

... how would the implementation of is_attr($key) look like?

Update: I was hoping I could create the attribute with the DomDocument() class and then validate it to see if the attribute is officially supported. No luck so far.

Floris
  • 2,727
  • 2
  • 27
  • 47
  • You can take a look at [this answer](https://stackoverflow.com/a/926136/7393478) (there's a nice regex in the comments too), also at [this MDN list](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes), but note that le list might change with new specifications. Note also that you can set any attribute to an element if characters are valid, even if not used natively as a tag parameter, the attribute will be there. – Kaddath Apr 30 '19 at 07:35
  • "how would the implementation of is_attr($key) look like?" — It would need to take more than one attribute for a start. HTML rules include things like "An input element may have a `multiple` attribute but only if it has `type="file"`. HTML validation is *complicated* … too complicated to write a complete solution to in a stackoverflow answer. (Voting to close as too broad). – Quentin Apr 30 '19 at 08:35

1 Answers1

1

Here is is_attr function to check valid attributes of input or textarea.

function is_attr($attr, $elementType)
{
    $input       = ["autocomplete", "autofocus", "disabled", "list", "name", "readonly", "required", "tabindex", "type", "value"];
    $globalAttrs = ["accesskey", "class", "contenteditable", "contextmenu", "dir", "draggable", "dropzone", "id", "lang", "style", "tabindex", "title", "inputmode", "is", "itemid", "itemprop", "itemref", "itemscope", "itemtype", "lang", "slot", "spellcheck", "translate"];
    $select      = ["autofocus", "disabled", "form", "multiple", "name", "required", "size"];
    $textarea    = ["autocapitalize", "autocomplete", "autofocus", "cols", "disabled", "form", "maxlength", "minlength", "name", "placeholder", "readonly", "required", "rows", "spellcheck", "wrap"];
    return (in_array($attr, $globalAttrs) || in_array($attr, $$elementType));
}
echo is_attr('accesskey','select');

I have taken all the valid attributes from official html doc.

Rahul
  • 18,271
  • 7
  • 41
  • 60
  • 3
    Not all of those are valid on input _and_ textarea … – 04FS Apr 30 '19 at 07:52
  • "I have taken all the valid attributes from official html doc." — the document you link to is not remotely "official" – Quentin Apr 30 '19 at 08:28
  • 1
    You missed out `data-*`, and `id`, `class` (probably some other stuff too, but they jumped out at me). – Quentin Apr 30 '19 at 08:30
  • re edit: `data-*` is still missing, the document you link to still isn't an official one, and you missed out a bunch of attributes which are conditionally allowed on an input element. – Quentin Apr 30 '19 at 09:13
  • Hello @Quentin sir, I saw that in documentation, but that's special case of OP. He wants to replace attributes which are not valid with `data-`, that's why, I didn't included that in my arrays. I hope you get my concern. – Rahul Apr 30 '19 at 09:55
  • `data-foo` is valid so it shouldn't be replaced by `data-data-foo` – Quentin Apr 30 '19 at 09:57
  • OP has only one way to identify validness of attribute which is `data-`. @Quentin Sir, can you brighten up this dead struck situation to solve OP’s problem? – Rahul Apr 30 '19 at 10:16
  • As I pointed out in my comment on the question, this is a complicated problem and not one I think is suitable for SO, so I'm not going to invest the time needed to research and implement a proper solution for it. (And nor am I going to answer small chunks of the question). – Quentin Apr 30 '19 at 10:18
  • Ok @Quentin Sir, I may consider my answer as half valid, may help OP to get rid of problems as such complex. – Rahul Apr 30 '19 at 10:20