2017-01-10 5 views
0

Ich möchte eine Liste der in einem Array empfangenen Eingabe markieren und den Fokus auf den ersten von ihnen legen.Fehler mit JavaScript anzeigen

<head> 
<script type='text/javascript' src='app.js'></script> 
</head> 
<body> 
    ... 
    <script>showErrors(['firstName', 'lastName'])</script> 
</body> 

in app.js, habe ich den folgenden JavaScript-Code:

function showErrors($fields) 
{ 
    $fields.forEach(function($field){ 
     console.log($field); 
     $('#'+$field).addClass('error-custom'); 
     $('#'+$field).css('border', 'red solid 2px'); 
    }); 

    //set focus to first field 
    if($fields.length > 0) 
    { 
     $('#'+$fields[0]).focus(); 
    } 
} 

Der JS-Code ausgeführt wird, aber bevor die Seite gerendert wird. Ich habe versucht, die Funktion showErrors in $(document).ready(function(){...} zu setzen, aber es hatte immer noch keinen Effekt.

Wo sollte ich den Code platzieren, damit ich anwenden kann, nachdem die Seite gerendert wurde?

+1

Wenn die Seite dynamisch von Code erstellt wird, den Sie nicht angezeigt haben, dann machen Sie danach ... sonst '$ (document) .ready (function() {... Ihr Code hier ...}) 'sollte der richtige Ort sein, um es zu tun –

+1

und Sie sollten überlegen, einen Rahmen in CSS hinzuzufügen, wenn dieser Rahmen nur sichtbar sein sollte, wenn das Element die' error-custom' Klasse hat. –

+0

Sie erwähnen "app.js" ... Verwenden Sie irgendeine Art von Framework neben jQuery? Ich sehe auch nicht, dass jQuery in Ihrem HTML-Code referenziert wird. viele Leute vergessen diesen Schritt. –

Antwort

0

mein Fehler war, dass ich die JavaScript-Funktion Error-vor dem Rendern die Eingabefelder genannt, die nach waren.

Ich habe den Anruf einfach am Ende der Seite verschoben.

1

sieht aus wie es funktioniert mit $ (document) .ready (function() {} ... weiß nicht, warum Sie $ an Ihre Felder Variable vorausgehend sind, obwohl es nichts tut das ist nicht php;)

function showErrors($fields) 
 
{ 
 
\t $fields.forEach(function($field){ 
 
\t \t console.log($field); 
 
\t \t $('#'+$field).addClass('error-custom'); 
 
\t \t $('#'+$field).css('border', 'red solid 2px'); 
 
\t }); 
 
\t 
 
\t //set focus to first field 
 
\t if($fields.length > 0) 
 
\t { 
 
\t \t $('#'+$fields[0]).focus(); 
 
\t } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<head> 
 
<script type='text/javascript' src='app.js'></script> 
 
</head> 
 
<body> 
 
    <input type="text" id="firstName"/> 
 
    <input type="text" id="lastName" /> 
 
    <script>$(document).ready(function(){showErrors(['firstName', 'lastName']);});</script> 
 
</body>