CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user6141031
user6141031

Reputation:

How to validate all fields at once?

I need to validate all fields at once, I mean if I entered text in the first field, the remaining fields should display an error message.

For example, if I press on submit button with empty fields, it should display an error message.

My Java script looks like this:

 function check() 
  var fName = document.getElementById('mFirstName');
  var lName = document.getElementById('mLastName');
  var filter = /^[a-zA-Z0-9]+$/;
  if (!filter.test(fName.value)) {
    document.getElementById("mfnameValidate").style.display = "block";
    fName.focus();
    return false;
}

if (!filter.test(lName.value)) {
    document.getElementById("mlNmaeValidate").style.display = "block";
    lName.focus();
    return false;
}
function hideError() {
document.getElementById("mfnameValidate").style.display = "none";
} 
function hideError2() {
document.getElementById("mlNmaeValidate").style.display = "none";
}

My HTML code :

<form:form method="post" onsubmit="return check();" action="SignUp"  modelAttribute="memberBean">
<form:input type="text" class="input" name='mFirstName' id='mFirstName' path='mFirstName' placeholder='First Name' onkeydown="hideError()" />
 <span id="mfnameValidate">"First Name should not be blank"</span>
 <form:input type="text" class="input" name='mLastName' id='mLastName' path='mLastName' placeholder='Last Name'  onkeydown="hideError2()" />
 <span id="mlNmaeValidate">"Last Name should not be blank"</span>

And my .css:

<style>
 span {
 color: red;
 display: none;
  }
  </style>

Upvotes: 1

Views: 1451

Answers (1)

Roy
Roy

Reputation: 1967

Try Like This:

document.forms["theForm"].onsubmit = function(e) {
  var allInput = getAllElementsWithAttribute('required');
  for (key in allInput) {
    if (!allInput[key].value) {
      e.preventDefault();
      allInput[key].className += allInput[key].className.indexOf('invalid') > -1 ? '' : 'invalid';
    } else {
      console.log(key)
      allInput[key].className = allInput[key].className.replace(/\binvalid\b/, '');
    }
  }
}

function getAllElementsWithAttribute(attribute) {
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++) {
    if (allElements[i].getAttribute(attribute) !== null) {
      // Element exists with attribute. Add to array.
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}
.error {
  display: none;
  color: Red;
}
.invalid+.error {
  display: block;
}
<form name="theForm" method="post" novalidate>
  <div>
    <label>First Name</label>
    <input type="text" required>
    <span class="error">First Name is required</span>
  </div>
  <div>
    <label>Last Name</label>
    <input type="text" required>
    <span class="error">Last Name is required</span>
  </div>
  <input type="submit" value="Submit" />
</form>

Also there is a fiddle: https://jsfiddle.net/rmrinmoy/xnLzjhgy/3/

Upvotes: 1

Related Questions