CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Inserting text with javascript at the right location  (Read 55 times)

AndrewTraub

  • Junior Member
  • *
  • Posts: 6
  • Karma: +0/-0
Inserting text with javascript at the right location
« on: 4 Jun 2021, 01:16:59 pm »
If my code looks like this:
Code: [Select]
<label>
             Address<br>
            <input name="address" id="address" value="" type="text">
          </label>
<label>
           Address 2<br>
            <span class="muted">(Optional)</span><br>
            <input name="address2" id="address2" value="" type="text">
</label>

What is the best way to insert error text right before the input element?
Right now I'm creating a span, adding the class, setting the innerHTML, getting a reference to the input element, getting it's parents, and then looking for the label and then appending the element (which unfortunately puts the message below the input element).  Here's my code:

   
Code: [Select]
const getParents = e => {
        let result = [];
        for (let p = e && e.parentElement; p; p = p.parentElement) {
            if(p.nodeName === "FORM") break;    //no need to iterate above the form level
            result.push(p);
        }
        return result;
    }

    const showInlineError = (error) => {
        const msg = document.createElement("span");
        msg.classList.add("field-error");
        msg.innerHTML = '<svg width="1.3em" height="1.3em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#error-icon"></use></svg>' + escapeHtml(error.message);
        const o = document.getElementById(error.fieldName);
        const i = getParents(o); //returns array of parent elements
        let n, l = null;
        i.forEach(node => {
            if(node.nodeName === "LABEL") n = node;
            if(node.nodeName === "LEGEND") l = node;
        });
        !!l ? l.append(msg) : n.append(msg);
    }

AndrewTraub

  • Junior Member
  • *
  • Posts: 6
  • Karma: +0/-0
Re: Inserting text with javascript at the right location
« Reply #1 on: 4 Jun 2021, 05:46:38 pm »
I got this fixed with the following:

Code: [Select]
    const showInlineError = (error) => {
        const msg = document.createElement("span");
        msg.classList.add("field-error");
        msg.innerHTML = '<svg width="1.3em" height="1.3em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#error-icon"></use></svg>' + escapeHtml(error.message);
        const o = document.getElementById(error.fieldName);
        const br = o.previousElementSibling;
        br.parentNode.insertBefore(msg, br.nextSibling); //equivalent to insert after
    }

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 714
  • Karma: +132/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Inserting text with javascript at the right location
« Reply #2 on: 6 Jun 2021, 03:40:37 am »
Is this even something you need JavaScript for? What checks are you doing for valid/invalid? Remember in most cases this isn't JavaScript's job anymore.

This also REALLY isn't a situation where I'd be using SVG or innerHTML. IF this is something you need JS to do, a simple class swap with generated content might be more efficient.
I'll fix every flaw, I'll break every law, I'll tear up the rulebook if that's what it takes. You will see, I will crush this cold machine.

 

SMF spam blocked by CleanTalk

Advertisement