Coffeescript(Jquery)の選択肢チェクについて

投稿者: Anonymous

htmlの択一選択フィールドで、value=”normal_direct_link”が設定された場合に
下記を実現したいのですが、うまく動作しません。

○実現したい内容○
①:テキストフィールド(ノーマル設定補足 )を入力必須にする
②:①を入力していない場合、送信ボタンを押せないようにするor postエラーにしたい

■現在停止している内容■
1:選択肢をフォーカスすると自動でvalue=”normal_direct_link”を選択してしまう
2:value=”normal_direct_link”を選択してもテキストフィールド(ノーマル設定補足 )を入力必須にならない

コードはCoffeescriptですが、ご回答はjqueryもしくはJSで頂いても問題ございません。
恐れ入りますが、どなたかご協力いただければと存じます

_x000D_

_x000D_

<div class="form-group" id="service_page_type">_x000D_
  <label class="select optional control-label" for="service_page_type">リンク設定</label>_x000D_
  <select class="select" id="service_page_type" name="service[page_type]" value="default">_x000D_
    <option selected="selected" value="default">通常設定</option>_x000D_
    <option value="pro">プロ</option>_x000D_
    <option value="normal_direct_link">ノーマル設定</option>_x000D_
  </select>_x000D_
</div>_x000D_
<div class="form-group">_x000D_
  <label class="string">ノーマル設定補足</label>_x000D_
  <input class="string" id="service_link" name="service[link]" type="text">_x000D_
  <div class="help-block " id="service-link-errors"></div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

_x000D_

_x000D_

$('#service_page_type').click ->_x000D_
  if $("[name='service[page_type]']").val 'normal_direct_link'_x000D_
    if $('#service_link').val() == ''_x000D_
      $('#service_link').addClass('#service-link-errors', '入力して下さい')_x000D_
    else_x000D_
      $('#service_link').removeClass('#service-link-errors')

_x000D_

_x000D_

_x000D_

解決

質問にあるコードを見る限り、HTMLのid属性の重複、jQuery APIの誤った使い方(ドキュメントをご確認ください.addClass()等)、その他コーディングに問題があるように思われます。これらを修正すればとりあえずいいと思いますが、いずれにしてもあまり一般的なアプローチではなさそうです。
まず今回の動作は「セレクトボックスの値」に基づくものですから、この値が変更されたときに発火するイベントを使用するのが定石です。この値に基づきDOMの状態を変更するコードを書けば、理想的な動作に近づくと思います。
また、送信時に改めてチェックを置きたいということであれば、formのsubmitイベントをハンドリングして値を検証し、不正な値(未入力だとか)であれば送信をキャンセルするという実装が可能です。(参考
ただし付け加えておくと、もしサーバーに値を送信し何か動作をするというアプリケーションでしたら、値の過不足や適正であるかのチェックはサーバー側ですべきである(しなくてはならない)ということにはご注意ください。JavaScript(クライアントサイド)でのvalidationシステムはデバッガ等を使用して容易に回避・改竄が可能です。単なる表示上のしくみにとどめることが原則です。

_x000D_

_x000D_

const $select = $('#service_page_type');_x000D_
const $textbox = $('#service_link');_x000D_
const $errorinfo = $('#service-link-errors');_x000D_
_x000D_
const configureRequiredAttribute = () => {_x000D_
    // 現在の値を確認_x000D_
    if ($select.val() == 'normal_direct_link') {_x000D_
        // 入力必須を設定_x000D_
        $textbox.attr('required', true);_x000D_
        // メッセージを表示_x000D_
        $errorinfo.show();_x000D_
    } else {_x000D_
        // 解除_x000D_
        $textbox.attr('required', false);_x000D_
        // メッセージを非表示_x000D_
        $errorinfo.hide();_x000D_
    }_x000D_
};_x000D_
_x000D_
// セレクトボックスの値が変更されたとき発火するchangeイベントのハンドラを設定_x000D_
$select.on('change', configureRequiredAttribute);_x000D_
_x000D_
// ページロード時の状態に対して適用_x000D_
configureRequiredAttribute();

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<form>_x000D_
<div>_x000D_
  <label>リンク設定</label>_x000D_
  <select id="service_page_type">_x000D_
    <option value="default">通常設定</option>_x000D_
    <option value="pro">プロ</option>_x000D_
    <option value="normal_direct_link">ノーマル設定</option>_x000D_
  </select>_x000D_
</div>_x000D_
<div>_x000D_
  <label>ノーマル設定補足</label>_x000D_
  <input id="service_link" type="text">_x000D_
  <div id="service-link-errors">*必須項目です</div>_x000D_
</div>_x000D_
</form>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *