JQuery-afhandeling van mobiele formulierreacties

I have a simple registration form using jQuery mobile & jquery-validate.

Als de gebruiker een juiste gebruikersnaam en wachtwoord invoert, leid ik deze door naar zijn dashboard. Als ze een veld missen, wordt het door de client-side-validatie opgehaald.

Mijn probleem is wanneer de serverzijdige validatie de gebruikersregistratie afwijst. De gebruikersnaam is bijvoorbeeld helemaal klaar voor gebruik.

In dit geval geef ik de pagina op de server een foutmelding.

Aan de clientzijde zie ik de oorspronkelijke paginaovergang en de nieuwe paginaovergang in. Op de nieuwe pagina wordt het foutbericht correct weergegeven. Hoe dan ook heeft mijn script om de validatie van de clientzijde te initiëren geen effect.

Mijn gok is dat er op hetzelfde moment twee elementen met hetzelfde ID op de pagina zijn. Dus de oude krijgt de validatierun weer en wordt vervolgens overgezet.

Hoe ga ik hiermee om?

Hier is het script

$('#registerPage').live('pagecreate', function (event) {
    $("#registerForm").validate({
        rules: {
            username: "required",
            password: "required",
            confirmPassword: {
                required: true,
                equalTo: "#password"
            }
        }
    });
});
0

1 antwoord

Dit is opgelost door de nieuwe pagina te gebruiken als context voor de validatieselector.

var rps = rps || {};
rps.register = rps.register || {};
rps.register.validate = function (context) {
    $("#registerForm", context).validate({
        rules: {
            username: "required",
            password: "required",
            confirmPassword: {
                required: true,
                equalTo: "#password"
            }
        }
    });
};

$(document).on('pageshow', '#registerPage', null, function (event, ui) { rps.register.validate(); });
$(document).on('pagehide', '#registerPage', null, function (event, ui) { rps.register.validate(ui.nextPage); });
1
toegevoegd