{% extends "admin/base_site.html" %}
{% load i18n %}{% load url from future %}
{% block bodyclass %}grp-doc{% endblock %}
{% block content-class %}{% endblock %}
{% block title %}Grappelli Documentation &raquo; Errors in Forms{% endblock %}

{% block extrahead %}
	<script type="text/javascript" charset="utf-8">
        (function($) {
            $(document).ready(function() {
                $("#grp-content-container .grp-group").grp_collapsible_group();
                $("#grp-content-container .grp-collapse").grp_collapsible({
                    on_init: function(elem, options) {
                        // open collapse (and all collapse parents) in case of errors
                        if (elem.find("ul.errorlist").length > 0) {
                            elem.removeClass("grp-closed")
                                .addClass("grp-open");
                            elem.parents(".grp-collapse")
                                .removeClass("grp-closed")
                                .addClass("grp-open");
                        }
                    }
                });
            });
        })(django.jQuery);
	</script>
{% endblock %}

{% block breadcrumbs %}
    <ul>
        <li><a href="../">Grappelli Documentation</a></li>
        <li>Errors in Forms</li>
    </ul>
{% endblock %}

{% block content %}
    <h1>Errors in Forms</h1>
    <div class="g-d-c">
    	<section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Basics</h1>
		            <p>Within Django there are basically two elements delivering error-messages: A <span class="grp-doc-dom"><span>p.errornote</span></span> and a <span class="grp-doc-dom"><span>ul.errorlist</span></span>.<br /><small>Errornotes and -lists are outside Grappellis namespace because they come from the depth of Django.</small></p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<p class="errornote">Errornote</p>
	    			<ul class="errorlist">
		    			<li>Errorlist</li>
		    		</ul>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<p class="errornote">Errornote</p>
<ul class="errorlist">
    <li>Errorlist</li>
</ul>
{% endfilter %}</code></pre></div>
	    	</div>
	    </section>
    	<section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Field Errors</h1>
		            <p>A field-error requires to add <span class="grp-doc-class">.grp-errors</span> to the element wrapping the concerned label and form field.</p>
		            <p>Below the errorous form field there's a <span class="grp-doc-dom"><span>ul.errorlist</span></span> with <span class="grp-doc-dom"><span>li</span></span> displaying the error-messages.</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<fieldset class="grp-module">
						<h2>Module</h2>
						<div class="grp-row grp-errors">
							<div class="l-2c-fluid l-d-4">
						    	<div class="c-1"><label class="required">Label</label></div>
						    	<div class="c-2">
						    		<input type="text" class="vTextField" />
						    		<ul class="errorlist">
						    			<li>Error with that form field</li>
						    		</ul>
						    		<p class="grp-help">Helptext</p>
						    	</div>
						    </div>
					    </div>
					    <div class="grp-row">
					    	<div class="l-2c-fluid l-d-4">
						    	<div class="c-1"><label class="required">Label</label></div>
						    	<div class="c-2"><input type="text" class="vTextField" /></div>
						    </div>
					    </div>
					</fieldset>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<fieldset class="grp-module">
    <h2>Module</h2>
    <div class="grp-row grp-errors">
        <div class="l-2c-fluid l-d-4">
            <div class="c-1"><label class="required">Label</label></div>
            <div class="c-2">
                <input type="text" class="vTextField" />
                <ul class="errorlist">
                    <li>Error with that form field</li>
                </ul>
                <p class="grp-help">Helptext</p>
            </div>
        </div>
    </div>
    <div class="grp-row">
        <div class="l-2c-fluid l-d-4">
            <div class="c-1"><label class="required">Label</label></div>
            <div class="c-2"><input type="text" class="vTextField" /></div>
        </div>
    </div>
