1

tengo un formulario en html el cual cuenta con un evento "Onsubmit", este me permite detener el envió del formulario y me muestra una alerta de confirmación:

El Form:

Dentro del Form cuento con un input para ingresar un numero telefónico, lo que quiero saber es si es posible crear una condicion if, para que cuando el input se encuentre vacio, el evento Onsubmit no se ejecute y que por otro lado cuando al input le ingresen el numero telefonico, el evento Onsubmit si se ejecute

<form name="Formulario" id="form" action="/notes/new-note" method="POST" onsubmit="return enviar()">
    <div class="newreport mb-3">
      <label for="area">Área:</label>
      <input
        type="text"
        name="area"
        class="color-back form-control"
        placeholder="Área"
        autofocus
      />
    </div>
 
    <div class="newreport mb-3">
      <label for="nombre">Nombre:</label>
      <input
        type="text"
        name="nombre"
        class="color-back form-control"
        placeholder="Nombre"           
      />
    </div>

    <div class="newreport mb-3">
      <label for="asunto">Asunto:</label>
      <input
        type="text"
        name="asunto"
        class="color-back form-control"
        placeholder="Asunto"
        autofocus
      />
    </div>

    <div  class="newreport mb-3">
      <label for="prioridad">Prioridad:</label>
      <select 
        onchange="cambio(this)"
        type="text"
        name="prioridad"
        class="color-back cambio-color form-control"
        placeholder="Prioridad"
        autofocus>
        <option value="Elegir opcion">Elige una opción</option>
        <option value="Alta">Alta</option>
        <option value="Media">Media</option>
        <option value="Baja">Baja</option>
      </select>
    </div>

    <div class="newreport mb-3">
      <label for="mensaje">Mensaje:</label>
      <textarea
        onchange="cambio(this)"
        name="mensaje"
        class="color-back form-control"
        placeholder="Mensaje"
      ></textarea>
    </div>

    <div class="newreport mb-3">
      <label for="smsnumber">Telefono:</label>
      <p class="aviso">Solo llenarse en caso de querer enviar el campo de arriba como un mensaje de texto</p>
      <input
        id="target"
        name="smsnumber"
        class="color-back form-control"
        placeholder="Numero telefonico"
      ></input>
    </div>

    <div class="newreport mb-3">
      <label for="fecha">Fecha:</label>
      <input
        type="date"
        name="fecha"
        class="color-back form-control"
        placeholder="Fecha"
        autofocus
      />
    </div>

    <input class="btn btn-primary w-100" type="submit" value="Enviar">

  </form>

Mi función del evento Onsubmit:

<script>

  function enviar(){
      event.preventDefault();

          Swal.fire({
          title: '¿Desea enviar un mensaje sms?',
          type: 'warning',
          showCancelButton: true,
          confirmButtonText: 'Si',
          cancelButtonText: "No",
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
        }).then((result) => {
          if (result.value) {
          document.Formulario.submit();
          }
          return false;
        })
      }
</script>
4
  • el return false; bájalo una línea y te debería resultar
    – Yussef
    Commented el 28 sept. 2022 a las 20:38
  • Gracias ya lo intente, pero al momento de ingresar el numero al input, la alerta ya no me aparece Commented el 28 sept. 2022 a las 20:52
  • Perdón entendí otra cosa. Pone onsubmit="return target.value.length >0 && enviar()"
    – Yussef
    Commented el 28 sept. 2022 a las 20:58
  • Gracias, ya funciono Commented el 29 sept. 2022 a las 3:26

1 respuesta 1

0

Para lograr lo que quieres hacer creo que la mejor opción es simplemente validar la información que ingresó el usuario dentro del evento submit, sería algo como esto:

(function() {
  // capturar elemento formulario
  var form = document.getElementById('form');

  // agregar evento submit
  form.addEventListener('submit', function(e) {
    // prevenir envío del formulario
    e.preventDefault();
    
    // obtener la información ingresada en los campos del formulario
    // (para esto los elementos deben tener el atributo "name").
    var data = Object.fromEntries(new FormData(e.target).entries());
    
    // validar input del usuario
    var phone = data.phone.trim();
    // (en este ejemplo uso un regular expression):
    // https://stackoverflow.com/questions/4338267/validate-phone-number-with-javascript
    var phoneRegex = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/i;
    var isValidPhone = phoneRegex.test(phone);
    var isValidForm = isValidPhone;

    if (isValidForm) {
      // ejecutar acción cuando el formulario esta bien
      alert('Form submitted successfuly');
    } else {
      // notificar errores en el formulario
      alert('Invalid information entered');
    }
  });
})();
<!-- remover "onsubmit" y agregar el evento desde Javascript -->
<form id="form">
  <!-- agregar atributo "name" a los elementos del formulario: -->
  <input type="text"
         name="phone" 
         value="(123) 456-7890" 
         placeholder="Enter your phone number" 
         size="25" />
  <button type="submit">Send</button>
</form>

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.