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

Report · Apr 10, 2008

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>

Report · Apr 10, 2008

you don't know how to do a) or b)?

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

Report · Apr 10, 2008

how would you finish a) then move on to b) per requirement listed ? thks.

Report · Apr 10, 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/

Report · Apr 11, 2008

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

3) & 4) not really relevant per requirement

Report · Apr 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!!");

Report · Apr 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.

Report · Apr 11, 2008

Well, when you solve it, feel free to share.

Adobe Community

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

1 Correct answer