Problem with empty Ajax!

3

I have a form in which there is a textArea. This form is validated first by Ajax to check if the texArea text is large enough and after this, it is validated in the controller action for the rest of the data.

Well, the first time I submit, the textArea text arrives empty and the validator that is done by ajax gives an error, but if I do it again I submit without touching anything, the text does arrive well and it Validate everything perfect.

Code in the form that calls the JS function

$this->getView()->JQReady('
        $("form").submit(function(event) {
            if (!js.Form.validate($(this), "item/validate")) {
                event.preventDefault();
                event.stopImmediatePropagation();             
            }
        });
    ');

JS code

validate: function(form, urlValidate) {

    var datastring = form.serialize();
    var returnValue = false;

    $.ajax({
        async: false,
        type: "POST",
        url: urlValidate,
        data: datastring,
        dataType: "json",
        success: function(data) {
            var request = JSON.parse(data);
            if (!request.valid) {
                if (request.exception) {
                    if (request.exception) {
                        form.unbind("submit").submit();
                    }
                    returnValue = true;
                } else {
                    printFormErrors(form, request.errors);
                    restoreSubmitButtonItem();
                }
            } else {

                returnValue = true;
            }
        },
        error: function(data) {
            form.unbind("submit").submit();
            returnValue = true;
            restoreSubmitButtonItem();
        }
    });

    return returnValue;
}

Only one isValid is done in the controller. Any ideas?

    
asked by davidplpz 30.08.2016 в 15:33
source

1 answer

1

Personally I prefer to do validations in php, remember that by inspecting the source code of the web page you can edit it and skip any security or javascript limitations that you program.

Anyway I think that this code in JQUERY would serve you:

Form:

    <form>
    <p>
        <textarea name="mensaje"></textarea><br>
        <small>Caracteres necesarios: <b id="total">50</b></small>
    </p>
    <button>Enviar</button>
</form>

Javascript:

$(function(){   

var caracteres_ingresados = 0;
var caracteres_necesarios = 50;

$('textarea[name="mensaje"]').keyup(function(){
    caracteres_necesarios = 50;
    caracteres_ingresados = $(this).val().length;
    caracteres_necesarios = parseInt(caracteres_necesarios) - parseInt(caracteres_ingresados);
    $('#total').html(caracteres_necesarios);
});

$('form').submit(function( event ){
    event.preventDefault();
    if(caracteres_ingresados >= 50){
        alert("Ok");
        /*
            CODIGO AJAX
        */
    }else{
        alert("Faltan "+caracteres_necesarios+" caracteres por ingresar");
    }
});});

Try it and tell me if it works ...

    
answered by 01.09.2016 / 04:52
source