Databases
StackOverflow2013
Postsdbo
POCustom form validation function on element with html 5
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCustom form validation function on element with html 5
    primarykey
    data
    text
    <p>For a custom image selection tool I would like to create form validation based on html 5 form validation.</p> <p>For example my form consists of the following elements:</p> <pre><code>&lt;form class="cms-form" action=""&gt; &lt;table width="800"&gt; &lt;tr&gt; &lt;td width="30%"&gt;Name:&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="name" class="cms-input-text" maxlength="127" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Image:&lt;/td&gt; &lt;td&gt;&lt;textarea name="icon" class="cms-input-file" data-file-resource="images" data-options="{&amp;quot;min&amp;quot;:1,&amp;quot;max&amp;quot;:3}"&gt;/location-to-image.png&lt;/textarea&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="submit" value="Next"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; </code></pre> <p>I have a javascript that changes the textarea (.cms-input-file) into some html to add images and hides the original textarea. It looks something like this:</p> <pre><code>&lt;textarea name="icon" class="cms-input-file" data-file-resource="images" data-options="{&amp;quot;min&amp;quot;:1,&amp;quot;max&amp;quot;:3}" style="display: none;"&gt;/location-to-image.png&lt;/textarea&gt; &lt;ul class="cms-input-file-list"&gt; &lt;li class="cms-input-file-item" data-image="/location-to-image.png"&gt; &lt;img src="/location-to-thumb.png" alt="" class="cms-input-file-item-thumbnail"/&gt; &lt;span class="cms-input-file-item-title"&gt;location to image&lt;/span&gt; &lt;/li&gt; &lt;li class="cms-input-file-add"&gt;Add&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Since I have allot of existing forms using html5 form validation I would like to validate this element using the default form validation within html5 supported browsers, but using a hopefully existing event.</p> <p>Im looking for something like this:</p> <pre><code>$('.cms-input-file').on('customValidateFunction', function () { var options = $(this).data('options'); if($(this).find('&gt; li.cms-input-file-item').length &lt; options.min) { return [false, 'Add more images.']; } if($(this).find('&gt; li.cms-input-file-item').length &gt; options.max) { return [false, 'Remove some images.']; } return true; }); </code></pre> <p>Does anyone know if something like this is possible using default html 5 events or how would I go about adding this <strong>event</strong> to the submit event? To actually trigger the default browser validation look and feel.</p> <p><strong>-- edit --</strong></p> <p>So far I have made an attempt to get this result using a div element which hides the original element. But now I need to add a pattern to the element to match according to my options. Is this possible?</p> <p>Current progress: <a href="http://jsfiddle.net/jeffreydev/YyEVu/" rel="noreferrer">http://jsfiddle.net/jeffreydev/YyEVu/</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjeffreydev
    1. USjeffreydev
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCustom form validation function on element with html 5
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCustom form validation function on element with html 5
      1. USjeffreydev
      1. VTBountyStart
    3. VO
      singulars
      1. POCustom form validation function on element with html 5
      1. This table or related slice is empty.
      1. VTUpMod
    1. COare you using a jquery form-validation plugin ?
      singulars
      1. POCustom form validation function on element with html 5
      1. USUnLoCo
    2. CONo, I am only using default html5 browser validation, but am wondering if I can hook into that using javascript for this matter.
      singulars
      1. POCustom form validation function on element with html 5
      1. USjeffreydev
    3. CODo you still want that form to be submitted when 1 to 3 images have been added? I still think you can do it with any of the methods shown in the [pattern example](http://jsfiddle.net/jbalsas/dyAtJ/) or the [customValidation example](http://jsfiddle.net/jbalsas/dyAtJ/2/) posted below. Both do just that.
      singulars
      1. POCustom form validation function on element with html 5
      1. USjbalsas
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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