Advanced Validation & Conditional Logic for Building Multi-Step Forms in Qödiak

Creating a multi-step form is only the first step. The real challenge is keeping users engaged, preventing errors, and showing only the fields they truly need. In this tutorial we’ll dive deep into advanced validation, conditional logic, and dynamic navigation for multi-step forms built with Qödiak. By the end you’ll be able to design a form that adapts to each respondent, reduces friction, and still works within Qödiak’s no‑code environment.

Why Advanced Validation Matters in Multi-Step Forms

Even a beautifully designed wizard can lose users if a single field throws an unexpected error or if irrelevant questions appear. Advanced validation helps you:

Catch errors early – validate data on each step before the user proceeds.
Guide users – provide contextual messages that feel personal.
Maintain data integrity – ensure the backend receives clean, consistent records.

Qödiak’s sandboxed JavaScript engine (available on Starter+ plans) gives you the power to run custom checks without writing any server‑side code.

Key Validation Scenarios

Format checks – email, phone, zip code.
Cross‑field rules – start date must be before end date.
Business rules – discount code must be active, age must be over 18.

Setting Up a Basic Multi-Step Form in Qödiak

If you’re new to Qödiak, start with a simple three‑page wizard:

Page 1 – Personal Info: Name, Email, Phone.
Page 2 – Details: Service selection, Preferred date, Optional notes.
Page 3 – Confirmation: Review data, Submit.

Use the visual page builder to drag Input, Dropdown, and Date components onto each page. Set the Next button’s onClick action to navigateToPage('page‑2') (or page‑3) using the scripting API.

Tip: Give each page a clear slug (e.g., /personal-info) – it improves SEO and makes debugging easier.

Adding Real‑Time Field Validation

Qödiak’s showMessage() function lets you display inline alerts without leaving the page. Below is a step‑by‑step example for validating an email address on Page 1.

Step 1 – Create a Validation Script

Open the Script tab for the Next button and paste the following JavaScript:

function validateEmail(email) {
  const re = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
  return re.test(email);
}
const email = getField('email');
if (!validateEmail(email)) {
showMessage('Please enter a valid email address.', 'error');
// Prevent navigation by returning false
return false;
}
// If validation passes, move to the next page
navigateToPage('details');

Step 2 – Bind the Script to the Button

In the button’s onClick property select Run Custom Script and choose the script you just created. Qödiak will now stop the user from proceeding until the email passes the regex test.

Step 3 – Extend to Other Fields

Repeat the same pattern for phone numbers, zip codes, or any custom rule. Because the script runs client‑side, feedback appears instantly, keeping the user flow smooth.

Implementing Conditional Branching

Conditional branching shows or hides entire steps based on previous answers. Imagine a healthcare clinic that asks, “Do you have insurance?” – if the answer is “No,” you skip the insurance‑details page.

Define the Decision Logic

First, add a Radio component on Page 1 with options Yes and No. Give it the field name hasInsurance.

Use RoleGate Component for Page Visibility

Qödiak’s RoleGate component can act as a simple visibility toggle. Place a RoleGate wrapper around the entire insurance‑details page and set its condition to:

getField('hasInsurance') === 'Yes'

If the condition evaluates to false, the page is hidden and the navigation flow automatically skips it.

Dynamic Navigation with Scripting

When the user clicks Next on Page 1, you can decide the target page programmatically:

const hasInsurance = getField('hasInsurance');
if (hasInsurance === 'Yes') {
  navigateToPage('insurance-details');
} else {
  navigateToPage('review'); // skip insurance step
}

This approach works even if you later add more branches – just extend the if/else chain.

Combining Validation and Branching for a Seamless Experience

Let’s bring everything together in a realistic scenario: a multi‑step appointment booking form for a dental practice.

Step 1 – Patient Info: Name, Email, Phone (validate each).
Step 2 – Insurance: Show only if the patient selects “Yes” to having insurance.
Step 3 – Treatment Selection: Dropdown with conditional pricing (e.g., orthodontics > $2000).
Step 4 – Payment Preference: Show credit‑card fields only if total cost > $0.
Step 5 – Review & Submit.

Below is a condensed script that you can attach to the Next button on each step. It validates the current page, decides the next page, and stores a running total in the session.

// Example for Step 2 (Insurance) – placed on the Next button
function validateStep2() {
  const policyNumber = getField('policyNumber');
  if (!policyNumber) {
    showMessage('Policy number is required.', 'error');
    return false;
  }
  return true;
}
if (!validateStep2()) return false;
// No further branching needed here – move forward
navigateToPage('treatment-selection');

For Step 3 (Treatment) you might calculate the cost and store it:

const treatment = getField('treatment');
let cost = 0;
if (treatment === 'Cleaning') cost = 80;
else if (treatment === 'Root Canal') cost = 1200;
else if (treatment === 'Orthodontics') cost = 2500;
setSession('totalCost', cost);
navigateToPage('payment-preference');

Step 4 then checks the session value and decides whether to show credit‑card fields:

const total = getSession('totalCost');
if (total > 0) {
  // Show payment component (could be hidden by default)
  showComponent('creditCardSection');
} else {
  hideComponent('creditCardSection');
}
navigateToPage('review');

Testing, Debugging, and Performance Tips

Complex logic can become hard to follow. Follow these best practices:

Use console.log() inside scripts to inspect field values during preview mode.
Keep scripts short – break large functions into reusable helpers (e.g., validateEmail()).
Leverage Qödiak’s built‑in validation UI – set component‑level rules (required, min/max) whenever possible.
Test each branch separately – use the preview mode’s URL query parameters to pre‑fill fields and jump to specific pages.
Monitor submission logs – the inbox view shows any server‑side validation errors returned by webhooks or external APIs.

Remember: The more you can validate on the client, the fewer failed submissions you’ll see in your backend.

Publishing Your Smart Multi-Step Form

Once the form works flawlessly, publish it with a custom domain (Pro tier) to reinforce brand trust. Qödiak automatically generates SEO‑friendly URLs for each page, and you can edit slugs to include keywords like /book‑appointment or /insurance‑details. Don’t forget to:

Set meta titles and descriptions for each page (SEO section in page settings).
Upload an Open Graph image that reflects the form’s purpose.
Submit the generated sitemap.xml to Google Search Console.

Internal linking also helps. Add a link from your site’s Forms feature page to the new wizard, and vice‑versa, to boost discoverability.

Conclusion – Turn Friction into Flow

Advanced validation and conditional branching turn a static multi‑step form into a personalized journey. With Qödiak’s no‑code visual builder, sandboxed JavaScript API, and built‑in authentication, you can implement these techniques without writing backend code.

Key takeaways:

Validate on each step using showMessage() and custom scripts.
Use RoleGate or script‑driven navigateToPage() for conditional branching.
Store intermediate values in the session to influence later steps.
Test each path, keep scripts modular, and leverage Qödiak’s SEO tools before publishing.

Ready to build a friction‑free wizard? Explore Qödiak’s form components and start creating your next multi‑step masterpiece today.