</fieldset>
{% endfilter %}</code></pre></div>
	    	</div>
	    </section>
	    <section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Non-Form &amp; Non-Field Errors in Stacked Groups</h1>
		            <p>They have to be placed <strong>directly after</strong> the <a href="{% url 'grp_doc_groups' %}">groups</a>/<a href="{% url 'grp_doc_modules' %}">modules</a> heading or <strong>directly after</strong> the <a href="{% url 'grp_doc_tools' %}">tools</a> if there are any.</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<div class="grp-group grp-stacked">
	    				<h2>Stacked Group</h2>
	    				<ul class="grp-tools">
					        <li><a href="#" class="grp-icon grp-add-handler"></a></li>
					    </ul>
	    				<ul class="errorlist">
			                <li>Non-Form Errorlist</li>
			            </ul>
	    				<fieldset class="grp-module">
		    				<h3>Module</h3>
		    				<ul class="grp-tools">
						        <li><a href="#" class="grp-icon grp-add-handler"></a></li>
						    </ul>
		    				<ul class="errorlist">
						        <li>Non-Field Errorlist</li>
						    </ul>
						    <div class="grp-row grp-cells">
						    	<div class="grp-cell l-2c-fluid l-d-4">
						            <div class="c-1"><label class="required">Label</label></div>
						            <div class="c-2"><input type="text" value="" /></div>
						        </div>
						        <div class="grp-cell grp-errors l-2c-fluid l-d-4">
						            <div class="c-1"><label class="required">Label</label></div>
						            <div class="c-2">
						            	<input type="text" value="" />
						            	<ul class="errorlist">
							                <li>Error with that form field</li>
							            </ul>
						            </div>
						        </div>
					        </div>
						</fieldset>
					</div>
				</div>
		    </div>
		</section>
		<section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Non-Form &amp; Non-Field Errors in Tabular Groups</h1>
		            <p>The non-form errorlist has to be placed <strong>directly after</strong> the <a href="{% url 'grp_doc_groups' %}">groups</a> heading or <strong>directly after</strong> the <a href="{% url 'grp_doc_tools' %}">tools</a> if there are any.</p>
		            <p>The non-field errorlist has to be the first child of the <span class="grp-doc-class">.grp-module.grp-tbody</span>.</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<div class="grp-group grp-tabular">
	    				<h2>Tabular Group</h2>
	    				<ul class="grp-tools">
					        <li><a href="#" class="grp-icon grp-add-handler"></a></li>
					    </ul>
	    				<ul class="errorlist">
			                <li>Non-Form Errorlist</li>
			            </ul>
	    				<div class="grp-module grp-table">
	    					<div class="grp-module grp-thead">
	    						<div class="grp-tr">
	    							<div class="grp-th">Table-Head 1</div>
	    							<div class="grp-th">Table-Head 2</div>
	    						</div>
	    					</div>
	    					<div class="grp-module grp-tbody">
	    						<ul class="errorlist">
					                <li>Non-Field Errorlist</li>
					            </ul>
	    						<div class="grp-tr">
	    							<div class="grp-td"><input type="text" /></div>
	    							<div class="grp-td grp-errors">
	    								<input type="text" />
	    								<ul class="errorlist">
					                        <li>Error with that form field</li>
					                    </ul>
	    							</div>
	    						</div>
	    					</div>
						</div>
					</div>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<div class="grp-group grp-stacked">
    <h2>Tabular Group</h2>
    <ul class="grp-tools">
        <li><a href="#" class="grp-icon grp-add-handler"></a></li>
    </ul>
    <ul class="errorlist">
        <li>Non-Form Errorlist</li>
    </ul>
    <div class="grp-module grp-table">
        <div class="grp-module grp-thead">
            <div class="grp-tr">
                <div class="grp-th">Table-Head 1</div>
                <div class="grp-th">Table-Head 2</div>
            </div>
        </div>
        <div class="grp-module grp-tbody">
            <ul class="errorlist">
                <li>Non-Field Errorlist</li>
            </ul>
            <div class="grp-tr">
                <div class="grp-td"><input type="text" /></div>
                <div class="grp-td grp-errors">
                    <input type="text" />
                    <ul class="errorlist">
                        <li>Error with that form field</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endfilter %}</code></pre></div>
	    	</div>
	    </section>
	    <section>
	    	<div class="g-d-24">
		        <div class="grp-doc-description">
		            <h1>Errornote</h1>
		            <p>The <span class="grp-doc-dom"><span>p.errornote</span></span> is currently used before the very first <a href="{% url 'grp_doc_groups' %}">group</a> or <a href="{% url 'grp_doc_modules' %}">module</a>, e.g. with the <a href="{% url 'grp_doc_change_form' %}">change form</a>.</p>
		        </div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code-source">
	    			<p class="errornote">Errornote</p>
	    			<fieldset class="grp-module">
					    <h2>Module</h2>
					    <div class="grp-row grp-errors">
					        <div class="l-2c-fluid l-d-4">
					            <div class="c-1"><label class="required">Label</label></div>
					            <div class="c-2">
					                <input type="text" class="vTextField" />
					                <ul class="errorlist">
					                    <li>Error with that form field</li>
					                </ul>
					                <p class="grp-help">Helptext</p>
					            </div>
					        </div>
					    </div>
					    <div class="grp-row">
					        <div class="l-2c-fluid l-d-4">
					            <div class="c-1"><label class="required">Label</label></div>
					            <div class="c-2"><input type="text" class="vTextField" /></div>
					        </div>
					    </div>
					</fieldset>
				</div>
		    </div>
	    	<div class="g-d-24">
	    		<div class="grp-doc-code"><pre><code>{% filter force_escape %}
<p class="errornote">Errornote</p>
<fieldset class="grp-module">
    <h2>Module</h2>
    <div class="grp-row grp-errors">
        <div class="l-2c-fluid l-d-4">
            <div class="c-1"><label class="required">Label</label></div>
            <div class="c-2">
                <input type="text" class="vTextField" />
                <ul class="errorlist">
                    <li>Error with that form field</li>
                </ul>
                <p class="grp-help">Helptext</p>
            </div>
        </div>
    </div>
    <div class="grp-row">
        <div class="l-2c-fluid l-d-4">
            <div class="c-1"><label class="required">Label</label></div>
            <div class="c-2"><input type="text" class="vTextField" /></div>
        </div>
    </div>
</fieldset>
{% endfilter %}</code></pre></div>
	    	</div>
	    </section>
    </div>
{% endblock %}

