How to add and remove required input with jQuery?

Asked

Viewed 8,681 times

2

I have a select with two option, when I select the first option I want him to show me a input field with the required attribute and when I select the second option I want him to do the same, only by removing the required of the first input.

The function I created adds the required input in the shown input, only when I make it show the second input, it keeps the required in the two fields.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head lang="pt-br">
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $("#campos > input").hide();
        $("#formulario").change(function(){
                $("#campos > input").hide();
                $( '#'+$( this ).val() ).show('fast').attr('required', 'required');;
        });
});
</script>
</head>
<body>

        <select name="formulario" id="formulario">
                <option value="">--</option>
                <option value="empresa">Empresa</option>
                <option value="cantidato">Cantidato</option>
        </select>

        <div id="campos">
                <input type="text" value="" placeholder="CNPJ" id="empresa">
                <input type="text" value="" placeholder="CPF" id="cantidato">
        </div>
</body>
</html>

I would like the required to be kept only in the selected input.

Grateful.

javascript jquery html5 input attributes

2 answers

5


You can use the .attr() to change this attribute, thus:

$('select').on('change', function() {
    $('input').attr('required', this.value == 'req');
});

The .attr() has the following API: .attr(nomeDoAtributo, valorBooleano).
When the second parameter is true it adds the attribute, when it is false it removes the attribute.

jsFiddle: https://jsfiddle.net/f0stzume/

Edit:

I saw that you added your code to the question. An example could be like this:

$(document).ready(function() {
    $('#formulario').on('change', function() {
        var tipo = this.value;
        $('#empresa, #cantidato').each(function() {
            var usar = this.id == tipo;
            this.required = usar;
            this.style.display = usar ? 'block' : 'none';
        });
    });
});

jsFiddle: https://jsfiddle.net/2rydjuns/

  • 1

    Hello Sergio, it was exactly what I needed. Thank you very much!

1

$(document).ready(function() {
     $("#formulario").on('change', function() {                                                
          if(this.value == 'empresa' || this.value == 'candidato'){
               $("#empresa").attr("required", "req");
               $("#candidato").attr("required", "req");
          }else{
               $("#empresa").removeAttr('required');
               $("#candidato").removeAttr('required');
          }
     });
});

Browser other questions tagged javascript jquery html5 input attributes

You are not signed in. Login or sign up in order to post.