Avoid submitting in a form

1

is that I have a form, and I need to avoid going through the submit if it does not meet certain conditions, this is my js.

 $(document).on('click', '.validar', function (event) {

            var parametros = {
                "User": {
                    "username": $("#UserUsername").val()
                }};
            $.ajax({
                url: '/Desarrollo/admin/users/validar',
                data: parametros,
                type: 'post',
                dataType: "json",
                success: function (response) {
                    if(response.error==true){
                        event.preventDefault();

                    } 
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR);
                }
            });
        });

If I put the event.preventdefault() at the beginning ps does not go through the submit but if I just want to stop it if the field already exists.

    
asked by Andrés Vélez 20.06.2018 в 18:56
source

3 answers

0

I use javascript for this, using the onsubmit event in the form tag, I recommend you do the same.

    <form method="POST" action="http://www.website.com/site" accept-charset="UTF-8" onsubmit="return miFuncion()">
        <input name="ruc" id="ruc" type="text">
        <input value="Click" type="submit">
    </form>

This is how you put the html code, and the javascript code makes the verifications you want, so it is not sent until it is validated.

    function miFuncion() {
        var pasavalidacion=false;
        if (pasavalidacion==false) return false; //si haces un return false no se enviara el formulario, caso contrario si haces un return true si se enviara
    }
    
answered by 20.06.2018 в 19:11
0

You have to stop the submit from the beginning because the ajax request is asynchronous which means that the form is sent before the ajax response arrives

One option would be to put the event.preventdefault() at the start (always stop sending the form) and upon receiving the response from the ajax request do the form submit manually with: $("#idDeTuFormulario").submit(); with the trigger submit from jquery

$(document).on('click', '.validar', function (event) {

    event.preventdefault(); // siempre detener el submit

    $.ajax({
        ...
        success: function (response) {
            if(response.error==true){
                // no hacer nada
            } else {
                // enviar formulario
                $("#idDeTuFormulario").submit();
            }
        }
        ...
    });
});
    
answered by 20.06.2018 в 20:47
0

First of all, you are capturing an event click for an element that has class .validar when a form can be sent in several ways (pressing the enter key for example) based on this, what you must do is to capture the evento submit of the form and second point that I have to tell you is that apparently your validating function is on the server (I do not understand the logic of this) so you must stop the submit of the form, use your validation on server and then if it happens re-execute the submit (if that's really how you want it)

an example code would be:

<form method="POST" action="/submit.php" onsubmit="funcionSubmit(event)">
    <input type="text">
    <input type="submit">
</form>

function funcionSubmit(event){
    // esta linea detiene la ejecucion del submit
    event.preventDefault();

    // tu funcion ajax
    $.ajax({
                url: '/Desarrollo/admin/users/validar',
                data: parametros,
                type: 'post',
                dataType: "json",
                success: function (response) {
                    if(response.error==true){
                        // si error es true no hacemos nada porque ya detuvimos el submit
                    } else {
                        // si no hubo error volvemos a llamar el submit
                        // aquí no se si lo que quieres es hacer el submit nativo o uno tuyo propio
                        // submit nativo
                        event.target.submit();
                        // un submit propio seria con una llamada ajax o algo por el estilo
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR);
                }
            });
}
    
answered by 20.06.2018 в 21:44