0

I wanted to do some validation of inputs being given from the user, but I am not able to access the input values. onfoucs and onblur events I want to fetch the values from input field. I have used plain javascript by adding event listener to perform the validation of the value.

  <div class="main">
      <form action="#">
        <div class="columns">
          <div class="column is-size-4 is-one-fifth">
            <label for="name"> <span class="is-uppercase">Name</span></label>
          </div>
          <div class="column is-two-fifth"  data-validator="Name is required">
            <input class="is-size-5" type="text" name="first-name" placeholder="first name" id="fname" value="1">
          </div>
          <div class="column is-two-fifth">
            <input class="is-size-5" type="text" name="last-name" placeholder="last name" id="lname">
          </div>
        </div>
        <div class="columns">
          <div class="column is-size-4 is-one-fifth">
            <label for="email"> <span class="is-uppercase">Email</span></label>
          </div>
          <div class="column is-two-fifth">
            <input class="is-size-5" type="text" name="email" id="email" placeholder="Your email">
          </div>
          <div class="column is-two-fifth"></div>
        </div>
        <div class="columns">
          <div class="column">
            <button type="submit">Submit</button>
            <button type="reset">Reset</button>
          </div>
        </div>
      </form>
  </div>
<script>

    let inputEvent =() =>{
      let form = document.forms[0];
      let input1 = document.getElementById('fname');
      let input2 = document.getElementById('lname');
      input1.addEventListener('focusout', ()=>{
        // if (!input.value.contains("@")) {
        //   input.classList.add('invalid')
        // }
        let elem = form.elements.first-name;
        console.log(fname.value)
        alert("The entered value is ", fname.value)
      })

      // input1.addEventListener('focusin', ()=>{
      //   if(this.classList.contains('invalid')){
      //     this.classList.remove('invalid')
      //   }
      // })
    }
    inputEvent()
  </script>
Prashant Mani
  • 31
  • 7
  • the input field has the id `` – Prashant Mani Dec 23 '19 at 04:48
  • 1
    You're right. To check whether a string is included in another in JS, use `.includes`, not `.contains`. Arrow functions inherit their `this` from the outer scope, rather than taking a new one from function execution context, so either change your `() =>` to a `function`, or change the `this` inside it to refer to `input1` instead. Fix that (and the `input` variable name, should be `input1`), and your code works – CertainPerformance Dec 23 '19 at 04:53

0 Answers0