如何验证拖放html 5表单？

Question

I'm trying to build a form which is based on drag and drop(html5).

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).

I tried to do that using the required and readonly options but apparently they can't work together.

so this is what I got so far, link to fiddle

CSS:

.div_swap {
width:150px;
height:30px;
padding:10px;
border:1px solid #aaaaaa;
}

.sch {

}

HTML:

<div id="s_id" >fixed</div>
<div id="GrantRoles" ></div>
<form id="formAssignRoles" onsubmit="myFunction()"> 
    <div id="second">
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
            <input id="drag1" class="div_swap" draggable="true" ondragstart="drag(event)" required>
            </input>
        </div>
        <br>
        <div id="div2"  ondrop="drop(event)" ondragover="allowDrop(event)">
            <input id="drag2" class="div_swap" draggable="true" ondragstart="drag(event)" required>
            </input>
        </div>
        <br>
        <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
            <input id="drag3" class="div_swap" draggable="true" ondragstart="drag(event)" required>
            </input>
        </div>
    </div>
    <br><br>
    <input type="submit" onclick="submitNewRoles2()" value="Submit">            
</form>

<h3> drag from here </3>        
        <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="drag4" class="div_swap" draggable="true" ondragstart="drag(event)">
                <span id="sch_4" class="sch" >drag me 4</span> |
                <span id="val_4">1</span>
            </div>
        </div>
        <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="drag5" class="div_swap" draggable="true" ondragstart="drag(event)">
                <span id="sch_5" class="sch" >drag me 5</span> |
                <span id="val_5">1</span>
            </div>
        </div>
        <div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)">
            <div id="drag6" class="div_swap" draggable="true" ondragstart="drag(event)">
                <span id="sch_6" class="sch" >drag me 6</span> |
                <span id="val_6">1</span>
            </div>
        </div>

JAVASCRIPT:

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 < x.length; i++) {
        str += x[i].innerHTML;
        if (i< 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 < x.length; i++) {
        str += x[i].innerHTML;
        if (i< x.length -1) str +=", ";
    }
    var y = document.getElementById("GrantRoles");
    y.innerHTML = str;
}


function myFunction() {
    var y = document.getElementById("GrantRoles");
}

I would really appreciate your help! thanks!

Answer 1

You could force input to lose focus when focused: (this is just a workaround, there are many other ways, i guess)

$('#formAssignRoles :input').on('focus', function(e){
    $(this).blur();
});

-DEMO-

Answer 2

Try this...

$('#formAssignRoles :input').keypress(function(e){
    alert("Please use drag and drop only"); 
    return false;
});

Somewhat modified @A. Wolff's code. It's more generic. Here is the

updated fiddle