为什么javascript表单验证中的必需属性只对表单中的一个按钮有效？ 全名 请输入您的姓名 电子邮件 请输入您的电子邮件 城市 请进入你的城市 地址 请输入您的地址 设置为默认地址 取消 寄到这个地址

我不知道为什么我的代码表现得很奇怪，必需的属性在cancel按钮上起作用，但在我按下submit按钮时没有验证表单。然而，当我注释掉cancel按钮时，submit按钮实际上起作用了。我目前有一个submit按钮的事件监听器，它在单击时会通过POST请求发送表单数据，我不知道这是否是问题所在，默认情况下按钮类型是submit，因为cancel按钮没有定义类型，因此它将作为submit工作。添加按钮类型按钮以取消按钮

<form class="address-form" id="form" name="addressForm">
            <div class="form-container">
                <div class="form-input abc">
                    <label>Full name</label>
                    <input class="form-input-name" type="text" name="full_name" placeholder="Enter your full name" maxlength="50" value="{{ customer.name }}" required>
                    <div class="input-error hidden" id="input-error-name">Please enter your name</div>
                </div>
                <div class="form-input abc">
                    <label>Email</label>
                    <input class="form-input-email" type="email" name="email" placeholder="Enter your email" maxlength="50" value="{{ customer.email }}" required>
                    <div class="input-error hidden" id="input-error-email">Please enter your email</div>
                </div>
                <div class="form-input abc">
                    <label>City</label>
                    <input class="form-input-city" type="text" name="city" placeholder="Enter your city" maxlength="50" required>
                    <div class="input-error hidden" id="input-error-city">Please enter your city</div>
                </div>
                <div class="form-input abc">
                    <label>Address</label>
                    <textarea name="address" class="form-input-address" placeholder="For example: 92 Nguyen Huu Canh street" required></textarea>
                    <div class="input-error hidden" id="input-error-address">Please enter your address</div>
                </div>
                <div class="form-check abc">
                    <label></label>
                    <input class="tickbox" type="checkbox" onclick="checkTickbox()" id="flexCheckDefault" style="cursor: pointer" name="default">
                    <label class="form-check-label" for="flexCheckDefault" style="cursor: pointer; font-weight: 500; font-size: 12px">
                      Set as default address
                    </label>
                </div>
                <div class="buttons-container abc">
                    <label></label>
                    <div class="button-group">
                        <button class="cancel-button btn btn-light" id="cancel" formnovalidate>Cancel</button>
                        <button type="submit" class="create-update-button btn btn-primary" id="create-update">Ship to this address</button>
                    </div>
                </div>
            </div>
        </form>

取消

所需属性仅适用于以下类型：文本、搜索、url、电话、电子邮件、密码、日期选择器、号码、复选框、收音机和文件。因此，您应该在此处指定类型：

<button type = 'button' class="cancel-button btn btn-light" id="cancel">Cancel</button>

谢谢。我已经试过了，但它不再在“取消”按钮上进行验证，但“提交”按钮仍然无法验证表单。我不知道这是否正确，因为当我注释掉“取消”按钮时，textarea validation中的必需属性工作得非常好，所以我认为这不是问题所在这里是[链接]（不是js问题，我复制了你的表单，它对我有效，但require在html中一个接一个地工作，因此如果第一个输入为空，它将只在表单上工作，并在那里显示消息..尝试逐个填充表单，每次按下按钮。你将看到所需内容对所有表单都有效。如果你想显示错误或其他内容，请使用JSY我发现了这个问题，我为button clicked添加了一个事件监听器，而不是submit事件

<textarea name="address" class="form-input-address" placeholder="For example: 92 
       Nguyen Huu Canh street" required>
</textarea>