• 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 and ajax woes

 
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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?
 
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
Is the submit handler actually being called? Or is the form submitting as normal?
 
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
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
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
It also appears that you placed your submitHandler in the rules object? oops.
 
J. Kevin Robbins
Bartender
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
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

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
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
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
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
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
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
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
Posts: 1810
28
jQuery Netbeans IDE Eclipse IDE Firefox Browser MySQL Database Chrome Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
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
 
I’m tired of walking, and will rest for a minute and grow some wheels. This is the promise of this tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic