show errors using JavaScript

Question

I want to highlight a list of input received in an array and give the focus to the first of them.

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

in app.js, I put the following 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();
    }
}

The JS code is executed but before the page is rendered. I tried to put the function showErrors into $(document).ready(function(){...} but it still had no effect.

Where should I place the code so I can have apply after the page is rendered?

if the page is "built" dynamically by code that you haven't shown, do it after that ... otherwise $(document).ready(function(){ ...your code here...}) should be the right place to do it — Jaromanda X
– Jaromanda X, Commented Jan 10, 2017 at 23:06
and you should consider adding a border in css if that border should only be visible when the element has the error-custom class. — Dawid Zbiński
– Dawid Zbiński, Commented Jan 10, 2017 at 23:08
You mention "app.js"... Are you using any kind of framework besides jQuery? I also don't see jQuery referenced in your HTML; a lot of people forget that step. — Heretic Monkey
– Heretic Monkey, Commented Jan 10, 2017 at 23:27
@JaromandaX: I have put all the function showError($fields) inside the block $(document).ready(function(){showError($fields){...rest of code ..}}); when I open the page in Chrome, it shows the following error in the development tool: "Uncaught ReferenceError: showErrors is not defined" when I view the source Ctrl+U in chrome, the app.js is correct and when I click on its link, it shows my code. — Warrio
– Warrio, Commented Jan 10, 2017 at 23:42
@DawidZbiński: the class 'error-custom' highlits correctly and I tested in some other fields. @MikeMcCaughan: I've linked my page to jQuery but forgot to show it in this question like so <script type='text/javascript' src='http://localhost/crm/public/js/jquery.min.js'></script> — Warrio
– Warrio, Commented Jan 10, 2017 at 23:43

pottedmeat7 · Accepted Answer · 2017-01-10 23:36:50Z

1

looks like it works with $(document).ready(function(){ } ... don't know why you are pre-pending $ to your fields variable though it does nothing this isn't php ;)

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

<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>

edited Jan 10, 2017 at 23:36

answered Jan 10, 2017 at 23:28

pottedmeat7

781 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MRB · Accepted Answer · 2017-01-23 06:08:53Z

0

my errors was that I called the javascript function showError before rendering the input fields which were after.

I simply moved the call at the end of the page.

edited Jan 23, 2017 at 6:08

MRB

3,8224 gold badges32 silver badges45 bronze badges

answered Jan 11, 2017 at 16:42

Warrio

1,9335 gold badges29 silver badges47 bronze badges

Collectives™ on Stack Overflow

show errors using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related