与“ select2 plugin”字段一起使用时，HTML表单验证会破坏页面

Question

我正在使用HTML表单验证。该表单具有使用select插件实现的一些Select2字段，而其他字段是数字字段。提交表单时，如果没有最后一个必填字段（即select2字段），则页面会中断，即包含表单的整个div元素将向上移动。

如果表单中没有很多字段，则可以很好地工作，但是即使如此，select2字段的验证消息也会显示在字段的实际位置下方。我认为对select2字段使用表单验证会导致页面向上移动

是否有一种方法可以对select2字段进行表单验证？

编辑：

<form id="myForm" onsubmit="return false">
    <div id="divId">
        <p>Update your details</p>
        <div class="form-group">
            <label>Your Name:*</label>
            <select id="nameId" placeholder="Your Name" required>
                <option></option> <!--Adding empty option so that placeholder get displayed by Slect2 plugin-->
            </select>
            <label>Pet Name:*</label>
            <select id="petName" placeholder="Pet Name" required>
                <option></option>
            </select>
            <label>Address*</label>
            <select id="address" placeholder="Address" required>
                <option></option>
            </select>
        </div>
        <div>
            <button type="submit" id="updateInfo">Update Info </button>
        </div>
    </div>
</form>

在代码中，我使用空的option标签作为下拉列表的占位符，以后使用JavaScript填充该下拉列表。