1

Estamos en un proyecto de registro de mascotas, ahora tenemos un nuevo problema en la administración del proyecto, al momento de dar click en el icono inscripción del propietario se abre una modal, con todos los campos para que se rellene los datos del propietario, el problema rige cuando validamos los campos al dar click en guardar nos debe de enviar un error que dice el campo es obligatorio y no desaparecer la modal, lo que queremos es que cuando haya un error la modal no desaparezca, hasta cuando todos los campos estén validados.

<div class="col">
    <div class="form-group">
        <label for="nombre">Nombre</label>
         <input type="text" class="form-control" id="nombrePropietario" placeholder="Nombre">
     </div>
 </div>

<div class="modal-footer">
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar <i class="fas fa-times"></i></button>
     <button type="button" class="btn btn-primary" id="idGuardarPropietario" data-dismiss="modal">Guardar <i class="fas fa-save"></i></button>
</div>

function registroPropietario() {
const nomPropietario = $("#nombrePropietario").val(),    

 if (nomPropietario === "") {
 alert ("El nombre es obligatorio");
  } 
 }

1 respuesta 1

1

Tu error es por que tienes el `data-dismiss="modal" puesto en el botón de guardar. Tienes que quitarlo.

Si hay comprobaciones por hacer lo correcto es que con javascript recrees esa propiedad despues de llamar una función que valide si es correcto. Por ejemplo:

function registroPropietario() {
const nomPropietario = $("#nombrePropietario").val(),    

 if (nomPropietario === "") {
 alert ("El nombre es obligatorio");
  } 
 } else {
  alert('Es valido')
  $('#myModal').modal('hide')
 }

Te dejo un ejemplo funcional.

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
  crossorigin="anonymous"
/>

<!-- Button trigger modal -->
<button
  type="button"
  class="btn btn-primary"
  data-toggle="modal"
  data-target="#exampleModal"
>
  Launch demo modal
</button>

<script>
  function registroPropietario() {
const nomPropietario = $("#nombrePropietario").val()

if (nomPropietario === "") {
  alert("El nombre es obligatorio")
} else {
  alert("Es valido")
  $("#exampleModal").modal("hide")
}
  }
</script>

<!-- Modal -->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button
      type="button"
      class="close"
      data-dismiss="modal"
      aria-label="Close"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="col">
      <div class="form-group">
        <label for="nombre">Nombre</label>
        <input
          type="text"
          class="form-control"
          id="nombrePropietario"
          placeholder="Nombre"
        />
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger" data-dismiss="modal">
      Cancelar <i class="fas fa-times"></i>
    </button>
    <button
      type="button"
      class="btn btn-primary"
      id="idGuardarPropietario"
      onclick="registroPropietario() "
    >
      Guardar <i class="fas fa-save"></i>
    </button>
  </div>
</div>
  </div>
</div>

<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
  crossorigin="anonymous"
></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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
  integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
  crossorigin="anonymous"
></script>

1
  • Muchas gracias.. funciono Commented el 9 oct. 2019 a las 19:27

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.