10536


よくあるお問い合わせフォームの入力時のバリデーション機能を作っています。  
以下のような `_validate` メソッドを作成したのですが  
`@$example.parent('dd').prev('dt').addClass('form-error')` が  
何度も書かれてしまっているのを、もっと簡潔に記述したいのですが  
どうすればいいでしょうか。よろしくお願いします。

[code]

    _validate: ->
      errorMessage = ''
    
      unless @$name.val()
        errorMessage += '<span class="form-alert-text">・お名前を入力してください</span><br>'
        @$name.parent('dd').prev('dt').addClass('form-error')
    
      unless @$email.val()
        errorMessage += '<span class="form-alert-text">・メールアドレスを入力してください</span><br>'
        @$email.parent('dd').prev('dt').addClass('form-error')
      else
        unless @$email.val().match(/.+@.+\..+/g)
          errorMessage += '<span class="form-alert-text">・メールアドレスが不正な形式です</span><br>'
          @$email.parent('dd').prev('dt').addClass('form-error')
    
      unless @$email_confirm.val()
        errorMessage += '<span class="form-alert-text">・メールアドレス(確認)を入力してください</span><br>'
        @$email_confirm.parent('dd').prev('dt').addClass('form-error')
      else
        if @$email.val() != @$email_confirm.val()
          errorMessage += '<span class="form-alert-text">・メールアドレスと内容が異なります</span><br>'
          @$email_confirm.parent('dd').prev('dt').addClass('form-error')
    
      unless @$tel.val()
        errorMessage += '<span class="form-alert-text">・お電話番号を入力してください</span><br>'
        @$tel.parent('dd').prev('dt').addClass('form-error')
      else
        unless @$tel.val().match(/^[0-9-]/)
          errorMessage += '<span class="form-alert-text">・お電話番号が不正な形式です</span><br>'
          @$tel.parent('dd').prev('dt').addClass('form-error')
    
      errorMessage
    
[/code]


CC BY-SA 3.0
2015-05-23T03:11:02.573
10529
2015-05-23T08:53:57.807
2015-05-23T08:53:57.807
208
9617
question
javascript coffeescript
JavaScript の記述を簡潔にしたい


例えばですが（思いつきで入力しているため動作確認はしていません）

[code]

    var nullcheck_keys = {'name'=>'名前','tel'=>'電話番号','email'=>'メールアドレス',....};
    
[/code]

のように未記入禁止のものをチェックするキーリストを作っておき

[code]

    for(var n in nullcheck_keys){
        $("*[name=" + n +"]").each(function(){
              if($(this).val() == ""){
                error= nullcheck_keys[n] + 'が未記入です';
                $(this).parent....;
              }
        });
    }
    
[/code]

のようにまとめるのも良いのかなとは思いました。


CC BY-SA 3.0
2015-05-23T03:54:43.890
10530
2015-05-23T03:54:43.890
8667
10529
answer


もっとも単純な方法の1つとして、以下のような関数を定義することを提案します。

[code]

    markAsError = (el) ->
      el.parent('dd').prev('dt').addClass('form-error')
    
[/code]

この関数 `markAsError` を使うことで、例題のコード
`@$example.parent('dd').prev('dt').addClass('form-error')` は次のように単純化されます。

[code]

    markAsError @$example
    
[/code]


CC BY-SA 3.0
2015-05-23T08:52:52.850
10536
2015-05-23T08:52:52.850
208
10529
answer