0

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

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

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

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

<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>

$('#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')

1 件の回答 1

1

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

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();
<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>

1
  • rio.irikami様 早急にご連絡いただきありがとうございました 頂いた内容で稼働することができました。 また参考リンクはこれから閲覧して勉強いたします、 大変丁寧なご対応いただきありがとうございました。
    – bebe7200
    2017年3月19日 1:28

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。