borrão jQueryUI incêndios datepicker de entrada antes de passar a data, evite / solução alternativa?

Question

Eu tenho alguma validação em uma entrada de texto vinculado a seu evento de borrão. Eu tenho um datepicker neste campo (a versão de jQueryUI), então quando você clique no campo, datepicker mostra-se, em seguida, clique em uma data e ele preenche a data no campo como datepicker faz. No entanto, logo antes da data é inserida parece que o campo de entrada recebe o borrão disparado por algum motivo. Parece que o foco vai para longe da entrada antes da data é preenchido. Assim, a minha validação é acionado logo no momento em que o usuário seleciona uma data, antes da data realmente faz o seu caminho para o campo, quando não deveria. Ele deve ser executado após a data é colocado em. Alguém sabe por que o borrão é está acontecendo naquele momento ou como trabalhar em torno dele?

Answer 1

Quando o usuário clica fora do campo de entrada (para selecionar uma data), o campo de entrada vai borrar. Não há nenhuma maneira em torno disso. Assim, em vez de desencadear a validação em borrão, use callback onSelect do datepicker.

$('.selector').datepicker({
    onSelect: function(dateText) { /* validation here */ }
});

Se você quiser manter seus onblur-eventos, você poderia adiar a validação para permitir o datepicker para preencher o campo antes que os fogos de validação, como este:

$('#myform input').blur(function () {
    setTimeout(function () { /* validation here */ }, 1);
});

Usando setTimeout para lidar com simultaneidade questões pode parecer um hack, mas devido a JavaScripts natureza single-threaded, ele funciona muito bem. John Resig de negociações jQuery-fama sobre ele em este blogpost .

Answer 2

Você pode tentar o seguinte:

$(".date-pick").datepicker({
...
onSelect: function() {
this.focus();
},
onClose: function() {
this.blur();
}
...

Answer 3

Eu encontrei a única maneira de obter consistentemente tanto o teclado e o selecionador de alguns eventos de trabalho foi com o seguinte código:

 $(".date-picker")
            .datepicker("option", "onSelect", function (dateText, inst) {
                // User Method
            })
            .change(function () {
                // User Method
            });

O problema com o uso apenas o evento de borrão é que (ao selecionar) o datepicker aciona o evento borrão na entrada antes que o valor foi passado para ele.

Answer 4

Magnars resposta acima é muito bom. Só para lhe dar mais algumas informações para progênie aqui também é uma abordagem que funciona bem com os quadros de validação que fazer a validação em borrão. Na verdade, estou liberando o evento borrão que foi criada pela validação on / pageload document.ready (bastante padrão comum para validação), e depois colocá-lo novamente na opção datepicker OnClose. O evento datepicker perto aparentemente acontece depois datepicker passou a informação para o campo, por isso é ok para a validação borrão para executar naquele ponto. Desta forma, eu não tenho que fazer nada especial para o campo no próprio código de validação. Qualquer abordagem é provavelmente aplicável a tudo o que alguém está fazendo, se eles se deparar com isso.

$('#datefield').datepicker(
{beforeShow: function(input) {
                             $(input).unbind('blur');
             },
 onClose: function(dateText, inst) {
                             $(this).validationEngine();this.focus();this.blur() }
});

(No meu quadro '.validationEngine ()' é o que registra os manipuladores de validação)

Answer 5

Batendo esta discussão, porque eu tinha alguma dificuldade com a solução aceite.

Eu achei mais fácil de gatilho 'mudança' evento quando da 'onClose' datepicker evento é acionado. Isso garante que evento de alteração do elemento de entrada dispara sempre:

$('#my_element').datepicker({
    onClose: function() {
        $(this).trigger('change');
    }
});

Isso pode parecer bobagem, porque ele vai disparar nos momentos em que nada foi alterado. No entanto, ele funciona de forma mais confiável do que de datepicker 'onSelect' e me ajudou a evitar problemas com focusOut ou borrão ignições, antes dos eventos datepicker.

Answer 6

Crie o seu evento personalizado em jQuery e vinculá-lo a caixa de texto. Após esse gatilho do evento no evento onClose de datepicker. Por que, se você se mover para fora da caixa de texto, em seguida, costume evento será demitido.

$("inputText").bind('CustomEventName',function(){//your validate method code});

e na Datepicker

$("#inputText").datePicker({onClose:function(){ $(this).trigger('CustomEventName')});

Answer 7

Eu tive o mesmo problema que você, e a resposta de Magnar ajudou, mas não respondeu completamente o problema.

Você identificou a causa subjacente. A ação do usuário interagir com os remove do calendário foco do campo de entrada. Este (no caso do jQuery validação discreto) fará com que o evento onBlur ao fogo, provocando a validação desse campo de entrada. Neste ponto, o valor ainda é o valor anterior, até algo que o usuário seleciona.

Assim, com base na resposta de Magnar ele afirma que você precisa re-validar o campo de entrada onChange do calendário. A maneira mais óbvia é a de $("form").valid() chamada, no entanto, este valida o formulário inteiro.

A melhor maneira é apenas para validar o campo de entrada ligada à selecionador de data, e você pode desencadear que, fazendo isso:

$('#myform input').blur(function () {
    var that = this;
    setTimeout(function () {
        $(that).trigger("focus").trigger("blur");
    }, 100);
});

Agora só o seu campo de entrada é validado, porque você falsificou o usuário clicar dentro e fora do campo de entrada.