2017-01-10 3 views
0

Я хочу выделить список входных данных, полученных в массиве, и дать фокус первому из них.показать ошибки с помощью JavaScript

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

в app.js, я поставил следующий код: яваскрипта

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(){...}, но это все равно не повлияло.

Где я могу поместить код, чтобы я мог применить его после отображения страницы?

+1

Если страница «построена» динамически по коду, который вы не показывали, сделайте это после этого ... иначе '$ (document) .ready (function() {... ваш код здесь ...}) 'должно быть правильным местом для этого –

+1

, и вам следует рассмотреть возможность добавления границы в css, если эта граница должна быть только видна, когда элемент имеет класс' error-custom'. –

+0

Вы упоминаете «app.js» ... Используете ли вы какие-либо рамки помимо jQuery? Я также не вижу jQuery, на который ссылается ваш HTML; многие люди забывают этот шаг. –

ответ

0

моих ошибок было то, что я назвал яваскрипта функцию ShowError перед отображением полей ввода, которые были после.

Я просто перевел вызов в конце страницы.

1

похоже, что он работает с $ (document) .ready (function() {} ... не знаю, почему вы предварительно ожидаете $ переменной поля, хотя она ничего не делает, это не 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>

Смежные вопросы