jquery - 使用 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 验证来仅在该字段可见时验证该字段。

希望这有帮助!