Make the input text field mandatory if the corresponding checkbox is selected

Question

[The solution was with Javascript, I will put at the end of the code] Guys, this my code works perfectly, when a checkbox is selected the input related to it appears but if I do not fill it and put to include the form, ends up giving error. So I need that for each checkbox selected, the input field related to it is mandatory. Could someone give me this help?

                                <div class="form-group">
                                <label>Possui redes sociais?</label>
                                <div id="quais_redes" class="col-sm-10">
                                    @foreach($redes as $item)
                                    <div class="form-check">
                                        <input class="form-check-input" id="quais_redes" type="checkbox" name="quais_redes[]"
                                          value={{$item->red_id}} @if(is_array(old('quais_redes')) &&
                                        in_array($item->red_id,old('quais_redes'))) checked @endif>
                                        {{$item->red_id}} - {{$item->red_nome}}
                                    </div>
                                    @endforeach
                                        @if(isset($error) and isset($error['quais_redes']))
                                            <div class="alert alert-danger">
                                                @foreach ($error['quais_redes'] as $e)
                                                    <li>{{$e}}</li>
                                                @endforeach
                                            </div>
                                        @endif


                                <div class="form-group" style="margin: 0 auto; display: none;">
                                    <label for="facebook">Qual o seu Facebook?</label>
                                    <input type="text" class="form-control" name="rede_facebook" id="rede_facebook" data-label="rede_facebook" value="{{ old('rede_facebook') }}">
                                </div>

                                <div class="form-group" style="margin: 0 auto; display: none;">
                                    <label for="instagram">Qual o seu Instagram?</label>
                                    <input type="text" class="form-control" name="rede_instagram" id="rede_instagram" data-label="rede_instagram" value="{{ old('rede_instagram') }}">
                                </div>

                                <div class="form-group" style="margin: 0 auto; display: none;">
                                    <label for="twitter">Qual o seu Twitter?</label>twitter
                                    <input type="text" name="rede_twitter" class="form-control" id="rede_twitter" data-label="rede_twitter" value="{{ old('rede_twitter') }}">
                                </div>

                                <div class="form-group" style="margin: 0 auto; display: none;">
                                    <label for="twitter">Qual o seu Telegram?</label>
                                    <input type="text" name="rede_telegram" class="form-control" id="rede_telegram" data-label="rede_telegram" value="{{ old('rede_telegram') }}">
                                </div>

                                <div class="form-group" style="margin: 0 auto; display: none;">
                                    <label for="twitter">Qual o seu Whatsapp?</label>
                                    <input type="text" name="rede_whatsapp" class="form-control" id="rede_whatsapp" data-label="rede_whatsapp" value="{{ old('rede_whatsapp') }}">
                                </div>
                            </div>

    const campo1 = document.getElementById('Facebook')
    const campo2 = document.getElementById('rede_Facebook')
    const campo3 = document.getElementById('Instagram')
    const campo4 = document.getElementById('rede_Instagram')
    const campo5 = document.getElementById('Twitter')
    const campo6 = document.getElementById('rede_Twitter')
    const campo7 = document.getElementById('Telegram')
    const campo8 = document.getElementById('rede_Telegram')
    const campo9 = document.getElementById('Whatsapp')
    const campo10 = document.getElementById('rede_Whatsapp')
    const campo11 = document.getElementById('leciona_sim')
    const campo12 = document.getElementById('leciona_nome_inst')
    const btn_sub = document.getElementById('btn-submit');

    // console.log(campo1,campo2, btn_sub)
    btn_sub.addEventListener('click', function() {
        if(campo1.checked && !$("#rede_Facebook").val()) {
            alert('Preencha o campo Qual o seu Facebook');
            document.getElementById('rede_Facebook').focus();
            event.preventDefault();
            }
        if(campo3.checked && !$("#rede_Instagram").val()){
            alert('Preencha o campo Qual o seu Instagram');
            document.getElementById('rede_Instagram').focus();
            event.preventDefault();
        }
        if(campo5.checked && !$("#rede_Twitter").val()){
            alert('Preencha o campo Qual o seu Twitter');
            document.getElementById('rede_Twitter').focus();
            event.preventDefault();
        }
        if(campo7.checked && !$("#rede_Telegram").val()){
            alert('Preencha o campo Qual o seu Telegram');
            document.getElementById('rede_Telegram').focus();
            event.preventDefault();
        }
        if(campo9.checked && !$("#rede_Whatsapp").val()){
            alert('Preencha o campo Qual o seu Whatsapp');
            document.getElementById('rede_Whatsapp').focus();
            event.preventDefault();
        }
    });
</script>

Answer 1

Juliana, you can do this using Validation’s required_if

For example:

Validator::make($request->all(), [
   'input_text_relacionado' => 'required_if:checkbox_relacionado,1'
]);

In case 1 would be the value that is in the checkbox

Answer 2

I don’t believe it is the best solution, but you could add the required via javascript, in case you must be using a javascript to make visible the selected input, then inside the code would put this line:

document.getElementById("id-do-input").required = true;

this code would be for each input you have, the problem is that it becomes necessary to do the reverse process if it is possible to uncheck the checkbox, otherwise it will be asking you to type in an input that is no longer there.

The Terminal itself has a documentation about the validations, I think you tried to use, but I would not have the knowledge to tell you if you can make this dynamism to validate only if the checkbox is selecting.