0

Tengo el siguiente problema, al momento de validar un file en php, en vez de que salga un popup indicando que falta completar ese input, me vuelve a cargar la pagina y me sale esta URL:

.html?test=&ok=

Deberia de salirme el cuadro del popup, mi codigo es el siguiente:

$("#ss").validate({
rules: {
test: {
minlength: 3,
required: true
},
ok: {
minlength: 3,
required: true
}
},
showErrors: function(errorMap, errorList) {
$.each(this.successList, function(index, value) {
return $(value).popover("hide");
});
return $.each(errorList, function(index, value) {
var _popover;
console.log(value.message);
_popover = $(value.element).popover({
trigger: "manual",
placement: "top",
content: value.message,
template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
});
_popover.data("popover").options.content = value.message;
return $(value.element).popover("show");
});
}
});
.popover-content {
border-bottom: 10px solid black;
margin-bottom:-1px
}

.arrow:after {
/*background: black;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">

<form id="ss">
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input name="test" type="text" title="okok1" placeholder="Type something…"/>
<input name="ok" type="text" placeholder="Otro input" />
<button type="submit" class="btn">Submit</button>
</fieldset>
</form> 

Pero me sale ese error, y no entiendo, si estoy usando HTML, en una web X, Qué podria estar pasando ?

.html?test=&ok=

1 respuesta 1

0

Usa la etiqueta required de html5 para este por defecto valida si el campo esta completado, también evalúa si es del tipo correcto email o number.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <form id="ss">
  <fieldset>
  <legend>Legend</legend>
  <label>Label name</label>
  <input name="test" type="text" title="okok1" required placeholder="Type something…"/>
  <input name="ok" type="text" required placeholder="Otro input" />
  <button type="submit" class="btn">Submit</button>
  </fieldset>
  </form> 
</body>
</html>

Ahora si deseas seguir usando POPOVER y Jquery Validate.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script>
function enableValidate(){
    var validateSs = $("#ss").validate({
    rules: {
      test: "required",
      ok: {
        required: true,
        minlength: 2
      },
    },
    errorContainer: $("#warning, #summary"),
    errorPlacement: function(error, element) {
      let text = error[0].innerText;
      $($(element).parent())[0].setAttribute('data-content',text);
      enablePopover();
      $($(element).parent()).popover('show');
      // opcional add label message
      $(element).parent().append(error);
    },
    messages: {
      test: "Please enter your test",
      ok: {
        required: "Please enter a ok",
        minlength: "Your ok must consist of at least 2 characters"
      }
    }
  });
}

function enablePopover(){
  $(function () {
    $('[data-toggle="popover"]').popover({'trigger':'manual'})
  })
}
  </script>
</head>
<body>  

  <form id="ss">
  <fieldset>
  <legend>Legend</legend>
  <label>Label name</label>
  <div class="form-group" data-toggle="popover" data-placement="right"  data-content="Message">
  <input name="test" type="text" title="okok1" required placeholder="Type something…" />
  </div>
  <div class="form-group" data-toggle="popover" data-container="body" data-placement="right" data-content="Message">
<input name="ok" type="text" required placeholder="Otro input min 2 length" />
  </div>
  <button type="submit" class="btn">Submit</button>
  </fieldset>
  </form> 
</body>
<script>
  enableValidate();
</script>
</html>

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.