IMが簡単なフォームで作業していて、フィールドを検証しようとしています 以下のコードでフィールドを検証し、フィールドが空の場合はメッセージを追加できました。 }フォームを検証する
答えて
すると、次のようにあなたのjavascriptのコードを変更します。
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')">
は、私がその入力のラベルを取得する機能findLable
を追加した、とすることを利用しましたが、それにエラーのクラスを追加しましたラベル。
'findLable'を定義しましたが、' findLableForControl'と呼ばれています。定義された/呼び出されたメソッドの名前を修正してください。 –
申し訳ありませんが、上記の両方のエラーを修正しました。それらを指摘してくれてありがとう:) – gaganshera
スパンはクラス "エラー"として定義されていますが、そのクラスは定義されていません。
まずあなたがラベルのページをスキャンする必要があります。
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];
}
}
その後、あなたは、単に、あなたのIF-ELSE条件に
document.getElementById(id).label.classList.add('red-text');
と
document.getElementById(id).label.classList.remove('red-text');
を以下のように使用することができます私はまた、テキストが赤色になるようにCSSクラスが追加されました。
.red-text {
color: #ff0000;
}
決勝コード:
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')">
私はぼやけて入力イベント
コードと結合した方がよいと思う:
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";
}
});
を10
- 1. AngularJSフォームを検証する
- 2. 検出フォーム検証
- 3. フォームの検証?
- 4. フォーム検証
- 5. Xamarinフォーム検証。
- 6. VueJSフォーム検証
- 7. FOSRest検証フォーム
- 8. スプリングブート検証フォーム
- 9. フォーム検証n
- 10. フォーム検証アラート
- 11. angularjsフォーム検証?
- 12. フォーム検証プラグイン?
- 13. フォーム検証
- 14. フォームの検証
- 15. カスケード検証フォーム
- 16. フォーム検証(PHP)
- 17. ページのフォームを検証せずにユーザーコントロールフォームを検証する
- 18. 検証式を使ってjavascriptでフォームを検証する
- 19. DataSetの検証とASP.NETフォームの検証
- 20. Jquery検証でフォーム配列の検証
- 21. html自動検証後にjavascriptでhtmlフォームを検証する
- 22. rich:togglePanelのフォーム検証
- 23. Javascriptフォームの検証
- 24. PHPフォームISSET検証
- 25. モバイルでフォーム検証
- 26. Laravelフォームの検証
- 27. Jqueryフォームの検証
- 28. express.jsのフォーム検証
- 29. フォーム検証バニラJS
- 30. laravelのフォーム検証
[HTMLのid属性の有効な値は何ですか?](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute -in-html) – Pedro