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

Question

我正在使用包含表单字段的 JQuery 到 show/hide 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 验证以仅在该字段可见时验证该字段。

希望对您有所帮助！

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

Grails Form Submission Fails with Dynamic Fields using JQuery

forms

jquery

grails

dynamic