{% extends "demo/_layout" %}

{% set pageTitle = "Form Validation with Parsley | Extras" %}

{# Replace 'freeformParsley' with your form handle #}
{% set demoFormHandle = "freeformParsley" %}

{# Load in custom CSS for Parsley #}
{% block headerCss %}
    <link rel="stylesheet" href="{{ siteUrl }}assets/demo/css/parsley.css" />
{% endblock %}

{% block content %}

    {% set form = freeform.form(demoFormHandle) %}

    <div class="freeform-page-heading">
        <h2>Form Validation with Parsley</h2>
        <p>This example will show you how to implement form validation for your Freeform forms with <a href="https://parsleyjs.org/">Parsley JS</a>.</p>
    </div>

    {% if form %}

        {# Simpler approach without additional Parsley validation available too
            {{ form.render({
                formAttributes: { "data-parsley-validate": true },
                useRequiredAttribute: true
            }) }}
        #}

        {# Also see Parsley site's example for more info: https://parsleyjs.org/doc/examples/simple.html #}

        <div class="bs-callout bs-callout-warning freeform-demo-hidden">
            <h4>Oh snap!</h4>
            <p>This form seems to be invalid :(</p>
        </div>

        <div class="bs-callout bs-callout-info freeform-demo-hidden">
            <h4>Yay!</h4>
            <p>Everything seems to be ok :)</p>
        </div>

        {{ form.renderTag({
            id: "parsley-form",
            formAttributes: { "data-parsley-validate": true }
        }) }}
            {% for column in form %}
                <div>
                    {% for field in column %}
                        <div class="form-field">
                            {% set attr = {} %}
                            {% if field.required %}
                                {% set attr = attr|merge({'required':true}) %}
                            {% endif %}

                            {% if field.type in ['number', 'phone'] %}
                                {% set attr = attr|merge({'data-parsley-type':'digits'}) %}
                            {% endif %}

                            {% if field.type == 'email' %}
                                {% set attr = attr|merge({'data-parsley-type':'email'}) %}
                            {% endif %}

                            {{ field.render({
                                inputAttributes: attr
                            }) }}
                        </div>
                    {% endfor %}
                </div>
            {% endfor %}
        {{ form.renderClosingTag }}

    {% else %}

        <div class="freeform-error{{ colorMode == "dark" ? " freeform-notice-dark" }}">
            <p>You must rename your form handle to <code>{{ demoFormHandle }}</code> for this part of the demo to work.</p>
        </div>

    {% endif %}

    {# Instructions to get this page working correctly #}
    <div class="extras-instructions">
        <h4>This page will not display correctly until...</h4>
        <p>
            In order to view this page live, you'll need to make some adjustments to this template or your test form:
            <ol>
                <li>Rename your test form handle to <code>{{ demoFormHandle }}</code> or adjust the form handle name inside this template to match your test form.</li>
                <li>Make sure your test form includes at least a few fields that are required and/or of Email field type and/or Phone field type (Pro only) to see Parsley in action.</li>
            </ol>
        </p>
    </div>

{% endblock %}

{# Load Parsley JS and Freeform JS listener #}
{% block footerJs %}
    <script src="https://code.jquery.com/jquery-3.6.4.slim.js" integrity="sha256-dWvV84T6BhzO4vG6gWhsWVKVoa4lVmLnpBOZh/CAHU4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#parsley-form').parsley().on('field:validated', function() {
                var ok = $('.parsley-error').length === 0;
                $('.bs-callout-info').toggleClass('freeform-demo-hidden', !ok);
                $('.bs-callout-warning').toggleClass('freeform-demo-hidden', ok);
            })
            .on('form:submit', function() {
                return false; // Don't submit form for this demo
            });
        });
    </script>
    <script>
        document.addEventListener("freeform-render-field-errors", function (event) {
            event.preventDefault();
        });
    </script>
{% endblock %}