Usuário deve ser selecionado.
Mas é interessante como a ONINPUT somente acesso a função VALIDATE
caso um INPUT for modificado, quando um SELECT é modificado
o navegador não aciona a função VALIDATE
minha necessidade é a seguinte:
dependendo da opção selecionada em um SELECT
outros campos se tornam obrigatório,
mas como ONINPUT não roda a função VALIDATE quando o SELECT é modificado
simplesmente não funciona,
com INPUT funciona difeitinho
Mas esperimente selecionar SIM e depois preencher a OBS
então é executado o VALIDATE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <script> function validate() { if(registrado.value == 's' && usuarios.value == '') { usuarios.setCustomValidity('Selecione um usuario'); alert('entrou'); }else if(registrado.value == 's' && obs.value == '') { obs.setCustomValidity('Preencha a OBS'); alert('entrou'); } else { usuarios.setCustomValidity(''); } } </script> <body> <div style="width:600px"> Caso Registrado for diferente de vazio então<br /> Usuário deve ser selecionado.<br /> Mas é interessante como a ONINPUT somente acesso a função VALIDATE<br /> caso um INPUT for modificado, quando um SELECT é modificado<br /> o navegador não aciona a função VALIDATE<br /> <br /> minha necessidade é a seguinte:<br /> dependendo da opção selecionada em um SELECT<br /> outros campos se tornam obrigatório,<br /> mas como ONINPUT não roda a função VALIDATE quando o SELECT é modificado<br /> simplesmente não funciona,<br /> com INPUT funciona difeitinho<br /> <br /> Mas esperimente selecionar SIM e depois preencher a OBS<br /> então é executado o VALIDATE<br /> </div> <br/> <form action="" method="post" name="cadastro" id="cadastro" oninput="validate(this);"> <table class="tabela" border="0" align="center" cellpadding="3" cellspacing="3"> <tr> <td width="150" align="right">Registrado:</td> <td> <select id="registrado" name="registrado" class="campos" required> <option value="n" selected>Não</option> <option value="s">Sim</option> </select> </td> </tr> <tr> <td align="right">Usuário:</td> <td> <select id="usuarios" name="usuarios" class="campos" > <option value=""></option> <option value="joao">João</option> <option value="pedro">Pedro</option> </select> </td> </tr> <tr> <td align="right"><label>Obs:</label></td> <td colspan="2"><input id="obs" name="obs" type="text" size="12" class="campos" /></td> </tr> <tr> <td></td> <td colspan="2"><input name="botao" type="submit" class="botao" value="Cadastrar"/></td> </tr> </table> </form> </body> </html>
Solução:
<script>
function validate(registrado_value) {
if(registrado_value == 's') {
usuarios.setAttribute('required', 'required');
obs.setAttribute('required', 'required');
} else {
usuarios.removeAttribute('required');
obs.removeAttribute('required');
}
}
</script>
e no select
onchange="validate(value);"
<select id="registrado" name="registrado" class="campos" required onchange="validate(value);">