Question

对此我是陌生的，所以答案可能很明显，如果真的很抱歉，

我已经创建了表单以添加新客户。输入新用户的人首先需要检查客户是公司还是个人，以便切换要完成的不同字段。我正在使用Bootstrap开发表单，并针对特定字段添加了required属性。当我提交表单时，什么也没有发生，并且收到错误消息，指出名称='user-firstname'的无效表单控件无法聚焦。。该字段具有required属性并且被隐藏。我猜这是导致问题的原因。

我尝试删除required属性，但是要努力引用正确的元素。以下是我的代码的一部分：

<div class="container hidden-form">
        <form class="needs-validation">
            <div class="form-row">
                <div class="col">
                    <div class="form-group">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="user-type" id="radio-company" value="Company" checked>
                            <label class="form-check-label" for="radio-company">Company</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="user-type" id="radio-individual" value="Individual">
                            <label class="form-check-label" for="radio-individual">Individual</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <div class="form-group company-field">
                        <label for="user-companyname">Company Name*</label>
                        <input type="text" class="form-control" id="user-companyname" name="user-companyname" required>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="col">
                    <div class="form-group individual-field hidden-field">
                        <label for="user-firstname">First Name*</label>
                        <input type="text" class="form-control required-entry" id="user-firstname" name="user-firstname" required>
                    </div>
                </div>
                <div class="col">
                    <div class="form-group individual-field hidden-field">
                        <label for="user-surname">Surname</label>
                        <input type="text" class="form-control" id="user-surname" name="user-surname">
                    </div>
                </div>
            </div>
      </form>
</div>

我的Jquery代码是：

$("#radio-company").click(function() {
    $(".individual-field.required-entry").removeAttr("required");
    $(".company-field").removeClass("hidden-field");
    $(".individual-field").addClass("hidden-field");            
});

我知道一个答案是为公司或个人准备一个单独的表单，但这似乎会使表单的维护增加一倍，并且还意味着，如果某人单击单选按钮以更改用户类型，则他们需要重新输入所有信息，因为会显示新表格。

任何帮助都将不胜感激。

提交表单时如何禁用必填属性

0 个答案: