2
\$\begingroup\$

I am writing a custom form validation script compatible with IE8+. I just wanted to make sure I am not messing anything up. I have tested on IE8 its works. However, I want to make sure I am doing it the right way.

var wrapper = document.querySelector('.wrapper');
  var btn = document.querySelector('button');
  var inputs = document.querySelectorAll('input');
  // var required = document.querySelectorAll('input');
  var textarea = document.querySelector('textarea');
  // var ajaxRequest = new XMLHttpRequest();

  function validateForm(e) {
    var dataString = '';

    e.preventDefault ? e.preventDefault() : e.returnValue = false;

    for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].addEventListener) {
        inputs[i].addEventListener('blur', validateForm);
      } else if (inputs[i].attachEvent) {
        inputs[i].attachEvent('onblur', validateForm);
      }


      var value = inputs[i].value;
      if (value === '' || value === 'Required') {
        inputs[i].parentNode.setAttribute('class', 'error');
        // return false;
      } else {
        inputs[i].parentNode.setAttribute('class', 'success');

      }
    }



    if (textarea.value === '' || textarea.value === 'Required') {
      textarea.value = 'Required';
    }

    for (var i = 0; i < inputs.length; i++) {
      dataString += inputs[i].name + '=' + inputs[i].value + '&';
    }

    dataString += textarea.name + '=' + textarea.value;

    // ajaxRequest.open('GET', 'email.php?' + dataString, false);
    // ajaxRequest.send(null);

    // var response = ajaxRequest.responseText;

    // if (response === '') {
    // 	wrapper.innerHTML = '';
    // 	wrapper.innerHTML = '<h2>Comment received!</h2>';
    // }

  }

  if (btn.addEventListener) {
    btn.addEventListener('click', validateForm, false);
  } else if (btn.attachEvent) {
    btn.attachEvent('onclick', validateForm);
  }
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Form Validate</title>

  <style>
    p.error input {
      border: 2px solid red;
    }
    p.success input {
      border: 2px solid green;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <form id="form" method="get" action="test.php">
      <p>
        <label for="name">Name:</label>
        <input class="required" type="text" name="name">
      </p>
      <p>
        <label for="email">Email:</label>
        <input class="required" type="email" name="email">
      </p>
      <p>
        <label for="company">Company:</label>
        <input type="text" name="company">
      </p>
      <p>
        <label for="comments">Comments:</label>
        <textarea name="comments"></textarea>
      </p>
      <p>
        <button type="submit">Submit</button>
      </p>
    </form>
  </div>
</body>

</html>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.