Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The Zurb documentation is complete. I guess that given that Zurb offers such a rich framework we all expect Foundation to include full form validation.</p> <p>The Framework <a href="https://github.com/zurb/foundation/issues/117" rel="nofollow">does not include</a> a <a href="https://github.com/zurb/foundation/issues/586" rel="nofollow">form validation javascript</a>, just form validation <strong>aware</strong> forms which are greatly described in the Zurb Documentation.</p> <p>Having said that I have done validation usin the <a href="http://docs.jquery.com/Plugins/Validation" rel="nofollow">jQuery Validation Plugin</a>. It takes a little bit of puzzle solving to get the thing fully sorted but I guess the code below should provide some initial guidance on how to fully use the Validation statuses offered by Foundation 3.0:</p> <pre><code>&lt;form id="contactForm"&gt; &lt;div class="five columns"&gt; &lt;label&gt;First Name:&lt;/label&gt; &lt;input type="text" maxlength='40' name='First Name' class='required' minlength='2'/&gt; &lt;/div&gt; &lt;form&gt; &lt;script&gt; $(document).ready(function(){ $("#contactForm").validate({ errorElement: "small", highlight: function(element, errorClass, validClass) { $(element).addClass(errorClass).removeClass(validClass); $(element).parent().children("input").addClass(errorClass); }, unhighlight: function(element, errorClass, validClass) { $(element).removeClass(errorClass).addClass(validClass); $(element).parent().children("input").removeClass(errorClass); } }); }); &lt;/script&gt; </code></pre> <p>The keys are: </p> <p>** Use jQuery validate classes to define the validation rules, use the options <code>highlight</code> and <code>unhighlight</code> to add/remove the error class to the input element being validate and specify the <code>errorElement</code> to paste the error message within a <code>&lt;small&gt;</code> tag instead of a label.</p> <p>Hope this helps</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload