javascript - 選択で特定のオプションが選択されている場合に入力を必須にする方法

Question

リストで特定のオプションが選択されている場合にのみ、入力フィールドを必須にするのに苦労しています<select>。

例えば：

<select id="model">
    <option value="model1">Model 1</option>
    <option value="model2">Model 2</option>
    <option value="model3">Model 3</option>
    <option value="model4">Model 4</option>
</select>

<input type="text" name="extra">

extraモデル 2 または 3 を選択した場合、入力が必要になります。

どうすればいいですか？

Answer 1

You can add a required class when a certain option is selected. Then on submit check the required elements to make sure something it's not empty

$('#model').change(function () {
    // check if it's model2 or model3
    var isRequired = /model2|model3/i.test(this.value);
    $('input[name=extra]').toggleClass('required',isRequired);    
});

$('form').submit(function(){
    // get all empty required fields
    var reqEmpty = $('.required').filter(function(){
       return $.trim(this.value).length === 0;
    });
    // if any empty required fields are found - do something
    if(reqEmpty.length){
        alert('empty required field');
        return false;
    }
});

the red border in the fiddle is just to show you when the required class has been added.

FIDDLE