Skip to main content
April 10, 2008
Answered

So, you think you're that good ...

  • April 10, 2008
  • 6 replies
  • 574 views
Requirement:
a) do data validation for form 1; // ignore data capture
b) move on to form 2

Env:
cf8

Code:
<code>

<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title>Multiple Forms and Data Validation</title>
</head>
<body>
<h1>Multiple Forms and Data Validation</h1>

<cfform id="step1" name="ContactData" method="POST" preserveData="yes">
<Table cellpadding=0 cellspacing=0 width="85%" border=0 align="center">
<tr>
<td colspan="2">Name: <cfinput type="text" name="fullName"></td>
</tr>
<tr>
<td colspan="2">Email: <cfinput type="text" name="email" required="yes" message="Email is required"></td>
</tr>
<tr>
<td colspan="2" height="5"></td>
</tr>
<tr>
<td colspan="2">
<cfinput type="submit" name="step1Send" value="Submit the Form and Proceed to Step 2" onclick="document.getElementById('step1').style.display='none';document.getElementById('step2').style.display='block';">
</td></tr>
</Table>
</cfform>

<cfform id="step2" name="PaymentData" method="POST" style="display:none">
<Table cellpadding=0 cellspacing=0 width="85%" border=0 align="center">
<tr><td colspan="2">
Card type:<cfselect name="cc">
<option>Visa
<option>Master
<option>American Express
</cfselect>
Card number:<cfinput name="ccNum" validate="creditcard" required="yes" message="A valid credit card number is required" >
Holder:<cfinput type="text" name="ccName" message="Card holder is required" required="yes">
</td></tr>
<tr>
<td colspan="2" height="5"></td>
</tr>
<tr>
<td colspan="2">
<cfinput type="submit" name="step2Send" value="Submit the Form and Complete the Process" onclick="alert('hey you');">
</td></tr>
</Table>
</cfform>

</body>
</html>

</code>
This topic has been closed for replies.
Correct answer Newsgroup_User
1) optional: do js data validation for user-friendliness/cancel form
submit if errors;
2) validate form data on server & return to form if errors;
3) if you need form's data in next step - duplicate form into a session
var;
4) cflocate to next step.

how about that?

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

6 replies

tclaremont
Inspiring
April 11, 2008
Well, when you solve it, feel free to share.
April 11, 2008
You got one thing definitely right. Here the key is to use ajax (e.g. for data capture, don't worry about it).

Now, the email validation in Form 1 needs to use the built-in Cfform's js function (so, in case you need to do many field client side data validation in Form 1, you could utilize the CF functions without spending time to dig out your own).

You're on right track and yet the problem is not exactly resolved.


April 11, 2008
Rule: no server side validation for this particular requirement. Hence, 2) is not applicable.

3) & 4) not really relevant per requirement
Participating Frequently
April 11, 2008
This looks kinda like a homework assignment.

If you don't want user to post form 1 and receive form 2 as result page, you're going to need to do an ajax submission of form 1 (or have the submission of form 2 include form 1's data).

If the only requirement for form 1 is that email is required, just do a javascript check before your document.getElementById('step1').style.display='none';. If email is blank, popup an alert("Email is required!!");
Newsgroup_UserCorrect answer
Inspiring
April 11, 2008
1) optional: do js data validation for user-friendliness/cancel form
submit if errors;
2) validate form data on server & return to form if errors;
3) if you need form's data in next step - duplicate form into a session
var;
4) cflocate to next step.

how about that?

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/
April 11, 2008

how would you finish a) then move on to b) per requirement listed ? thks.
Inspiring
April 11, 2008
you don't know how to do a) or b)?

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/