Q&A
お世話になります。
現在、javascript学習中のエンジニアです。
タイトルのつけ方がかなり難しかったのですが、下記のような動きをするコードを書きたいです。
実装の方法がイメージできず、有識者の方々にお聞きしたいです<(_ _)>
やりたいこと
確認ボタンが押された際にチェック処理が発火し、
同姓同名の名前がフォームに入力されていたら、
重複する「姓」「名」の行を赤字にする。
〇 完成のイメージ
× 現状のイメージ
できなかったこと
同姓同名の行"だけ"を赤字にするのがとてもむずかしいです...。
下記のソースコードをみていただくとわかるのですが、
input[text]タグを取得し、総当たりでチェックすることで、
「重複があれば全てのフォームを赤字」にすることはできました。
「× 現状のイメージ」の例でいうと、
同姓同名は「佐藤太郎」だけですので、一行目と三行目を赤くしたいのですが、
二行目の「佐藤」も赤くなってしまいます...。
これをなんとか改善したいのですが、正直、どうすれよいのかさっぱりです。。
ソースコード
https://jsfiddle.net/Lwajozn9/8/
→ ここから飛べます
↑ このURLのページに飛ぶと、下記の画像のように、実際に動かしたり修正したりできます。
ソースコード原文
<!DOCTYPE html> <html> <head> </head> <body> <form> <div id="row1"> 姓 : <input type="text" value="佐藤"> 名 : <input type="text" value="太郎"> 削除 : <input type="checkbox"> </div> <div id="row2"> 姓 : <input type="text" value="佐藤"> 名 : <input type="text" value="花子"> 削除 : <input type="checkbox"> </div> <div id="row3"> 姓 : <input type="text" value="佐藤"> 名 : <input type="text" value="太郎"> 削除 : <input type="checkbox"> </div> <div id="row4"> 姓 : <input type="text" value="安藤"> 名 : <input type="text" value="良子"> 削除 : <input type="checkbox"> </div> <button type="submit">確認</button> </form> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <script> $('form').submit(function() { $('input[type=text]').each(function(i) { var str = $(this).val(); var chk = 0; $('input[type=text]').each(function(j) { var str2 = $(this).val(); if ((str2 == str) && (i != j)) { chk = 1; } }); if(chk != 0) { $(this).css("color", "#F00"); } }); return false; }); </script> </body> </html>
以上、どうかご教授を何卒よろしくお願いいたします。
回答5件
0
javascript
1<!DOCTYPE html> 2<title>?</title> 3<meta charset="utf-8"> 4<style> 5 6</style> 7 8<body> 9<body> 10 <form> 11 <div id="row1"> 12 姓 : <input type="text" value="佐藤"> 13 名 : <input type="text" value="太郎"> 14 削除 : <input type="checkbox"> 15 </div> 16 <div id="row2"> 17 姓 : <input type="text" value="佐藤"> 18 名 : <input type="text" value="花子"> 19 削除 : <input type="checkbox"> 20 </div> 21 <div id="row3"> 22 姓 : <input type="text" value="佐藤"> 23 名 : <input type="text" value="太郎"> 24 削除 : <input type="checkbox"> 25 </div> 26 <div id="row4"> 27 姓 : <input type="text" value="安藤"> 28 名 : <input type="text" value="良子"> 29 削除 : <input type="checkbox"> 30 </div> 31 <div id="row5"> 32 姓 : <input type="text" value="加賀"> 33 名 : <input type="text" value="美紀子"> 34 削除 : <input type="checkbox"> 35 </div> 36 <div id="row6"> 37 姓 : <input type="text" value="加賀美"> 38 名 : <input type="text" value="紀子"> 39 削除 : <input type="checkbox"> 40 </div> 41 <button type="submit">確認</button> 42 </form> 43 44 45<script> 46 47class A { 48 constructor (d) { 49 this.input = [...d.querySelectorAll ('input[type="text"]')]; 50 this.name = this.input.map (e => e.value).join (' '); 51 } 52 53 setColor (c = 'red') { 54 this.input.forEach (e => e.style.color = c); 55 } 56} 57 58const check = (es) => 59 [...es.reduce ((a, b, c) => 60 (a.has (c = b.name) ? a.get (c).push (b): a.set (c, [b]), a) 61 , new Map).values () 62 ].reduce ((a,b)=> 1 < b.length ? [...a,...b]: a, []); 63 64//__________ 65 66let 67 q = 'form div[id^=row]', 68 rows = [...document.querySelectorAll (q)].map (e => new A(e)), 69 rst; 70 71if (rst = check (rows)) 72 rst.forEach (e => e.setColor ()); 73 74 75</script> 76 77
投稿2019/02/02 12:42
退会済みユーザー
総合スコア0
0
ベストアンサー
きれいなコードにならなかった。
CSS
1.error input { 2 color: red; 3}
JavaScript
1$( 'form' ).submit( function() { 2 $( '.error' ).removeClass( 'error' ); 3 var list = {} 4 $( '[id^="row"]' ).each( function() { // 行ごとに氏名を処理して、それをオブジェクトに保存 5 var res = ''; 6 $( 'input', this ).each( function() { 7 res += $( this ).val(); 8 } ); 9 if ( !list[ res ] ) list[ res ] = []; 10 list[ res ].push( $( this ).attr( 'id' ) ); // 同姓同名なら2件以上になる 11 } ); 12 Object.values( list ).filter( v=> v.length > 1 ).forEach( e=> e.forEach( id=> { 13 $( '#' + id ).addClass( 'error' ); // 行単位でクラスを付与する 14 } ) ); 15 return false; 16} ); 17```**動くサンプル：**[https://jsfiddle.net/p45dqs9f/1/](https://jsfiddle.net/p45dqs9f/1/) 18 19--- 20 21【Object.values() - JavaScript | MDN】 22[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values)
投稿2019/02/02 06:11
総合スコア69407
0
js
1$('form').submit(function() { 2 var targetList = $('div',this); 3 var targetNameList = $.map(targetList, function(x){return $('input:eq(0)',x).val()+$('input:eq(1)',x).val()}); 4 5 $( $.grep(targetList, function(x){ 6 var targetName = $('input:eq(0)',x).val()+$('input:eq(1)',x).val(); 7 return targetNameList.indexOf(targetName) != targetNameList.lastIndexOf(targetName); 8 }) ).each(function(){ 9 $('input',this).css("color", "#F00"); 10 }); 11 12 return false; 13});
投稿2019/02/02 05:54
総合スコア36087
0
jQuery
1 var names = $('div[id^="row"]').map(function(index, element) { 2 return { name: $(element).find('input[type="text"]').map(function() { return this.value; }).get(), elm: element }; 3 }).get(); 4 5 for (var i = 0; i < names.length - 1; i++) { 6 var filter = names.filter(function(a) { return a.name[0] === names[i].name[0] && a.name[1] === names[i].name[1]; }); 7 if (filter.length > 1) { 8 filter.forEach(function(a) { return $(a.elm).addClass('error'); }); 9 } 10 }
投稿2019/02/05 06:12
総合スコア13749
0
やる気が無いときの実装方法、検証用結合フォームを用意してそれでチェックを行う。
html
1<form> 2 <div id="row1"> 3 姓 : <input name="fname" type="text" value="佐藤"> 4 名 : <input name="lname" type="text" value="太郎"> 5 削除 : <input type="checkbox"> 6 <input name="cname" type="hidden" value="佐藤 太郎"> 7 </div> 8 <div id="row2"> 9 姓 : <input name="fname" type="text" value="佐藤"> 10 名 : <input name="lname" type="text" value="花子"> 11 削除 : <input type="checkbox"> 12 <input name="cname" type="hidden" value="佐藤 花子"> 13 </div> 14 <div id="row3"> 15 姓 : <input name="fname" type="text" value="佐藤"> 16 名 : <input name="lname" type="text" value="太郎"> 17 削除 : <input type="checkbox"> 18 <input name="cname" type="hidden" value="佐藤 太郎"> 19 </div> 20 <div id="row4"> 21 姓 : <input name="fname" type="text" value="安藤"> 22 名 : <input name="lname" type="text" value="良子"> 23 削除 : <input type="checkbox"> 24 <input name="cname" type="hidden" value="安藤 良子"> 25 </div> 26 <button type="button" id="submit">確認</button> 27</form>
js
1function check() { 2 var error = false; 3 $("form [name=cname]").each(function(i,e){ 4 var value = $(this).val(); 5 var size = $("form [name=cname][value="+value+"]").length; 6 if (size > 1) { 7 $(this).parent().find("[name=fname]").css("color", "#F00"); 8 $(this).parent().find("[name=lname]").css("color", "#F00"); 9 error = true; 10 } else { 11 $(this).parent().find("[name=fname]").css("color", "#000"); 12 $(this).parent().find("[name=lname]").css("color", "#000"); 13 } 14 }); 15 return error; 16} 17$(function(){ 18 $(document).on("change", "[type=text]", function(){ 19 var parent = $(this).parent(); // tr 20 var fname = parent.find("[name=fname]").val(); 21 var lname = parent.find("[name=lname]").val(); 22 parent.find("[name=cname]").val(fname + " " + lname); 23 }); 24 $(document).on("change", "[type=text]", check); 25 $(document).on("click", "#submit", check); 26 27});
投稿2019/02/02 07:14
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。