Fehlerklasse nach einigen Sekunden verschwinden lassen - (Fundament-Schienen)

Mit Fundamentschienen habe ich ein Formular erstellt und <small class="error">Invalid entry</small> verwendet, um die Fehler unter den Feldern anzuzeigen.Fehlerklasse nach einigen Sekunden verschwinden lassen - (Fundament-Schienen)

zum Beispiel in einem div:

<%= text_field_tag "email", "", placeholder: "Email", required: true, type: "email", pattern: "email" %> 
<small class="error error-style">Invalid</small>

Fehler-Stil ist eine Klasse, die ich verwendet habe das CSS-Styling zu tun.

Wenn ein Benutzer beginnt, das Formular zu füllen, und eine ungültige E-Mail z. B. füllt. ohne @, wird der Fehler angezeigt. Aber es bleibt dort. Ich möchte, dass es nach etwa 5 Sekunden in den "versteckten" Zustand wechselt, wenn der Benutzer sich entschieden hat, das Formular nicht zu füllen, sondern immer noch die Seite durchsucht.

Versucht mit SetTimeout und Fadeout().

Irgendwelche Hilfe?

Quelle

2016-08-23 smanvi12

Was ist passiert, wenn Sie die beiden genannten Methoden verwendet haben? Bitte zeigen Sie Ihren Code – margo

Ich habe versucht, etwas ähnlich wie die Antwort von Navin unten gegeben. Was passiert, wird im Kommentar erklärt. Bitte guck dir das an. – smanvi12

die Sie interessieren,

$(function() { 
    setTimeout(function(){ 
    $('.error').slideUp(3000); 
    }, 3500); 
});

Quelle

2016-08-23 10:32:26 Navin

Ich habe dies schon einmal versucht, aber was passiert ist - es rutscht nach der Dauer 3000. Aber beim Laden der Seite Zeit ist der Fehler bereits im versteckten Zustand (Grundeinstellung). Es rutscht nach oben hat keinen Effekt was auch immer. Standardmäßig macht Foundation den Fehler nur sichtbar, wenn der Benutzer etwas falsch eingibt. Ich brauche es, um 3-4 Sekunden nach oben zu rutschen, wenn es sichtbar ist. – smanvi12

ein Fehlerelement während Frontend Validierung Um zu zeigen und zu entfernen, sollten Sie die ‚Änderung‘ Ereignis verwenden. Geben Sie dem Fehlerelement zunächst eine Versteckklasse, auf der es keine Anzeige gibt, und ändern Sie sie dann mit dem Änderungsereignis. Das folgende Beispiel verwendet addClass und removeClass, aber Sie könnten auch toggleClass verwenden.

<%= text_field_tag "email", "", placeholder: "Email", required: true, type: "email", pattern: "email", id: "email_input" %> 
<small class="error error-style hide">Invalid</small>

Javascript

function email_is_valid(email) { 
    var regex = /[A-Z0-9._%+-][email protected][A-Z0-9.-]+.[A-Z]{2,4}/; 
    return regex.test(email); 
} 

$('#email-input').on('change', function(event) { 
    $(this).find('.error').addClass('hide'); 
    var email = $(this).val(); 

    if (email_is_valid(email)){ 
    $(this).find('.error').removeClass('hide'); 
    } 
});

css

.hide{ 
    display: none; 
}

Ich habe eine ID mit dem Eingangselement hinzugefügt für eine einfache Ausrichtung wie ich weiß, Ihre vollständige Markup nicht; Vielleicht möchten Sie ändern, wie Sie auf dieses Element zielen. Ich habe auch nicht den oben genannten Regex getestet, es gibt viele Ressourcen online, wo Sie einen geeigneten finden können.

Quelle

2016-08-24 08:19:11 margo

Fehlerklasse nach einigen Sekunden verschwinden lassen - (Fundament-Schienen)

Antwort

Verwandte Themen