I just got this working! Here's my final JS code. While the form
itself submits to "/search/result/keyword" as the default action,
validation is an entirely different "/search/validate/searchkeyword"
URL.
<script type="text/javascript">
Event.observe(window, 'load', function()
{
Event.observe('searchkeyword', 'submit', function(event)
{
Event.stop(event);
new Ajax.Request('/search/validate/searchkeyword',
{
method: 'post',
parameters: $('searchkeyword').serialize(true),
onSuccess: function(t)
{
var response = t.responseText || "ERROR|An error has
occurred.";
var responsearray = response.split('|');
if( responsearray[0] == 'ERROR' )
{ document.getElementById('searchkeywordvalidate').innerHTML =
responsearray[1]; }
else { $('searchkeyword').submit(); }
},
onFailure: function()
{ document.getElementById('searchkeywordvalidate').innerHTML = 'An
error has occurred.'; }
});
});
});
</script>
Thanks again.
- Matt
On Jun 16, 9:32 pm, Matt <[email protected]> wrote:
> Thanks. This is very helpful.
>
> What if I don't want any success text returned? This is for a search
> engine form. If validation passes (search criteria longer than 2
> characters, etc), I just want to submit the full form and not have
> text returned. Should I somehow be validating against a separate URL
> than that which the form is being submitted to? If so, how would I do
> that?
>
> - Matt
>
> On Jun 16, 12:47 pm, "T.J. Crowder" <[email protected]> wrote:
>
> > Hi,
>
> > You _might_ be able to get it to work with a synchronous ajax call,
> > but I wouldn't recommend it, the user experience would be pretty ugly.
> > (Frozen browser for 2-3 seconds, at least.)
>
> > I'd probably rejig things a bit so that validation and submission are
> > both done at the same time, via ajax:
>
> > $('yourFormId').observe('submit', function(event) {
> > event.stop(); // Don't submit the form the normal way...
> > this.request({ // ...and do submit it via ajax
> > parameters: {viaAjax: true},
> > onSuccess: function(response) {
> > if (response.formOkay) {
> > // Either show success and update the page in
> > place, or
> > // navigate to a result page via window.location
> > = ...
> > }
> > else {
> > // Show validation errors
> > }
> > }
> > });
> > });
>
> > Note that I added a "viaAjax" parameter to the form. That way, the
> > target of the form knows whether the form was submitted via ajax or
> > via the normal form submission mechanism. If via ajax, it validates
> > and (if valid) updates based on the form data, and return sa JSON-
> > formatted reply saying the form was okay (or, if not, why not). If via
> > a normal form submission (e.g., JavaScript is disabled or something),
> > it processes the form the old way and sends back a complete HTML page.
>
> > The parameters you pass into Form#requeset[1] are merged into the
> > form's data. Form#request will send to the URL on the form's action
> > (unless you override it; details in the API docs).
>
> > [1]http://api.prototypejs.org/dom/form/request/
>
> > HTH,
> > --
> > T.J. Crowder
> > Independent Software Consultant
> > tj / crowder software / comwww.crowdersoftware.com
>
> > On Jun 16, 1:23 pm, Matt <[email protected]> wrote:
>
> > > Is there some kind of trick involved? Here's how I would envision it
> > > working:
>
> > > 1) User tries submitting the form
> > > 2) Event.observe captures this and sends an AJAX request to a special
> > > validation URL (PHP using Codeigniter)
> > > 3) If no errors were returned, continue submitting the original form
> > > 4) If errors were found, cancel form submission and display
>
> > > Mostly, I can't seem to get a separate AJAX validation request to work
> > > as the form continues submitting. I could use Event.stop(event), but
> > > have not found a way to re-start the process if no validation errors
> > > exist from the validation call. I'd post code, but I have about 15
> > > examples of things I've tried and it would just clutter this question.
>
> > > Any ideas? :-( I didn't think form validation would be this
> > > difficult.
>
> > > Many thanks,
> > > - Matt
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
