• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

validation messages not displaying the error messages in the HTML boxes

 
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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

 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I will learn to write javascript first, my revise code is:
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
modified, what about the validation errors?
 
Bear Bibeault
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
reply
    Bookmark Topic Watch Topic
  • New Topic