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验证，以便仅在字段可见时验证该字段。

希望这有帮助！

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

1 个答案: