Javascript 以下拉形式验证浏览器

我已经为登录实现了一个下拉列表，但是当我提交带有一些空字段的下拉列表时，下拉列表将关闭，因此浏览器的验证通知不会出现

这是我的下拉列表和表格：

<div class="btn-group dropleft" >
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <spring:message code="master.page.login"/>
    </button>
    <div class="dropdown-menu p-4" style="width: 250px;" aria-labelledby="dropdownMenu">
        <form:form action="j_spring_security_check" modelAttribute="credentials">
          <div class="form-group">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">@</span>
                <form:input id="username" path="username" cssClass="form-control" aria-describedby="basic-addon1" required="required" />    
                <form:errors class="error" path="username" />
            </div>                                  
          </div>

          <div class="form-group">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon2">
                    <img src="images/password.png" style="height:15px;width:auto" />
                </span>
                <form:password id="password" path="password" cssClass="form-control" aria-describedby="basic-addon2" required="required"/>  
                <form:errors class="error" path="password" />
            </div>                                  
          </div>          
          <button type="submit" class="btn btn-dark">Login</button>
          <br />
          <br />
          <jstl:if test="${showError == true}">
            <div class="alert alert-danger small" role="alert">
                 ERROR!
            </div>
          </jstl:if>

        </form:form>
    </div>
</div>

---

知道如何可视化验证吗

问题在于下拉列表中的任何单击都会关闭它，在这种特殊情况下，可以通过以下方法解决：

$("[modelAttribute='credentials']").click(e => { e.stopPropagation() })

作为记录，在下拉列表中放置一个

是一个否：否

改进的答案，对于我的案例，我需要添加以下代码：

$(".dropdown-menu").click(function(e){
    e.stopPropagation();
});

---

这就是问题所在，但是得到的是“下拉菜单”而不是表单，谢谢。你能解释一下为什么在下拉列表中放置“表单”是否定的吗？@atila665考虑到它们需要在不同的设备上进行不同的处理，它们中的每一个都可以被安全地视为最复杂的UI元素之一（想想手机处理输入字段的方式有多不同，需要在半个屏幕上显示键盘，再加上浏览器处理事件的方式不同，设备类型（指针与触摸）不同，以及增加响应和验证问题）。将这两个复杂的元素混合在一起将使您的代码更难维护，在令人高兴和不太可能的情况下，它在任何设备上都能完美地工作。我从来没有这样想过，从现在起我会考虑它，再次感谢。这将使您所有页面中的所有下拉列表在单击时都不会关闭。这就是我使用sel的原因大多数人希望他们的dds在单击菜单选项后立即关闭。

$(".dropdown-menu").click(function(e){
    e.stopPropagation();
});