Home / Questions / 43545
Accepted
Rafael Hernández
Asked: 2020-01-12 11:50:54 +0800 CST 2020-01-12 11:50:54 +0800 CST

Validation of a checkbox with javascript fails me

  • 772

the following checkbox

<input type="checkbox" name="checkbox" id="privacidad" value="acepto">

here all the javascript

jQuery.noConflict();
var nombre = document.getElementById("nombre");
var correo = document.getElementById("correo");
var mensaje = document.getElementById("mensaje");


jQuery(document).on('click', '#enviar', function($) 
{



    // If the value is less than 7, add a red border
    if(jQuery("#nombre").val().length < 4)
    {
        jQuery("#nombre").css("border", "3px solid red");
        jQuery(".msgerror1").css("visibility", "visible");

    }
    else
    {
        jQuery("#nombre").css("border", "1px solid ");
        jQuery(".msgerror1").css("visibility", "hidden");
    }

    if(jQuery("#correo").val().length < 4)
    {

        jQuery("#correo").css("border", "3px solid red");
        jQuery(".msgerror2").css("visibility", "visible");

    }
    else
    {
        jQuery("#correo").css("border", "1px solid ");
        jQuery(".msgerror2").css("visibility", "hidden");
    }

    if(jQuery("#mensaje").val().length < 6)
    {


        jQuery("#mensaje").css("border", "3px solid red");
        jQuery(".msgerror3").css("visibility", "visible");
    }
    else
    {
        jQuery("#mensaje").css("border", "1px solid ");
        jQuery(".msgerror3").css("visibility", "hidden");
    }

    if(jQuery("#privacidad")!== 'acepto')
    {



        jQuery(".msgerror3").css("visibility", "visible");
    }
    else
    {

        jQuery(".msgerror3").css("visibility", "hidden");
    }
});

function enviarform()
{
    var nombre = document.getElementById("nombre");
    var correo = document.getElementById("correo");
    var mensaje = document.getElementById("mensaje");
    var checkbox2 = document.getElementById("privacidad");
    var formulario = document.getElementById("myform"); 
    var dato = formulario[0];


    if((nombre.value.length < 4) || (correo.value.length < 4)|| (mensaje.value.length < 6)
        || (!$checkBox.is(':checked')))
    {
        alert("No se envía el formulario");
        return false;
    }
    else 
    {
        alert("Enviando el formulario");
        formulario.submit();
        return true;
    }       
}
javascript

2 Answers

  1. Best Answer

    Why don't you try this way and with JQuery?

    $(document).on('submit', '#myform', function(event){
  var $nombre = $('#nombre').val();
  var $correo = $('#correo').val();
  var $mensaje = $('#mensaje').val();
  var $checkBox = $('#privacidad');
  
  if($nombre.length < 4 || $correo.length < 4 || $mensaje.length < 6 || !$checkBox.is(':checked')){
      alert("No se envía el formulario");
      event.preventDefault();
  }
  else{
    alert("anuma ya se envió :o");
  }
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="myform">
  <input type="text" name="nombre" id="nombre"/><br />
  <input type="text" name="correo" id="correo"/><br />
  <input type="text" name="mensaje" id="mensaje"/><br />
  <input type="checkbox" name="privacidad" id="privacidad"/>
  <input type="submit" value="Enviar form"/>
</form>

    • 1

  2. I think you are missing the value of the CheckBox , for example you can try like this:

    var checkbox2 = document.getElementById("myCheck");

if (checkbox2.checked == true)
{
    alert("checked");
}
else
{
    alert("not checked");
}
    • 0