-1

So for a school project we had to make a page which had a form, a bunch of fields and a submit in html. The formatting was done in an external CSS file. Finally, we had to code some validation for the form in an external javascript file. So in the end, the page 'consisted of' 3 files.

One of the demands of validation was that a textfield that didn't meet the requirements would get a red border. I achieved this at first, when I was still working with all the javascript between script-tags in the original html file, by adding a class to my CSS file:

.error {
    border:2px solid red;
}

And adding it to the element concerned with javascript:

document.getElementById("naam").className = document.getElementById("naam").className + " error";

I used the following code to revert the changes once the field met the requirements (e.g. outside any if-tags)

document.getElementById("naam").className =     document.getElementById("naam").className.replace("     error", "");

Now, however, in order to meet the last requirement I moved all my javascript to a separate file, java.js, and linked to it in the html.

<script src="java.js"></script>

Everything works, except for the css alteration, and I can't really figure out how or why.

Whoop it IS working; I just didnt see it because it doesn't fit the page quite right (the elements that will recieve a red border are all at the top of the page, whereas the button is all the way at the bottom). Before though, the red border would stay untill the textfield met requirements. Now, it resets the page after all the alerts I set, before I get a chance to see they're red. So, I guess the real problem is that the page resets, it empties all textfields, en resets the css.

Jeffrey Blake
  • 9,659
  • 6
  • 43
  • 65
user2960794
  • 11
  • 1
  • Can you show a more complete view of your Javascript file? Also, where in the HTML (relative to the other HTML sections) do you have your ` – Jeffrey Blake Nov 06 '13 at 14:19
  • try this document.getElementById('primaryNav').setAttribute('class','error'); or document.getElementById('primaryNav').setAttribute('class',''); – Asif Nov 06 '13 at 14:26
  • Does `document.getElementById("naam")` actually resolve to an element or is it `undefined`? You're probably executing the code before the DOM has finished rendering. Wrap your code in a `DOMContentLoaded` handler or move your ` – André Dion Nov 06 '13 at 14:26
  • The script tag is in the header. I could show you a more complete version, but I'm afraid I don't know how. Just post it as a comment? – user2960794 Nov 06 '13 at 14:26
  • Moving the script tag to the bottom of the body didn't work:'-( I have no idea about any of the other thing you are saying, it's only a very shallow introduction to js. – user2960794 Nov 06 '13 at 14:28
  • @user2960794 Edit your question (there's an edit link just above the comments) and add the entire contents of the JavaScript file to it. – Anthony Grist Nov 06 '13 at 14:30
  • Whoop it IS working; I just didnt see it because it doesn't fit the page quite right (the elements that will recieve a red border are all at the top of the page, whereas the button is all the way at the bottom). Before though, the red border would stay untill the textfield met requirements. Now, it resets the page after all the alerts I set, before I get a chance to see they're red. – user2960794 Nov 06 '13 at 14:32

2 Answers2

0

You have to make sure the html-file can load the external javascript file. Did you place the external javascript file in the same folder as the html file? If not, you'll have to enter the correct relative path in the src-attribute.

Btw: You're talking about an external java file, but in fact what you're creating is an external javascript file. They are not the same! In the context of web applications, Java is a server side technology while JavaScript works client side.

gstandaert
  • 41
  • 3
  • If memory serves, Java can also run client side. – j08691 Nov 06 '13 at 14:22
  • Yes, the external js file is in the same folder. All the rest of the validation works, it's just the css editing that doesnt work since I moved everything to a seperate file. I know java and javascript aren't the same, was a little lazy ^^ – user2960794 Nov 06 '13 at 14:25
  • 1
    @j08691 Sure, Java can run client side, but it's not stored in a `.js` file. They said Java in the question when they definitely meant JavaScript. – Anthony Grist Nov 06 '13 at 14:29
  • @AnthonyGrist - I'm well aware of that. I was simply pointing out to gstandert that saying Java is only server side is incorrect. – j08691 Nov 06 '13 at 14:30
0

It sounds like the issue is that the page is reloading when you click submit. When that happens, any changes your javascript made to the CSS will be reset to the initial load state. Thus you are going to need to prevent that from happening in the case of an error.

See Want html form submit to do nothing for details.

Community
  • 1
  • 1
Jeffrey Blake
  • 9,659
  • 6
  • 43
  • 65