All,
Here's what I am looking to do and I believe I can do it with a custom submit
handler (text from the documentation pasted below) but I don't know how to do
it exactly.
$(".selector").validate({
submitHandler: function(form) {
// do other stuff for a valid form
form.submit();
}
})
Let's say I have a web page with a form named MyForm and that page has 1
viewable DIV and 3 hidden DIVs. Three of the DIVs have form fields on them. I
am using those DIVs as "pages" (the id for each DIV is a page name, page1,
page2, etc..). The first DIV has some verbiage and a "Start" link. The start
link when they click it, hides that first DIV id="page1" and shows the second
DIV id="page2" (via my toggle function shown at the end of this email). Now
"page2" has some required fields that I am using jquery.validate to validate
and display the error next to them when they leave the field (standard fare for
what that plug-in would do)
jQuery(function(){
jQuery("#LastName").validate({
expression: "if (VAL) return true; else return false;",
message: " Last Name is a Required field"
});
jQuery("#FirstName").validate({
expression: "if (VAL) return true; else return false;",
message: " First Name is a Required field"
});
});
Now, after they complete that "page" - as they go along through the form, it
shows them if they missed something; however, they still can click the
"CONTINUE" link even if they don't fill out all required fields and that then
toggles the next page/DIV. So now, they've clicked "CONTINUE" and now page2 is
hidden and page3 is shown. Now, on page 3, at the bottom we have links that
toggle each way, "GO BACK" which would hide page3 and show page2 and then
"CONTINUE" which of course would hide page3 and show page4. Also on page3 we
have more fields, none of which are required. Moving on to page4 we have more
fields that aren't required and the submit button.
Now, what I want to do is this: When they click the submit button it currently
acts as it should because of the jquery.validate plugin. It prevents
submission and sets the focus to the first error and highlights all errors they
had left (and says whatever message I told it to). What I WANT to have it do
is hide page4 and show page2, which is the DIV that has the required fields on
it. That will allow them to go back to that DIV, fix what they've missed,
continue through the DIVs and when they click submit which is on page4 for a
second time, it would submit because everything returns true. Now, if they
didn't miss anything the first time through, of course it would also return
true and none of this would matter.
Raymond and Larry have been helping me through and we've tried many different
ways (thank you to both of you) and I'm just having a hell of a time finding a
way that works with this plugin the way I want.
After laying this out, does anyone have any idea how to make it hide/show DIVs
using that submithandler? As far as hide/show I am currently using my own
toggle function (shown below), but I know (as Larry pointed out to me), that I
could also use .toggle() and just do it on page4 and 2 $("#page4").toggle();
and then $("#page2").toggle(); [if that syntax is wrong please let me know].
The problem is, I don't know how to fire those off onSubmit in a custom submit
handler through the jquery.validate plugin like I believe I need to do.
<!-- this is the toggle function mentioned throughout --->
function toggle(a,b) {
var ele = document.getElementById(a);
var text = document.getElementById(b);
ele.style.display = "none";
text.style.display = "block";
}
Any and all help is VERY much appreciated!
Ken Hammond
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Order the Adobe Coldfusion Anthology now!
http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion
Archive:
http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:350516
Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm
