8

tengo un formulario y en este tengo dos INPUTS, estos son obligatorios asi que uso la propiedad de HTML5 REQUIRED pero solo funciona si coloco un BUTTON y este hace que mi pagina se recargue al hacer submit pero yo no lo envio directamente sino que uso Ajax, y pues deseo validarlos para eso he usado:

   <form>
   <input type="text" id="dato1" required>
   <input type="text" id="dato2" required>
   <input type="button" id="boton" value="enviar" onclick="mifuncion()">
   </form>

pero esto no me valida el formulario con HTML5 usando REQUIRED si uso BUTTON se recarga la pagina y pierdo la informacion cargado con AJAX

   <button onclick="mifuncion()">Enviar </button>

Lo que quiero lograr es la validacion que tengo el BUTTON pero que no se me recargue la pagina

4 respuestas 4

7

Buenas noches, si lo que buscas es que al presionar el boton se ejecute tu ajax en vez del submit de el form, debes sobreescribir mediante ajax la funcion del submit:

<script type="text/javascript">
    $(document).ready(function () {
        $("#boton").submit(function (event) {

            // Aqui evitamos que el formulario haga el submit
            event.preventDefault();

            // Get Asignamos valores para enviarlos mediante ajax:

            var posting = $.post('source/login.php', {
                user: $("#inputEmail").val(), // valor de input, aqui puedes hacer tus validaciones
                pass: $("#inputPassword").val()
            });
            posting.done(function (data) {
                if (data == "Success") { // Respuesta de tu archivo php
                    window.location.href = "menu.php";
                }
                else {
                    alert("El usuario o contrasena es incorrecto");
                    location.reload();
                }
            });
        });

    });
</script>
4

Para enviar un formulario por AJAX en primer lugar se debe prevenir la acción por defecto (envío con recarga de documento). Esto se hace mediante la función preventDefault de Event. Este método previene la acción por defecto que se realiza en un evento para poder personalizar este comportamiento.

$('form').on('submit', function (e) {
  e.preventDefault(); // se previene la acción por defecto
  
  // realizar petición AJAX
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
   <input type="text" id="dato1" required>
   <input type="text" id="dato2" required>
   <input type="submit" id="boton" value="enviar">
</form>

HTML5 te propone también usar validaciones personalizadas por medio del atributo pattern el cual acepta expresiones regulares y si quieres validar un formulario de forma programática, puedes usar la función checkValidity para cada control.

4

Podrías hacerlo usando:

  • event.preventDefault(): Cancela el evento si este es cancelable, sin detener el resto del funcionamiento del evento, es decir, puede ser llamado de nuevo.

  • element.checkValidity(): Método comprueba si el elemento tiene restricciones y si las satisface.

Modificaciones:

  • Para poder usar preventDefault, la función mifuncion debe recibir por parámetro el objecto event. Al asignarl la función en el evento onclick de button, has de pasarlo. Ejemplo:

    onclick="mifuncion(event)"
    
  • Para comprobar si el form es válido, o no, has de usar form.checkValidity().

Demo:

var form = document.getElementById('form');
function mifuncion(event) {
  // Evitamos que el formulario se envíe
  event.preventDefault();
  
  // Si el form no es valido
  if (!form.checkValidity()) {
    console.log('Nop');
    return false;
  }
  
  console.log('Sip');
  // Tu código AJAX!
}
<form id="form">
  <input type="text" id="dato1" required>
  <input type="text" id="dato2" required>
  <button onclick="mifuncion(event)">Enviar</button>
</form>

1

Tal como lo nombraron antes, lo que debes hacer es que al momento de enviar el formulario submit detiene el evento de envío y analiza los campos, según tu requerimiento.

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#formulario').on('submit', function (e) {
       e.preventDefault();

       var dataForm = jQuery(this).serializeArray();
       // Valida los Campos

       // Envía por ajax el formulario
       var request = jQuery.ajax({
         url: '/url/',
         type: 'POST',
         dataType: 'json',
         data: dataForm
       });

       request.done(function (response) {
         console.log('done');
       });

       request.fail(function (jqXHR, textStatus) {
         console.log('error');
       });
     });
});
</script>

Saludos,

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.