aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes validation and ajax woes Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "validation and ajax woes" Watch "validation and ajax woes" New topic
Author

validation and ajax woes

J. Kevin Robbins
Bartender

Joined: Dec 16, 2010
Posts: 1038
    
  13

I'm using the validation plugin and the form plugin, but I can't seem to get them to play nice together. The validation side works fine, but I was unhappy with the basic post action so I decided to use ajax instead. The form plugin seemed like the way to go, but I'm ready to discard it and use the native jQuery ajax functions if I can't get this working.

The data should not be submitted until the validation has passed, but if I leave any field blank I get the validation error as expected, but the data is also submitted resulting in a 500 error because it tries to parse an empty string. I don't understand why the ajaxSubmit function is being called when it's in the submitHandler. The "return false" in the submit handler should prevent the default submit action. Can anyone see where the problem is?


"The good news about computers is that they do what you tell them to do. The bad news is that they do what you tell them to do." -- Ted Nelson
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61601
    
  67

Is the submit handler actually being called? Or is the form submitting as normal?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61601
    
  67

One problem that I so see is that you are calling both ajaxForm and ajaxSubmit not he same form. One or the other; not both. I don't think it's the source of your problems, but it is not something you should do.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61601
    
  67

It also appears that you placed your submitHandler in the rules object? oops.
J. Kevin Robbins
Bartender

Joined: Dec 16, 2010
Posts: 1038
    
  13

Interesting that you ask about that. I just added this code...



...and I never get the alert box. But I've looked at the examples for both plugins and I can't figure out what I've got wrong. The examples still define "action" and "method" attributes for the form and they use "type=submit" for the button. I'm used to using a standard (non-submit) button and then acting on the click event but that's not how these plugins work. Puzzling...

I wonder if the submitHandler needs to be defined before the rules....seems like a stretch, but I'll give it a try.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61601
    
  67

I wonder if the submitHandler needs to be defined before the rules....seems like a stretch, but I'll give it a try.

No. But it doesn't need to be defined inside the rules! Did you not read my replies?
J. Kevin Robbins
Bartender

Joined: Dec 16, 2010
Posts: 1038
    
  13

Bear Bibeault wrote:It also appears that you placed your submitHandler in the rules object? oops.


Crap! I'll bet that's the problem. I'll let you know after I've fixed those last couple of points you made.

J. Kevin Robbins
Bartender

Joined: Dec 16, 2010
Posts: 1038
    
  13

Now it looks like this:


If I complete all the fields, the data is posted properly and I get the two alert boxes (lines 5 and 28). But if I leave a field blank, I get a server error and no alert boxes. That tells me that the default submit action is still taking place. I guess I need to do some more digging in the validation docs because it says this about submitHandler:

"Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated."

But it doesn't seem to be working that way. Maybe there's another option that I've overlooked to disable the default submit. Back to the documentation...



Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61601
    
  67

You still haven't fixed the redundant calls to ajaxForm and ajaxSubmit. Please read my replies. Otherwise, you are wasting my time and yours.

Also, I use this validation plugin successfully all the time. Fix the above problem just in case its causing the issue so that we can eliminate it as a possible problem.
J. Kevin Robbins
Bartender

Joined: Dec 16, 2010
Posts: 1038
    
  13

I don't understand. I thought you were referring to the fact that I wasn't using a jQuery selector on the call to ajaxSubmit, so I changed that. Perhaps I misunderstand the docs.

"ajaxForm - Prepares a form to be submitted via AJAX by adding all of the necessary event listeners. It does not submit the form. Use ajaxForm in your document's ready function to prepare your form(s) for AJAX submission."

"ajaxSubmit - Immediately submits the form via AJAX. In the most common use case this is invoked in response to the user clicking a submit button on the form."

To me this does not sound like they are redundant, but rather that both are required. I'm not trying to waste your time and I apologize for trying your patience. This is the first time I've used either of these plugins and obviously my lack of experience is showing. Can you provide a bit more guidance on how this code should be changed?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61601
    
  67

No. You use either or the other.

ajaxForm is used to re-instrument the form so that when it is submitted through normal channels that it goes through Ajax instead.

ajaxSubmit is used when you want to submit the form via code through Ajax.

Your call to ajaxForm is redundant and unnecessary. Remove it.

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61601
    
  67

It's also time to stop using alerts for debugging.

Enable the JavaScript console and use console.log() to issue debug log messages.
J. Kevin Robbins
Bartender

Joined: Dec 16, 2010
Posts: 1038
    
  13

That did the trick. Many thanks.

I still feel like the docs for the form plugin are rather obtuse. It's not clear that the two functions are mutually exclusive, but hey, live and learn.

And thanks for the tip about console.log().
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61601
    
  67

 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: validation and ajax woes