title: How to validate a drag and drop html 5 form?
body: <p>I'm trying to build a form which is based on drag and drop(html5).</p>
  
  <p>The form is working properly but I have a issue with the validation, I need to make sure all the form input fields are not empty and to only allow input from the drag and drop option (and not from keyboard).</p>
  
  <p>I tried to do that using the required and readonly options but apparently they can't work together.</p>
  
  <p>so this is what I got so far, <a href="http://jsfiddle.net/TJKmh/126/" rel="nofollow">link to fiddle</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.div_swap {
  width:150px;
  height:30px;
  padding:10px;
  border:1px solid #aaaaaa;
  }
  
  .sch {
  
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="s_id" &gt;fixed&lt;/div&gt;
  &lt;div id="GrantRoles" &gt;&lt;/div&gt;
  &lt;form id="formAssignRoles" onsubmit="myFunction()"&gt; 
      &lt;div id="second"&gt;
          &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
              &lt;input id="drag1" class="div_swap" draggable="true" ondragstart="drag(event)" required&gt;
              &lt;/input&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div id="div2"  ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
              &lt;input id="drag2" class="div_swap" draggable="true" ondragstart="drag(event)" required&gt;
              &lt;/input&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
              &lt;input id="drag3" class="div_swap" draggable="true" ondragstart="drag(event)" required&gt;
              &lt;/input&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;input type="submit" onclick="submitNewRoles2()" value="Submit"&gt;            
  &lt;/form&gt;
  
  &lt;h3&gt; drag from here &lt;/3&gt;        
          &lt;div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
              &lt;div id="drag4" class="div_swap" draggable="true" ondragstart="drag(event)"&gt;
                  &lt;span id="sch_4" class="sch" &gt;drag me 4&lt;/span&gt; |
                  &lt;span id="val_4"&gt;1&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
              &lt;div id="drag5" class="div_swap" draggable="true" ondragstart="drag(event)"&gt;
                  &lt;span id="sch_5" class="sch" &gt;drag me 5&lt;/span&gt; |
                  &lt;span id="val_5"&gt;1&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
              &lt;div id="drag6" class="div_swap" draggable="true" ondragstart="drag(event)"&gt;
                  &lt;span id="sch_6" class="sch" &gt;drag me 6&lt;/span&gt; |
                  &lt;span id="val_6"&gt;1&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>function allowDrop(ev) {
      ev.preventDefault();
  }
  
  function drag(ev) {
      ev.dataTransfer.setData("src", ev.target.id);
  }
  
  function drop(ev) {
      ev.preventDefault();
      var src = document.getElementById(ev.dataTransfer.getData("src"));
      var srcParent = src.parentNode;
      var tgt = ev.currentTarget.firstElementChild;
  
      ev.currentTarget.replaceChild(src, tgt);
      srcParent.appendChild(tgt);
  }
  
  function submitNewRoles() {
      var x = document.getElementsByClassName("sch");
      var str ="";
      for (var i = 0; i &lt; x.length; i++) {
          str += x[i].innerHTML;
          if (i&lt; x.length -1) str +=", ";
      }
      var y = document.getElementById("GrantRoles");
      y.innerHTML = str;
  }
  
  function submitNewRoles2() {
      var x = $( "#second" ).find(".sch");
      var str ="";
      for (var i = 0; i &lt; x.length; i++) {
          str += x[i].innerHTML;
          if (i&lt; x.length -1) str +=", ";
      }
      var y = document.getElementById("GrantRoles");
      y.innerHTML = str;
  }
  
  
  function myFunction() {
      var y = document.getElementById("GrantRoles");
  }
  </code></pre>
  
  <p>I would really appreciate your help! thanks!</p>