33363


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

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

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

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

[code]

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

[code]

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


CC BY-SA 3.0
2017-03-16T05:59:50.740
33354
2017-03-16T10:00:41.830
20360
question
javascript jquery coffeescript
Coffeescript（Jquery）の選択肢チェクについて


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

[code]

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

[code]

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


CC BY-SA 3.0
2017-03-16T10:00:41.830
33363
2017-03-16T10:00:41.830
33354
answer