一度にすべてのフィールドを検証する方法は？

Question

すべてのフィールドを一度に検証する必要があります。つまり、最初のフィールドにテキストを入力すると、残りのフィールドにエラーメッセージが表示されます。

たとえば、空のフィールドを含む送信ボタンを押すと、エラーメッセージが表示されます。

私の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"; 
} 

私の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> 

そして、私の.css：

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

Answer 1

次のように試してみてください。

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>

また、フィドルがあります：入力フィールドに `必要= "必須"`属性を追加することhttps://jsfiddle.net/rmrinmoy/xnLzjhgy/3/

Answer 2

jqueryの検証を使用するには、次のリンクをご利用ください。 http://jqueryvalidation.org/files/demo/