使用 JQuery 的动态字段的 Grails 表单提交失败

Question

我正在使用 JQuery 来显示/隐藏包含表单字段的 div。如果从一个下拉列表中选择了某个值，则显示与依赖表单字段对应的 div，否则不显示。 Grails 不允许提交表单，除非显示了相关的表单字段。有人经历过类似的事情吗？如果是这样，您实施了哪些解决方法？谢谢。

相关代码如下：

1. create.gsp
<g:form url="[resource:dvdRequesterInstance, action:'save']" >
    <fieldset class="form">
        <g:render template="form"/>
    </fieldset>
    <fieldset class="buttons">
        <g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
    </fieldset>
</g:form>

2. _form.gsp
<div class="fieldcontain ${hasErrors(bean: dvdRequesterInstance, field: 'dvdRequesterPosition', 'error')} required">
    <label for="dvdRequesterPosition" class="extended-label-width">
        <g:message code="dvdRequester.dvdRequesterPosition.label" />
    </label>
    <g:select name="dvdRequesterPosition" required="" id="position" from="${Position.list()}" value="${fieldValue(bean:dvdRequesterInstance, field:'dvdRequesterPosition')}" optionKey="positionName" optionValue="positionName" noSelection="['':'Select Position']" /><span class="required-indicator">*</span>
</div>

<div style="display:none;" id="otherPosition" class="fieldcontain ${hasErrors(bean: dvdRequesterInstance, field: 'dvdRequesterOtherPosition', 'error')} required">
    <label for="dvdRequesterOtherPosition" class="extended-label-width">
        <g:message code="dvdRequester.dvdRequesterOtherPosition.label" />   
    </label>
    <g:textField name="dvdRequesterOtherPosition" required="" value="${fieldValue(bean:dvdRequesterInstance, field:'dvdRequesterOtherPosition')}" id="dvdRequesterOtherPosition" size="40" placeholder="Other Position" /><span class="required-indicator">*</span>
</div>

3. JQuery code in layout file
<script>
    $(document).ready(function() {
        $('#position').on('change', function () {
            if (this.value == 'Other') {
                $("#otherPosition").show();
            } 
            else {
                $("#otherPosition").hide();
            }
        });
    });
</script>

Answer 1

我有你的问题。这实际上与 Grails 无关，而是一个浏览器实现。很容易被这个问题弄糊涂。

基本上，当您使用 jQuery 隐藏字段时，实际上并没有从 DOM 中删除它，而是将该字段标记为 required。因此，当您尝试提交表单时，该隐藏字段的验证将失败，因为您已将其隐藏并且表单未提交，因此该隐藏字段未显示。

（提示：如果您使用 Chrome，您将在 Javascript 控制台中收到此消息。）

这个问题的修复也太简单了。你现在有两个选择：

第一个选项是，当您使用 jQuery 隐藏时，您可以从输入字段中删除 required 属性，然后您可以在再次显示时添加回该属性。

第二个选项是您可以永久删除 required 属性并添加一个小的自定义 jQuery 验证以仅在该字段可见时验证该字段。

希望这会有所帮助！