Hello folks, I have a JavaScript problem that is driving me a wee bit daft.

 

I am using a little script to check the contents of a text box i.e. if it is empty or not. I have it in a seperate file .js file.

 

The problem I have is that I cannot get it to work if I have declared the page as being XHTML strict.

 

If I remove the strict declaration at the top of the page, the script works fine, can somebody give me some help on how to get it working?!

 

I won't post all the code I have from the page, just the important bits.

 

Ok so I have a referenced where the .js file is in the head of the page :-

 

<script type="text/javascript" src="../js/validate.js"> </script>

 

and then on my form it looks like this :-

 

<form name="form1" method="post" action="addtodb.asp" onsubmit="return Check_Job_Card()">

<label for="Number">Number:</label>

<input type="text" name="Number" id="Number" />

</form>

 

Then in my script here is the fuction I am using :-

 

function Check_Job_Card()

{

if (form1.Number.value.length < 1)

{

// Build alert box message

mesg = "No Job Card Number entered!" + '\n' + "Please enter a Job Card number and try again."

alert(mesg);

// Place the cursor on the field for revision

form1.Number.focus();

// return false to stop further processing

return (false);

}

 

 

// If text_name is not null continue processing

return (true);

 

}

 

 

Any help would be great thanks!

Hello,

 

I created file with your code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Untitled</title>
</head>

<body>


<script type="text/javascript">
function Check_Job_Card()
{
if (document.form1.Number.value.length < 1)
{
// Build alert box message
mesg = "No Job Card Number entered!" + '\n' + "Please enter a Job Card number and try again."
alert(mesg);
// Place the cursor on the field for revision
form1.Number.focus();
// return false to stop further processing
return (false);
}


// If text_name is not null continue processing
return (true);

}

</script>



<form name="form1" method="post" action="addtodb.asp" onsubmit="return Check_Job_Card()">
<label for="Number">Number:</label>
<input type="text" name="Number" id="Number" />
<input type="submit" />
</form>



</body>
</html>

 

All that works.

Hi Lev, thanks for the reply. Couple of things though - when the error message flags up, the page still trys to process the form rather than exit the function and place the cursor in the text box ready for the user to try again.

 

Also, I really want to have the javascript code in a seperate file for a couple of reasons - I want to reuse the code on different pages, plus I wan't to keep the pages as small and as tidy as possible - that page for example will have about 5 or 6 text boxes for entry so I will need a bigger function to error trap them all, I was just using one here as an example as to what I'm trying to do.

when the error message flags up, the page still trys to process the form rather than exit the function and place the cursor in the text box ready for the user to try again.

Focus is really hard to regain when you're using alert boxes. The user would click the OK button and the browser would focus on that (because focus is set by either tabbing or clicking) rather than your form element. If you want to put the cursor in the form field, you're better off inserting the message into the DOM. Swap out your alert call with this little piece of code and you should find it works better.

// alert(mesg);
var p = document.createElement('p');
p.appendChild(document.createTextNode(mesg));
document.form1.insertBefore(p, document.form1.Number);