Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

validation messages not displaying the error messages in the HTML boxes

 
thethuy nguyen
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am relatively new to javascripting, and jQuery, but i am working on trying to use javascript validation to display an error in the inside my <span> </span> html. What I want to do is if the text box is blank, it shows the error message above the text box saying that "email cannot be blank" and it also shows an "*" next to where the error is. I have javascript imported that I am not displaying because it has doesn't concern what on this page. I get the error message to show up when the user clicks submit without any text in the input box, but the error message flasshes really quick and dissapears, I believe it is due tot he window.onload event. And it doesn't display the emailValidation error (The code is not displayed below) when the user inputs a invalid email address. I have tested the javascript using the alert(""); code and both validations work fine. This code is having a hard time displaying the errors after clicking submit. Help is much appreciated


This is my javascript code.


Here is my html portion

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64838
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
This construct makes no sense:
Why wold you put a ready handler inside a function that's used as the load handler?

The ready hander should be declared at the top level. It's whole purpose is to fire off before the unload handler is called. declaring it in this way makes sure that it will never be called at all.

Let's start with straightening that out before worrying about any other problems.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64838
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
And then, in your validate function, you don;t use jQuery at all! All of that code can be vastly simplified. If you are going to use jQuery, use jQuery.
 
thethuy nguyen
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am using the window.onload event for a set of html tags that i have below the form tags. I am new to both javascript and jQuery and i am trying to learn both ways (javascript and jQuery) of writing the same code for my own learning path. The window.onload event is in the <head></head> portion of my page,

this is my whole page:
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64838
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
thethuy nguyen wrote:I am using the window.onload event for a set of html tags that i have below the form tags. I am new to both javascript and jQuery and i am trying to learn both ways (javascript and jQuery)

That makes no sense either. jQuery is a JavaScript library. It's not JavaScript or jQuery.

In any case, you either use jQuery or you don't. As I already said, mixing a ready handler into an load handler won't work. Either use the ready handler or use the unload handler. Not both.

So if you are serious about wanting to learn and get things working, then start listening.

Do you want to do this with or without jQuery? If with use a ready handler. If without, use a load handler. No both.

So are you ready to get serious?
 
thethuy nguyen
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I will learn to write javascript first, my revise code is:
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64838
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
OK, lesson 1. There really isn't any need for the named function. It's only used once, so it doesn't really need a name.

This would be better written as:

OK, now is this doing what you want? Is it working?

And an even better question, why are you doing this in JavaScript rather than just creating a simple CSS rule?
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64838
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
P.S. For comparison, the same code using jQuery:



Now you can see why people use jQuery.
 
thethuy nguyen
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
modified, what about the validation errors?
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64838
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If you are having a problem, narrow down the the scope to where the problem is occurring. You'll get lots of help here, but you must do your own work as well.

At what point does the code do something different than you expect? What have you done to debug the difference? Are you using a JavaScript debugger? All modern browsers have built-in (or plugin) debuggers. If you're not familiar with them, that's your next step.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic