Good, I have a form that came by default in a template. I have created a checkbox for the privacy policy. The problem is that the created function completely blocks it until the box is checked. Before marking it as disabled, it let me click and it warned me that I had to fill in the empty fields. This is the function created for the checkbox which I have added in html because if I add it in the javascript code of the template, it breaks it:
document.getElementById("aceptar_terminos").addEventListener('change', checkAccepted)
function checkAccepted(e) {
var botonEnviar = document.getElementById("botonEnviar")
console.log(this.checked)
var isNotChecked = !this.checked
botonEnviar.disabled = isNotChecked
}
I show how I have the form modified by me, if you can guide me in what I should modify, so that when trying to send from the button, it tells me that I should check the box. Without this function, it lets me press the button, but it doesn't let me send if I don't fill in the fields. I need it not to radically block sending like it does now. I know it's because I have disabled
in html
, but if I don't add that, the form is sent without checking the box. Thanks.
$(document).ready(function(){
(function($) {
"use strict";
$.validator.addMethod('answercheck', function (value, element) {
return this.optional(element) || /^\bcat\b$/.test(value);
}, "type the correct answer -_-");
$('#success,#error').hide();
// validate contactForm form
$(function() {
$('#contactForm').validate({
rules: {
name: {
required: true,
minlength: 2
},
phone: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
subject: {
required: true,
minlength: 10
},
message: {
required: true,
minlength: 20
}
},
messages: {
name: {
required: "Por favor, ingrese su nombre...",
minlength: "El nombre debe tener mas caracteres..."
},
phone: {
required: "Por favor, ingrese su numero de teléfono para contactar...",
minlength: "El telefono no es correcto..."
},
email: {
required: "sin correo electrónico, sin mensaje"
},
subject: {
required: "Por favor, indique un tema..."
},
message: {
required: "Debe escribir algo para enviar el formulario",
minlength: "¿eso es todo? ¿De Verdad?"
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"contact_process.php",
success: function() {
$('#contactForm :input').attr('disabled', 'disabled');
$('#contactForm').fadeTo( "slow", 0.90, function() {
$(this).find(':input').attr('disabled', 'disabled');
$(this).find('label').css('cursor','default');
$('#success').fadeIn();
});
},
error: function() {
$('#contactForm').fadeTo( "slow", 0.15, function() {
$('#error').fadeIn();
});
}
})
}
})
$('#serviceForm').validate({
rules: {
name: {
required: true,
minlength: 2
},
phone: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
selectService: {
required: true,
minlength: 1
}
},
messages: {
name: {
required: "come on, you have a name don't you?",
minlength: "your name must consist of at least 2 characters"
},
phone: {
required: "come on, you have a phone don't you?",
minlength: "your phone number must consist of at least 2 characters"
},
email: {
required: "no email, no message"
},
selectService: {
required: "Select one service"
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"service_request.php",
success: function() {
$('#serviceForm :input').attr('disabled', 'disabled');
$('#serviceForm').fadeTo( "slow", 0.90, function() {
$(this).find(':input').attr('disabled', 'disabled');
$(this).find('label').css('cursor','default');
$('#success').fadeIn();
});
},
error: function() {
$('#serviceForm').fadeTo( "slow", 0.15, function() {
$('#error').fadeIn();
});
}
})
}
})
})
})(jQuery)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-12 col-xs-12">
<form id="contactForm" method="post" action="get_in_touch_form.php">
<div class="messages"></div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input id="name" type="text" name="name" placeholder="Nombre" required="" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input id="email" type="email" name="email" placeholder="Email" title="Por favor, introduzca un email valido. Gracias...!!"
required="" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input id="subject" type="text" name="subject" placeholder="Tema" required="" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea id="message" name="message" type="text" rows="4" placeholder="Mensaje" class="form-control contact_textarea"></textarea>
</div>
</div>
<input type="checkbox" name="aceptar_terminos" id="aceptar_terminos" value="aceptar_terminos" /> He leído
y acepto la <a href="politica_privacidad.html" target="_blank">Política de Privacidad</a>
<div class="col-md-12">
<input type="submit" disabled id="botonEnviar" value="Enviar..." class="btn submit_now">
</div>
</div>
</form>
<div id="success">
<p>Su mensaje enviado con éxito.</p>
</div>
</div>
<script type="text/javascript">
document.getElementById("aceptar_terminos").addEventListener('change', checkAccepted)
function checkAccepted(e) {
var botonEnviar = document.getElementById("botonEnviar")
console.log(this.checked)
var isNotChecked = !this.checked
botonEnviar.disabled = isNotChecked
}
</script>
</body>
</html>
Remove the disabled attribute from the button so it will let you click it and add the checkbox to the form validation, just like you're doing with the other fields. In this way it will let you click but you will get a message that will not let you continue (obviously, add this attribute also in the messages object so that it shows you the message, and in the server object if you consider it necessary):