如何一次验证所有字段？

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:

我的Java脚本如下所示:

 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 :

我的HTML代码:

<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:

而我的.css:

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

2 个解决方案

#1

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/

还有一个小提琴:https://jsfiddle.net/rmrinmoy/xnLzjhgy/3/

#2

Please use the following link to use jquery validate . http://jqueryvalidation.org/files/demo/

请使用以下链接使用jquery验证。 http://jqueryvalidation.org/files/demo/

#1