div要素の編集方法と必須フィールドの作成方法

Question

<form action="demo_form.asp"> 
    Username: <input type="text" name="usrname" required > 
<div required style="-webkit-user-modify: read-write;width:100px;height:100px;border:1px solid black;"></div> 
<input type="submit"> 
</form> 

上記のコードでは、divは編集可能で、divを必須にする必要があり、divが空の場合は送信しないでください。現在のところ、テキストボックスは必須フィールドであり、divを必須にする方法はわかりません。

ありがとうございます。

Answer 1

うん、これはJavaScriptを使用して行うことができます。

<form action="demo_form.asp" id="frmMain"> 
 
    Username: 
 
    <input type="text" name="usrname" required> 
 
    <div id="requiredDiv" style="-webkit-user-modify: read-write;width:100px;height:100px;border:1px solid black;"></div> 
 
    <input type="submit"> 
 
</form> 
 
<script> 
 
    var frmMain = document.getElementById("frmMain"); 
 
    frmMain.onsubmit = function() { 
 
    var requiredDiv = document.getElementById("requiredDiv"); 
 
    if (requiredDiv.innerHTML.trim().length == 0) { 
 
     alert("Please fill the div as well."); 
 
     return false; 
 
    } 
 
    }; 
 
</script>