Validating form with onsubmit and javascript

Question

I’m having a little trouble validating a form I am using ajax to validate the fields

Problem onsubmit expects a boolean kind of feedback and I’m not getting that feedback

I put a counter inside the . done(Function(html)) but that counter only works within the same when I try to retrieve the counter value out of the . done(Function(html) it is zeroed follows my code

function validaFormALterar(acao) {
    var opc = acao;
    var erro = 0;

    var url = 'model/validarSenha.php';
    var Csenha = 'Csenha=' + $('#Csenha').val();

    var dados = Csenha;

    $.ajax({
        url: url,
        data: dados,
        cache: false
    }).done(function (html) {
        if (html == 'erro') {
            //não consigo pegar o valor desse ERRO fora do DONE
            erro++;
        }
    });

    //erro sempre chegando 0
    console.log("Erro nº " + erro);

    if(erro==0){
        return true;
    }
}

Answer 1

If you need to perform validation through an AJAX request, then set a callback function as a parameter in the method validaFormALterar.

function validaFormAlterar(acao, callback) {
  var opc = acao;
  var isValid = true;

  var url = 'model/validarSenha.php';

  var Csenha = 'Csenha=' + $('#Csenha').val();
  var dados = Csenha;

  $.ajax({
    url: url,
    data: dados,
    cache: false
  }).done(function (html) {
    if (html == 'erro') {
      isValid = false;
    }
    callback(isValid);
  });
}

The call to the method to validateTurn will be done as follows, passing a function that takes as parameter whether the validation was successful or not, this will be our callback function;

You must continue processing the page in the body of this function

validaFormAlterar("minha ação", function (isValid) {
  if (isValid) {
    //valido com sucesso
  } else {
    //ocorreu erros de validação.
  }
});

You can even turn the AJAX function into synchronous as suggested Yure Pereira, but I do not advise you to do this, as it is the main advantage of using an AJAX request.

Answer 2

Make a non-asynchronous ajax request, because when asynchronous the code flow continues to be interpreted even if the request has not yet returned the server response, thus making the function of the done is executed after the code block that is outside it, where you can’t get the error++.

function validaFormALterar(acao) {
  var opc = acao;
  var erro = 0;

  var url = 'model/validarSenha.php';

  var Csenha = 'Csenha=' + $('#Csenha').val();
  var dados = Csenha;

  $.ajax({
    url: url,
    data: dados,
    cache: false,
    async: false,
  }).done(function (html) {
    if (html == 'erro') {
      //não consigo pegar o valor desse ERRO fora do DONE
      erro++;
    }
  })
  //erro sempre chegando 0
  console.log("Erro nº " + erro);
  if(erro==0){
    return true;
  }

}