Eu quero aplicar o css em um formulario mas quando vou colocar os inputs dentro de alguma div o javascript não funciona Veja o código: No caso quando digito o email e a senha era para o botão ficar azul ativado.
<style>
.btnDisabled{
pointer-events:none;
outline:none;
border: none;
background: gray;
}
.btnEnabled{
outline:none;
border: none;
background: blue; color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">< /script>
<form id="formLog" method="post" action="website/login">
<input type="text" id="txtELog" name="txtELog" placeholder="Userlogin ou E-mail: *" />
<input type="password" id="txtPassLog" name="txtPassLog" placeholder="Senha: *" />
<input type="submit" id="btnLog" name="btnLog" value="Login" disabled="disabled" class="btnDisabled" />
</form>
<script>
$ (' #formLog > input').on('input', function () {
var emptyLog = false;
$('form > input, form > select').each(function () {
if ($('#txtELog').val() == '' || $('#txtPassLog').val() == '') {
emptyLog = true;
}
});
if (emptyLog) {
$('#btnLog').attr('disabled', 'disabled');
$('#btnLog').attr('class', 'btnDisabled');
} else {
$('#btnLog').removeAttr('disabled');
$('#btnLog').attr('class', 'btnEnabled');
}
});
</script>
Eu quero fazer isso no formulário:
<form id="formLog" method="post" action="website/login">
<div class="inputText">< input type="text" id="txtELog" name="txtELog" placeholder="Userlogin ou E-mail: *" /></div>
<div class="inputText">< input type="password" id="txtPassLog" name="txtPassLog" placeholder="Senha: *" /></div>
<div class="inputButton">< input type="submit" id="btnLog" name="btnLog" value="Login" disabled="disabled" class="btnDisabled" /></div>
</form>
Mas quando faço isso e preencho os dois campos o javascript de ativar o botão não funciona. Alguém pode me ajudar? Preciso colocar esses inputs dentro de suas respectivas divs pra estilizar o formulário.
#formLog > input
que utilizou no jQuery? Talvez valha a leitura de Como funcionam os seletores >, + , ~ no CSS?