Check fields when giving submit and case error return to field

Question

Check fields when giving submit and case error return to field

Navigation

#1 by (2 votes)
#2 by (2 votes)

3

I have a very extensive form and I would like to click submit and the field is in error, that the page can scroll (jQuery) to this field so that the person knows exactly what has error. I started like this:

$("#sdEmpresa").removeClass("hidden").css("border", "1px dashed red");

So I managed to streamline this:

if(empresa == ""){

        // callback method use this space how you like
        var body = $("html, body");
        body.animate({scrollTop:0}, 1500, function(){
            $("#sdEmpresa").removeClass("hidden").css("border", "1px dashed red");  
        });

}

Here it goes back to the body, how to go back to #sdEmpresa ?

php javascript html jquery ajax

asked by anonymous 13.08.2014 / 04:13

2 answers

2

Assuming you want to go to element #sdEmpresa

if(empresa == ""){
    $('html, body').animate({
       scrollTop: $("#sdEmpresa").offset().top
    }, 1500);  
}

But I think you should think of a way to optimize this validation by using a plugin, or scroll through all% of the page at once, instead of testing one by one as you showed in the example: <inputs> .

13.08.2014 / 06:20

It is possible to create image thumbnails with pure Node.js How to randomly shuffle an Array in Ruby?

score 2 · Accepted Answer

Below is a short example: jsfiddle

jquery:

$("form").submit(function (event) {
    event.preventDefault();
    var erro = false;
    var elemento;

    // limpar marcação de erro da tentativa anterior:
    $('form div').removeClass('erro');
    $('.msg-erro').remove();

    // percorrer todos os input e verificar se estão em branco ou não
    $(this).find('input:not(.nao-obrigatorio)').each(function () {
        if ($(this).val() == '') {
            erro = true;
            elemento = $(this);
            return false;
        }
    });

    // aqui pode adicionar outras verificações especificas como combos ou checkbox.
    // definir erro = true e elemento = ao elemento causador do erro.

    if (erro == true) {
        elemento.parent('div').addClass('erro').append((elemento.data('erro') ? '<span class="msg-erro">'+elemento.data('erro')+'</span>' : ''));
        $('html, body').animate({ scrollTop: elemento.offset().top - 100 }, 500);
    } else {
        // não tem nenhum erro, fazer os procedimentos de envio
        alert('Formulario enviado!');
    }
});

HTML:

<form>
    <div>
        <label for="name">* Nome</label>
        <input type="text" id="nome" data-erro="Preencha seu nome">
    </div>
    <div>
        <label for="name">* E-mail</label>
        <input type="text" id="email" data-erro="Preencha seu e-mail">
    </div>
    <div>
        <label for="name">Telefone</label>
        <input type="text" id="telefone" class="nao-obrigatorio">
    </div>
    <div>
        <label for="name">Celular</label>
        <input type="text" id="email" class="nao-obrigatorio">
    </div>
    <div>
        <label for="name">* Endereco</label>
        <input type="text" id="endereco">
    </div>
    <div>
        <label for="name">* Cidade</label>
        <input type="text" id="cidade">
    </div>
    <div>
        <label for="name">* Estado</label>
        <input type="text" id="estado">
    </div>
    <div>
        <label for="name">* Pais</label>
        <input type="text" id="Pais">
    </div>
    <input type="submit" value="Submit">
</form>