[Proto-Scripty] Re: Can't seem to get AJAX form validation to work in conjunction with Codeigniter
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 / com
www.crowdersoftware.com
On Jun 16, 1:23 pm, Matt m...@postzero.com 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 prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Can't seem to get AJAX form validation to work in conjunction with Codeigniter
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 t...@crowdersoftware.com 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 m...@postzero.com 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 prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Can't seem to get AJAX form validation to work in conjunction with Codeigniter
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 m...@postzero.com 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 t...@crowdersoftware.com 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 m...@postzero.com 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 prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Can't seem to get AJAX form validation to work in conjunction with Codeigniter
To continue form submitting you can directly call the submit after the
ajax validation.
a quick example could be:
[code]
var form = $('form_id');
form.observe('submit', function(event){
event.stop();
new Ajax.Request(validition_url, {
onSuccess : function(response)
{
// if the response is empty submit the form
if ( ! response.responseText)
return form.submit();
// else show errors
alert('error');
}
});
});
[/code]
May i ask why don't you move the validation into the method that is
the action of the form?
in this case the solution provided by T.J is perfect, the same php
method is invoked both for the ajax validation that the form action
(remember the flag viaAjax).
What if is a user has javascript disabled? or a malicious user
bypasses the validation sending a malformed request directly to the
action of the form?
sorry for my bad english and my divagations about the security :)
Federico
On Jun 16, 2:23 pm, Matt m...@postzero.com 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 prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
[Proto-Scripty] Re: Can't seem to get AJAX form validation to work in conjunction with Codeigniter
ops! i have been a little too slow in typing :)
On Jun 17, 6:03 am, jacknife federico.bore...@gmail.com wrote:
To continue form submitting you can directly call the submit after the
ajax validation.
a quick example could be:
[code]
var form = $('form_id');
form.observe('submit', function(event){
event.stop();
new Ajax.Request(validition_url, {
onSuccess : function(response)
{
// if the response is empty submit the form
if ( ! response.responseText)
return form.submit();
// else show errors
alert('error');
}
});});
[/code]
May i ask why don't you move the validation into the method that is
the action of the form?
in this case the solution provided by T.J is perfect, the same php
method is invoked both for the ajax validation that the form action
(remember the flag viaAjax).
What if is a user has javascript disabled? or a malicious user
bypasses the validation sending a malformed request directly to the
action of the form?
sorry for my bad english and my divagations about the security :)
Federico
On Jun 16, 2:23 pm, Matt m...@postzero.com 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 prototype-scriptacul...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
