JavaScriptを使用してエラーを表示します。

配列で受け取った入力のリストを強調表示し、最初にフォーカスを移したいとします。 app.jsでJavaScriptを使用してエラーを表示します。

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

、私は、次のJavaScriptコードを配置：

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(); 
    } 
}

JSコードが実行されるが、ページがレンダリングされる前に。私はshowErrors関数を$(document).ready(function(){...}に入れようとしましたが、それでも効果はありませんでした。

ページのレンダリング後に適用できるように、コードを配置する必要はありますか？

出典

2017-01-10 Warrio

ページが表示されていないコードで動的に「ビルド」されている場合は、それ以降に行います。そうでなければ '$（document）.ready（function {）your code here ...} ） 'は –

を実行するのに適しているはずです。要素に' error-custom'クラスがある場合にのみ、その境界線を表示する必要がある場合は、cssに境界線を追加することを検討してください。 –

あなたは "app.js"と言います...あなたはjQuery以外のフレームワークを使っていますか？あなたのHTMLでjQueryが参照されることもありません。多くの人がそのステップを忘れています。 –

私のエラー、私は後にした入力フィールドをレンダリングする前にjavascript関数のshowErrorと呼ばれるということでした。

私は単にページの最後にコールを移動しました。

出典

2017-01-11 16:42:34 Warrio

$（document）.ready（function（）{} ...これはphpではないにもかかわらず、あなたのfields変数にpre-pending $がある理由を知らない

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>

出典

2017-01-10 23:28:04 pottedmeat7

JavaScriptを使用してエラーを表示します。

答えて

関連する問題