无法获取表单以验证所需的选择输入

Posted 2023-03-24

【中文标题】无法获取表单以验证所需的选择输入

【英文标题】：Can't get form to validate required select input

【发布时间】：2020-01-25 21:34:00

【问题描述】：

创建了这个非常简单的代码来复制我的问题。如果输入文本没有值（正确），表单将不会提交。但如果未选择选择输入（不正确），它将提交。我可能在这里遗漏了一些非常基本的东西，但我不知道是什么。

编辑：刚刚意识到这在 Firefox 中有效；但不是 Chrome。

编辑 2： Chrome 正在使用以下内容呈现我的页面，而不是我的代码中的内容。

<option value>Select</option>

任何想法为什么？如果重要的话，这是一个 .razor 页面。但根据其他研究，没有 value="" 是它在 Chrome 中不起作用的原因。

     <form>
        <div>
            Any Text: 
            <input type="text" required="required" />
        </div>
        <div>
            Country: 
            <select required="required">
                <option value="">Select</option>
                <option value="US">United States</option>
                <option value="CA">Canada</option>
            </select>
        </div>
        <div>
            <button type="submit">
                Test
            </button>
        </div>
    </form>

编辑 3：我通过以下解决方法让 html 在 Chrome 中正确呈现，但 Chrome 中的验证仍然不起作用：

  <form>
        <div>
            Any Text:
            <input type="text" required="required" />
        </div>
        <div>
            Country:
            <select required="required">
                <option value="@blankString">Select</option>
                <option value="US">United States</option>
                <option value="CA">Canada</option>
            </select>
        </div>
        <div>
            <button type="submit">
                Test
            </button>
        </div>
    </form>

@code 
    string blankString = "";

页面代码来源：

<select required="required">
                <option value="">Select</option>
                <option value="US">United States</option>
                <option value="CA">Canada</option>
            </select>

【问题讨论】：

这似乎在我的 chrome 中为我工作。只需尝试删除变量并直接添加 Select 作为您的第一个预选选项。或者只需复制您的页面代码源并将其粘贴到您的代码位置。

实际上，我只是在一个简单的 .html 文件中创建了这段代码，没有任何问题。因此，我的 .razor 页面中的其他内容必须覆盖所需的属性或选择输入中的某些内容。

【参考方案1】：

遇到同样的问题 - 最终使用 js 来禁用/启用按钮，如下所示：

Disable button when no option is selected from dropdown