javascript - 如何验证拖放 html 5 表单？

Question

我正在尝试构建一个基于拖放 (html5) 的表单。

表单工作正常，但我在验证时遇到问题，我需要确保所有表单输入字段都不为空，并且只允许通过拖放选项(而不是键盘)输入。

我尝试使用 required 和 readonly 选项来做到这一点，但显然它们不能一起工作。

这就是我到目前为止得到的，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");
}

非常感谢您的帮助!谢谢!

Answer 1

您可以在聚焦时强制输入失去焦点:(这只是一种解决方法，我想还有很多其他方法)

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

-DEMO-