messages: {
nome: 'Por favor, insira seu nome',
email: 'Por favor, insira seu e-mail',
telefone: 'Por favor, insira seu número de celular',
endereco: 'Por favor, insira seu endereço',
cep: 'Por favor, insira seu CEP',
cpf: 'Por favor, insira seu CPF',
},
submitHandler: function (form) {
alert("Sua requisição foi enviada para análise, parabéns pela aquisição!");
form.reset();
},
invalidHandler: function (form, validator) {
alert("Por favor, preencha os campos para prosseguir com a compra!");
}
Exercício Módulo 10 - Plugins jQuery
O carousel slick foi corrigido e está funcional.
A semântica de escrita do HTML e jQuery foram atualizadas e escritas corretamente.
O jQuery plugin está funcionando corretamenta após ter sido alocado de forma correta.
Mensagens personaliadas foram inseridas para cada 'input'.
HTML `<!DOCTYPE html>
Adquira seu veículo agora mesmo!
Insira seus dados para finalização da compra
`
body { background-color: #f2f2f2; color: #333; }
header { background-color: #007bff; color: #fff; text-align: center; padding: 20px 0; margin: 0 auto; }
h2 { text-align: center; margin-bottom: 16px; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; margin-top: 30px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
.form-campo { margin-bottom: 20px; }
.form-campo label { display: block; font-weight: bold; margin-bottom: 5px; }
.form-campo input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
.container button { background-color: #007bff; color: white; padding: 10px 20px; border: none; cursor: pointer; font-weight: bold; display: inline-block; }
.error { color: rgba(255, 0, 0, 0.711) }`
Java Script `$(document).ready(function () { $('#carousel-imagens').slick({ autoplay: true, arrows: false })
$('#telefone').mask('(00) 00000-0000')
$('#cpf').mask('000.000.000-00')
$('#cep').mask('00000-000')
$('form').validate({ rules: { nome: { required: true }, email: { required: true, email: true }, telefone: { required: true }, endereco: { required: true }, cep: { required: true }, cpf: { required: true }, },
}) })`