convert JQuery code to Pure Javascript

Question

I'm trying to rewrite the following JQuery to Pure Javascript.

I don't know why the code isn't working, but it isn't working. I'm guessing I'm doing wrong with the use of "focusing". Would anybody help me please?

JQuery(working)

$('.form-group input').on('focus blur', function (e) {
  $(this).parents('.form-group').toggleClass('active', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');

This is what I have so far(not working).

const inputs = document.querySelectorAll(".form-group input")
Array.from(inputs).forEach(input => {
  input.addEventListener("focusin", (e) => {
    const t = e.target as HTMLInputElement
    let formgroup = t.parentElement
    if(t.value.length > 0 ){
      formgroup.classList.toggle("onblur")
    }
  })
})

Here is the html tag.

    <form action="#" id="login-form">
        <div class="form-group">
          <label class="label-control">
            <span class="label-text">Email</span>
          </label>
          <input type="email" name="email" class="form-control" />
        </div>
        <div class="form-group">
          <label class="label-control">
            <span class="label-text">Password</span>
          </label> 
          <input type="password" name="password" class="form-control" />
        </div>
        <input type="submit" value="Login" class="btn" />
    </form>

Hi, I don't get any error from the dev tool console. So it probably running but I'm misunderstanding some point. — Mr.Valentine
– Mr.Valentine, Commented Jun 11, 2017 at 1:45

Gabriele Petrioli · Accepted Answer · 2017-06-11 02:05:04Z

2

A couple of issues in regards to the jQuery code.

The class is named active and you are using onblur. The jquery code runs on both focus and blur.

const inputs = document.querySelectorAll(".form-group input");
const focusBlurHandler = (e) => {
    const t = e.target;
    let formgroup = t.parentElement;
    if(t.value.length > 0 ){
      formgroup.classList.toggle("active");
    }
};

Array.from(inputs).forEach(input => {
  input.addEventListener("focusin", focusBlurHandler);
  input.addEventListener("focusout", focusBlurHandler);
});

.active{background:lightgreen}

<form action="#" id="login-form">
        <div class="form-group">
          <label class="label-control">
            <span class="label-text">Email</span>
          </label>
          <input type="email" name="email" class="form-control" />
        </div>
        <div class="form-group">
          <label class="label-control">
            <span class="label-text">Password</span>
          </label> 
          <input type="password" name="password" class="form-control" />
        </div>
        <input type="submit" value="Login" class="btn" />
    </form>

answered Jun 11, 2017 at 2:05

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr.Valentine Over a year ago

Thank you very much, you made my day. I edited my code based on the suggestion and it working great now. Thank you!

Collectives™ on Stack Overflow

convert JQuery code to Pure Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related