Estou procurando um método para verificar se os input's com required da página estão válidos toda vez que eu clico no botão salvar, mas estou tentando fazer isso sem ter que verificar um por um, segue abaixo o que eu já fiz.
obs: tive que deixar o button como "type='button'" por causa de algumas funções que terei que adicionar futuramente.
HTML:
<body>
<form>
<div>
<label for="last_name">Date</label>
<input type="text" name="date" id="date" required onfocus="(this.type='date')" placeholder="dd / mm / aaaa" onblur="(this.type='text')">
</div>
<div>
<label>Email</label>
<input type="email" required name="email" id="email" placeholder=" ">
</div>
<div>
<label>CEP</label>
<input type="text" name="cep" id="cep" required placeholder=" " pattern="\d{2}\.\d{3}-?\d{3}">
</div>
<div>
<label>CPF</label>
<input type="text" name="cpf" id="cpf" required placeholder=" " pattern="\d{3}\.\d{3}\.\d{3}-\d{2}" maxlength="14">
</div>
<div>
<label>RG</label>
<input type="text" name="rg" id="rg" required placeholder=" " pattern="\d{2}\.\d{3}\.\d{3}-\d{1}" maxlength="12">
</div>
<div>
<label>CNPJ</label>
<input type="text" name="cnpj" id="cnpj" required placeholder=" " pattern="[0-9]{2}[\.]?[0-9]{3}[\.]?[0-9]{3}[\/]?[0-9]{4}[-]?[0-9]{2}">
</div>
<div>
<label>Telefone Residencial</label>
<input type="text" name="telefone" id="telefone" required placeholder=" " pattern="[\(]\d{2}[\)][\s]\d{4}[\-]\d{4}">
</div>
<div>
<label>Telefone Celular</label>
<input type="text" name="cel" id="cel" required placeholder=" " pattern="[\(]\d{2}[\)][\s]\d{1}[\s]\d{4}[\-]\d{4}">
</div>
<button type="button" id="salve">salvar</button>
</form>
</body>
<script src="js/jquery.js"></script>
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<script src="js/mascara.js"></script>
CSS:
input[type="text"]:invalid:not(:focus):not(:placeholder-shown),
input[type="date"]:invalid:not(:focus):not(:placeholder-shown),
input[type="email"]:invalid:not(:focus):not(:placeholder-shown){
border-color:red;
border-width: 3px;
}
input:valid {
border-color:green;
border-width: 3px;
}
JS:
$("#value").mask("#.##0,00", { reverse: true });
$("#telefone").mask("(00) 0000-0000");
$("#cel").mask("(00) 0 0000-0000");
$("#cpf").mask("#00.000.000-00", { reverse: true });
$("#rg").mask("#0.000.000-0", { reverse: true });
$("#cep").mask("00.000-000");
$("#cnpj").mask("00.000.000/0000-00");
var salve = $("#salve");
salve.on("click", function() {
//verificar se os inputs estão vazios
var vazios = $("input").filter(function() {
return !this.value;
}).get();
console.log(vazios);
if (vazios.length) {
$(vazios).addClass('vazio');
console.log("Todos os campos devem ser preenchidos.");
return false;
}else {
console.log("Eureka");
}
// tentativa de verificar se os inputs estão validos
var validos = $("input").filter(function() {
return this.valid;
}).get();
console.log(validos);
});
no caso eu coloquei uma validação visual nos inputs e consegui verificar se os inputs estão vazios, só não estou conseguindo validar se eles estão preenchidos corretamente