How to make input mandatory in just a few cases

Question

I am putting together a form in which the customer needs to provide the parent data when he or she is under age. I can do this easily in the backend, but I would like to know if you have how to do it with pure Javascript to avoid the post.

Just to point out that we don’t use Jquery then I would really appreciate the answers that don’t include it.

Thank you

Answer 1

I believe it’s something like this you’re looking for:

HTML

<input type="checkbox" name="idade" value="true" onclick="validar();"> Maior de 18 anos<br>

<div id="parents">
  Nome Pai: <input type="text" name="fname"><br>
  Nome Mãe: <input type="text" name="lname"><br>
  <button>Enviar</button>
</div>

JS Puro

function validar() {
    var x = document.getElementById("parents");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

See working here: https://jsfiddle.net/rodrigorf/wt52n37g/1/

EDITED =====

I made a modification to keep the fields visible but locked:

function validar() {
    txtMae = document.getElementById("txtMae");
    txtPai = document.getElementById("txtPai");

    if (txtMae.disabled === true) {
        txtMae.disabled = false;
    } else {
        txtMae.disabled = true;
    }

    if (txtPai.disabled === true) {
        txtPai.disabled = false;
    } else {
        txtPai.disabled = true;
    }
}

Answer 2

You can make an event, when entered age, if it is less than 18 the fields of Father and Mother change to required

HTML:

<input type="text" name="idade" id="idade" required>
<label for="idade">Idade</label>

<input type="text" name="mae" id="mae">
<label for="mae">Mãe</label>

<input type="text" name="pai" id="pai">
<label for="pai">Pai</label>

JS:

var campoIdade = document.getElementById('idade');

campoIdade.onchange = function() { 

    var idade = campoIdade.value;

    if(idade < 18) {
        document.getElementById('mae').required = true;
        document.getElementById('pai').required = true;
    } else {
        document.getElementById('mae').required = false;
        document.getElementById('pai').required = false;
    }
}

Then every time the age is entered, the check is done, and the parents' property is changed to mandatory if it is under 18 years.

Running here: https://jsfiddle.net/Lejq5x3v/3/ I hope it helps

Answer 3

What you are asking for seems to be something simple, really only changes if it is XHTML or HTML. If you can send the form I could help you with more details...

Anyway the following code would serve for both cases:

if(idade < 18){
   document.getElementById("id_elemento").removeAttribute("required");
}
else{
   document.getElementById("id_elemento").setAttribute("required","required");
}

You can do better code than that, you’ll probably have to check every time the date changes or something... It really depends on your code, but that get and set attribute is what you’re looking for. Source (and worth reading!!):

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

https://www.w3schools.com/jsref/met_element_setattribute.asp

http://www.mundojs.com.br/artigos/a00002.html