Databases
StackOverflow2013
Postsdbo
POReset HTML5 invalid input state
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POReset HTML5 invalid input state
    primarykey
    data
    text
    <p>The inputs with a validation are initially not marked as invalid until the value changes. How do I restore this initial state?</p> <p>My problem in detail: I have a simple order form. If the user clicks the "add item" button, I clone the first item and empty the input fields. But since I'm using html5 validation, the emptying makes them invalid.</p> <p>This is what happens after clicking "Add Product", even if the first set of fields is valid:</p> <p><img src="https://i.stack.imgur.com/M1fSR.png" alt="enter image description here"></p> <p>Demo: <a href="http://jsfiddle.net/WEHdp/" rel="nofollow noreferrer">http://jsfiddle.net/WEHdp/</a> (view in Firefox):</p> <pre><code>&lt;form action="/orders/preview" method="post"&gt; &lt;div class="orderData"&gt; &lt;input name="order[order_items_attributes][0][articleno]" pattern="[0-9]{4}" required /&gt; / &lt;input name="order[order_items_attributes][0][colorno]" pattern="[0-9]{3}" required /&gt; &lt;div&gt; &lt;a href="#" class="removeOrder"&gt;Remove product&lt;/a&gt; &lt;a href="#" class="addOrder"&gt;Add product&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function() { $(".addOrder").live("click", function (event) { event.preventDefault(); // Clone div $('.orderData:first').clone().insertAfter(".orderData:last"); // Empty the fields $('.orderData:last input').val(""); }); $(".removeOrder").live("click", function (event) { event.preventDefault(); if($('.orderData').size() &gt; 1){ $(this).parents('.orderData').remove(); } }); }); &lt;/script&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USWesley Murch
    1. USiGEL
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POReset HTML5 invalid input state
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POReset HTML5 invalid input state
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POReset HTML5 invalid input state
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan you please post your relevant code as well.
      singulars
      1. POReset HTML5 invalid input state
      1. USdefau1t
    2. COI've updateed the question.
      singulars
      1. POReset HTML5 invalid input state
      1. USiGEL
    3. COWhat exactly do you mean by "makes them invalid"? You aren't prompted within a "field required message" until pressing submit, right?
      singulars
      1. POReset HTML5 invalid input state
      1. USBart
 

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