Question

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

表单工作正常但我的验证有问题，我需要确保所有表单输入字段都不为空，并且只允许来自拖放选项（而不是键盘）的输入。

我尝试使用必需和只读选项来做到这一点，但显然他们无法一起工作。

所以这就是我到目前为止所做的，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-

Answer 2

试试这个......

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

有点修改@A。沃尔夫的代码。它更通用。这是

updated fiddle

如何验证拖放html 5表单？

2 个答案:

-DEMO-