I'm putting together a form in which the client needs to provide the parent's data when he is a minor. I can do this easily in the backend, but I would like to know if you can do this with pure JavaScript to avoid the post.
Just by reinforcing that we did not use Jquery then we would really appreciate any answers that did not include it.
Thank you
What you are asking 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 ...
In any case, the following code would apply to both cases:
if(idade < 18){
document.getElementById("id_elemento").removeAttribute("required");
}
else{
document.getElementById("id_elemento").setAttribute("required","required");
}
You can do a better code than this, you'll probably have to check every time the date changes or something ... It really depends on your code, but this get and set of the attribute is what you're looking for. Source (and worth reading !!):
You can make an event, when you enter 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;
}
}
So every time the age is entered, the check is made, and the parent's property is changed to mandatory if you are under 18.
Running here: link Hope it helps
I think it's something 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 Pure
function validar() {
var x = document.getElementById("parents");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
See it working here: link
EDITED =====
I made a modification to keep the fields visible but blocked:
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;
}
}