Formularvalidierung - Blättern Sie über das Eingabefeld

Question

Ich erstelle ein Anfrageformular mit erforderlichen Feldern. Wenn der Benutzer die Senden-Schaltfläche drückt, wird eine Liste von Fehlern angezeigt, die der Benutzer korrigieren kann. Diese Liste besteht aus Etiketten, die sich auf die erforderlichen Felder beziehen. Wenn der Benutzer auf sie klickt, werden sie zum entsprechenden Eingabefeld geleitet. Der Bildlauf stoppt am Eingabefeld und zeigt nicht die tatsächliche Beschriftung des Eingangs an.

Wie mache ich es so, wenn der Benutzer die Fehlereingabe auswählt, scrollt die Website nach oben, um die Labeleingabe einzuschließen?

Danke :)

Answer 1

Sie müssen nur etwas von dem des Elements versetzt oben subtrahieren Sie wnat zum Beispiel blättern

$(".error-massage").click(function(){ 
    var l = $(this).attr("data-label"); 
    top_Offset = $("*[label='" + l +"']").offset().top; 
    $(window).scrollTop(top_Offset - 100 + "px") 
}) 

Sie Massage Liste Fehler bedenkt ist wie

<ul> 
<li class="error-massage" data-label="name">invalid name </li> 
<li class="error-massage" data-label="pass">invalid pass</li> 
<li class="error-massage" data-label="somthing">invalid somthing</li> 
</ul> 

Answer 2

Schließen Sie einen Anker an die ID des betreffenden ungültigen Eingangs an.

<ul> 
 
<li class="error-massage"> 
 
    <a href="#input-name">invalid name</a> 
 
</li> 
 
<li class="error-massage"> 
 
    <a href="#input-pass">invalid pass</a> 
 
</li> 
 
<li class="error-massage"> 
 
    <a href="#input-something">invalid something</a> 
 
</li> 
 
</ul>

Kein JS benötigt.