CODEWITHSUNDEEP
javascriptcsshtml
Pedro
Pedro

Reputation: 1450

Validating a form

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. }

Upvotes: 0

Views: 70

Answers (4)

Frank Wisniewski
Frank Wisniewski

Reputation: 1224

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

Upvotes: 0

gaganshera
gaganshera

Reputation: 2639

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.

Upvotes: 1

Zeeshan S.
Zeeshan S.

Reputation: 2091

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')">

Upvotes: 1

Chris Ward
Chris Ward

Reputation: 1

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

Upvotes: 0

Related Questions