Validating a form

Question

IM working on a simple form, and Im trying to validate the fields, with below code I able to validate the field and add a message if the field is empty. }

Possible duplicate of [What are valid values for the id attribute in HTML?](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) — Pedro, May 07 '17 at 08:41

gaganshera · Answer 1 · 2017-05-07T08:36:00.943

Change your javascript code to following:

function validation(id) {
  var value = document.getElementById(id).value;
  if (value === "" || value == null) {
    document.getElementById('Err' + id).innerHTML = "- Field Required";
    document.getElementById(id).classList.add('class');
    var label = findLabel(document.getElementById('Name'));
    label.classList.add('class');
  } else {
    document.getElementById('Err' + id).innerHTML = "";
    document.getElementById(id).classList.remove('class');
    var label = findLabel(document.getElementById('Name'));
    label.classList.remove('class');
  }
}

function findLabel(el) {
  var idVal = el.id;
  labels = document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor == idVal)
      return labels[i];
  }
}

.class
{
    background: #f97d7d;
    color: #ff0000;
    border: 1px solid #ff0000 !important;
}

<label class="" for="Name">* Name <span class="error" id="ErrName"></span></label>
<input type="text" name="Name" id="Name" onblur="validation('Name')">

I've added a function findLable to get the label for that input, and using that, added error class to that label.

You have defined `findLable` but called `findLableForControl`. Please correct the name of the method defined/called. — Zeeshan S., May 07 '17 at 08:34
Sorry about that, corrected both the above errors. Thanks for pointing them out :) — gaganshera, May 07 '17 at 08:36

score 1 · Answer 2 · answered May 07 '17 at 08:31

First you need to scan the page for labels:

  var labels = document.getElementsByTagName('LABEL');
  for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
      var elem = document.getElementById(labels[i].htmlFor);
      if (elem)
        elem.label = labels[i];
    }
  }

Then you can simply use following in your IF-ELSE condition,

document.getElementById(id).label.classList.add('red-text');

and

document.getElementById(id).label.classList.remove('red-text');

I also added CSS class for the text to be red.

.red-text {
  color: #ff0000;
}

Final code:

function validation(id) {
  var labels = document.getElementsByTagName('LABEL');
  for (var i = 0; i < labels.length; i++) {
    if (labels[i].htmlFor != '') {
      var elem = document.getElementById(labels[i].htmlFor);
      if (elem)
        elem.label = labels[i];
    }
  }
  var value = document.getElementById(id).value;
  if (value === "" || value == null) {
    document.getElementById('Err' + id).innerHTML = "- Field Required";
    document.getElementById(id).classList.add('class');
    document.getElementById(id).label.classList.add('red-text');
  } else {
    document.getElementById('Err' + id).innerHTML = "";
    document.getElementById(id).classList.remove('class');
    document.getElementById(id).label.classList.remove('red-text');
  }
}

.class {
  background: #f97d7d;
  color: #ff0000;
  border: 1px solid #ff0000 !important;
}

.red-text {
  color: #ff0000;
}

<label for="Name">* Name <span class="error" id="ErrName"></span></label>
<input type="text" name="Name" id="Name" onblur="validation('Name')">

score 0 · Answer 3 · answered May 07 '17 at 08:29

0

The span is defined as class "error" but you haven't defined that class.

answered May 07 '17 at 08:29

Chris Ward

1
2

score 0 · Answer 4 · answered May 07 '17 at 08:56

I think it is better to bind blur and input events

the code:

Name.addEventListener('blur', function(){
  if (!Name.value){
    ErrName.innerHTML="Field Required";
    this.classList.add('class');
    ErrName.parentNode.style.color="red";
  }
});

Name.addEventListener('input',function(){
  if (Name.value.length && ErrName.innerHTML=="Field Required" ){
    ErrName.innerHTML="";
    this.classList.remove('class');
    ErrName.parentNode.style.color="black";
  }
});

a liddle fiddle

Validating a form

4 Answers4