【发布时间】: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 中为我工作。只需尝试删除变量并直接添加 作为您的第一个预选选项。或者只需复制您的页面代码源并将其粘贴到您的代码位置。
-
实际上,我只是在一个简单的 .html 文件中创建了这段代码,没有任何问题。因此,我的 .razor 页面中的其他内容必须覆盖所需的属性或选择输入中的某些内容。
标签: html forms google-chrome validation selectinput