textareaの入力データをvalidationする前にtrimするためjsを修正したい

Question

修正するページに関してタブによってその趣旨に沿ったtextareaが計4つあり投稿出来るようになっています。
このtextareaはjspで部品化しており同ページからincludeで呼び出しています。
また、このtextareaはバリデーションにて○○文字以上入力する制限になっています。
そしてこのバリデーションはtextareaのフォーカスが外れた時(input.blur)○○文字以上入力していないとtextareaの下にエラーメッセージが出るよう動いています。
要件はtextareaの入力データをバリデーションが掛かる前に「jQuery.trim()」し前後の空白文字を取る事です。

jsファイルにて画面ロード時にsetupなるメソッドがありその中でフォーカスが外れる度バリデーションが掛かるよう設定している箇所がある事分かりました。

function setup(input, ○, ×) {
～～～～～～～～～～～～～
～～～～～～～～～～～～～
input.blur(validate);
～～～～～～～～～～～～～
～～～～～～～～～～～～～
～～～～～～～～～～～～～
～～～～～～～～～～～～～
}

修正として上記「input.blur(validate);」の一つ上に同じくblurを使いtrimメソッドを作成しました。

function textTrim(){
params = $('textarea').val();
params = jQuery.trim(params);
$('textarea').val(params);
}

function setup(input, ○, ×) {
～～～～～～～～～～～～～
～～～～～～～～～～～～～
input.blur(textTrim);
input.blur(validate);
～～～～～～～～～～～～～
～～～～～～～～～～～～～
～～～～～～～～～～～～～
～～～～～～～～～～～～～
}

上記の修正でhtmlコード上一番上のtextareaは正常に動作しますが、
その他下のtextareaは「$('textarea').val(params);」をやっているので入力文字が入ってしまいます。
部品化しているのでclassの修正等も出来ず何か良い方法はありますでしょうか？
また、訳あってこのコード修正を綺麗に書かなければとんでもない仕打ちが待っている為どうかお助け下さい。

Answer 1

function textTrim(){
    params = $('textarea').val();
    params = jQuery.trim(params);
    $('textarea').val(params);
}

↑を↓に。

function textTrim(){
    params = $(this).val();
    params = jQuery.trim(params);
    $(this).val(params);
}

個人的に$とjQueryを混在させてるのがすごい気持ちが悪いんですが、その辺、コードレビューでなんか言われないんですかね。

Comments

[spring]

ご回答ありがとうございます。
アドバイス頂いた通り下記にすることにより出来ました。

function textTrim(){
params = $(this).val();
params = jQuery.trim(params);
$(this).val(params);

}

function setup(input, ○, ×) {
～～～～～～～～～～～～～
～～～～～～～～～～～～～
input.blur(textTrim);
input.blur(validate);
～～～～～～～～～～～～～
～～～～～～～～～～～～～
～～～～～～～～～～～～～
～～～～～～～～～～～～～
}
素人事ですみません、上記は"textarea"からthisに変える事により押されたtextareaのみに処理が動くようになったとの認識で合っていますか？
レビューでなんか言われると思うので＄とjQueryの混在も整えたいです。

[Lhankor_Mhy]

> 上記は"textarea"からthisに変える事により押されたtextareaのみに処理が動くようになったとの認識で合っていますか？

概ねその通りですが、実はtextarea以外にも動作しますのでお気を付けください。

> レビューでなんか言われると思うので＄とjQueryの混在も整えたいです。

$とjQueryを入れ替えるだけなので、どちらかに統一すればいいと思います。会社のコード規則に従えばいいと思いますが、よくわからなければ、周辺のコードと合わせてください。

Answer 2

設定個所4個所、各 validate なるメソッドを blur イベントに登録。validate はメソッドとしてどっかに定義されてる。
function trimAbdValidate1(){
   // trim 処理

   validate();
}

     
既存の、input.blur(validate);
を
input.blur(trimAndValidate1);
にして終わりです。
1
と番号つけたのは、テキストエリア4つそれぞれ用のメソッドということで。

なんか、前回、きょうが期限日でづ、ってー書いてから10日以上経過してるんですが、比較的時間に余裕があって良かったでづね。

追記

function trimValidate(e) {
  var v = this.value.replace(/^[  ]+/, "").replace(/[  ]+$/, "");
  this.value = v;
  validate.apply(this, [e]);
}
[ と ]の間に、半角スペースと全角スペースを入れてください。
ふと思ったですが、テキストエリアなので複数行記述できるのでは？
前後のスペースで良いのですか？各行の前後スペースだともうちょっとややこしくなるかと。


追記内容、
jquery でイベント登録されることが提示ソースから見えなかったため

Comments

[spring]

前回に引き続きお助け頂きありがとうございます!
その他の優先作業がいっぱい入ってきたので何んとか期限が伸びました。
教えていたいた記載通りに実行しました!
(メソッドの部分「trimAbdValidate1」は「trimAndValidate1」に変えました)

その結果下記エラーが吐かれました。
同jsにてhideerrorなるメソッドがありここで下記文言が吐かれてる。
Uncaught TypeError: Cannot read property '$バリデータコンテキストと書かれた変数' of undefined

もう少し調査してみます!

[ipadcaron]

私のていあんは無視して、Lhankor_Mhy さんのを使ってください。

[spring]

ありがとうございます。
私の掲示した情報が少なかったですね、失礼しました。
前回の板で質問させて頂いた際調査していて、本jsの中に他の箇所でjQuery.trim()している所がありreplaceではなくこれを使う事になりました。
http://semooh.jp/jquery/api/utilities/jQuery.trim/str/
入力情報の文字列内にあるスペースは適応されませんが文字列の前後スペースを取ってくれるのでこれで対応して行くことになりました。
長い間お付き合いいただきありがとうございます。助かりました。