forms 相关问题

表单本质上是一个容器，可用于保存几种类型数据的任何数量的任何数量的子集。 HTML表单用于将数据传递到服务器。 VB和C＃表单是用于与用户交互的窗口。

使用角形材料芯片进行电子邮件验证

我正在尝试创建一个带有输入的表单，使用芯片将消息发送到各种电子邮件。我的它几乎可以正常工作，但我不知道当您写入无效时如何正确显示消息错误

html angular typescript forms validation

回答 1 投票 0

PrimeNg 表单输入布局：如何处理？

我正在使用 Angular 17 和 PrimeNg 17 开发一个应用程序，我正在尝试弄清楚如何处理表单输入对齐。 PrimeNg 网站的“入门”部分没有给出任何指示...

angular forms input layout primeng

回答 1 投票 0

使用 javascript 按 Enter 键提交表单

我不确定我在这里做错了什么。我希望回车键和单击按钮一样有效。我不确定我在这里做错了什么。我希望回车键和单击按钮一样有效。 <form action="" method="get" class="priceOptionForm" name="priceOptionForm"> <input name="paypal_email" type="text" value="whatever" id="email" /> <a href="javascript:void(0);" class="bluebtn" id="profile_price" style="width:60px;margin-top:5px;">Save all</a> </form> 试试这个： document.getElementById('email').onkeydown = function(e){ if(e.keyCode == 13){ // submit } }; 请使用下面的代码片段...它应该添加到脚本块中 <script> document.onkeydown=function(evt){ var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode; if(keyCode == 13) { //your function call here } } </script> 以下所有代码都应添加到脚本块或文件中。定义提交函数： function submitForm(){ document.priceOptionForm.submit(); document.priceOptionForm.method='post'; } 对于提交表单的回车键： document.onkeydown=function(){ if(window.event.keyCode=='13'){ submitForm(); } } 要使链接有效： document.getElementById("profile_price").onclick=submitForm; 您可以参考http://jsfiddle.net/honglonglong/YMX2q/进行尝试。使用 <input type="submit"> 而不是链接。然后回车键就会自动起作用。简单地制作一个像这样的隐藏按钮 HTML <input type="submit" id="submitbtn" /> CSS #submitbtn{display:none;} 当用户按下回车按钮时，表单将被提交别忘了输入 type="submit" // Process form if use enter key. put script in head. document.onkeyup = enter; function enter(e) {if (e.which == 13) submitForm();} // uses keyup not down as better practice imo // submitForm() is user function that posts the form 您可以在表单标签中放置默认按钮ID，自动触发 <form id="form1" runat="server" defaultbutton="Button1"> <asp:Button ID="Button1" runat="server" Text="Button" OnClick = "Button1_Click" /> <asp:Button ID="Button2" runat="server" Text="Button" OnClick = "Button2_Click" /> <asp:Button ID="Button3" runat="server" Text="Button" OnClick = "Button3_Click" /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </form> 哦，这是因为 HTML 表单元素无法将链接识别为按钮，点击.. 你需要用按钮替换它... <input type="submit" value="this will display on your button" onClick="javascript:void(0)"> 但是如果你想让它看起来像一个链接，你应该在 css 中这样做 <style type="text/css"> input{background-color:white;border:0 none;} </style> 您可以在 onKeyDown 标签中使用 input。以下是详细内容。 const handleKeyDown = (e) => { if(e.key === "Enter") { //form actions } } <form action="" method="get" class="priceOptionForm" name="priceOptionForm"> <input name="paypal_email" type="text" value="whatever" id="email" onKeyDown={handleKeyDown} /> <a href="javascript:void(0);" class="bluebtn" id="profile_price" style="width:60px;margin-top:5px;">Save all</a> </form> 当用户单击提交按钮（<button> 或 <input type="submit">）或在表单中编辑字段（例如 <input type="text">）时按 Enter 时，将触发提交事件。直接调用 form.submit() 方法时，事件不会发送到表单。检查文档由于“keycode”已已弃用，请使用此： document.getElementById('element').onkeydown = function (e) { if (e.key == 'Enter') { } };

javascript forms key submit enter

回答 11 投票 0

使用 Github 的 HTML 表单

我正在尝试在 github 上为我的俱乐部建立一个测试网站。我正在使用表单，并且尝试在 html 文件中创建一个虚拟登录表单，但是每次我按下提交按钮时，它都不会引导我...

html forms github button repository

回答 1 投票 0

如何修复 ReactJS 中这种不需要的按钮行为

所以我尝试根据表单是否显示来有条件地在 ReactJS 中的两个 html 按钮之间切换。基本上，如果显示表单，则显示提交按钮，如果未显示，则显示规则...

javascript reactjs forms form-submit

回答 1 投票 0

如果字段无效，则阻止表单提交（对于多字段表单）

好的。我有这个表单，如果提交验证失败，我会在其中发出错误。问题是，它仍然提交到服务器。对于每个失败的字段，我仍然收到警报错误消息

javascript html forms validation

回答 1 投票 0

如何处理 FormFields 数组的 Shadcn/ui 错误消息

我正在开发一个包含 2 个对象数组的表单。它们正在按预期工作，我现在正在努力为它们显示错误消息。这是我目前拥有的代码：我正在开发一个包含 2 个对象数组的表单。它们正在按预期工作，我现在正在努力为它们显示错误消息。这是我目前拥有的代码： <div className="mb-10"> <h2 className="mb-2 text-xl font-semibold"> Can you list the key steps you need to take? </h2> <div className="flex flex-col gap-2"> {stepFields.map((field, i) => ( <FormField key={field.id} name={`steps[${i}].title`} render={() => ( <FormItem> <div className="flex gap-2"> <Button variant={"ghost"} onClick={() => removeStep(i)}> <LuTrash2 className="h-5 w-5" /> </Button> <FormControl> <div className="flex w-full gap-2"> <Input {...form.register(`steps.${i}.title`, { required: true, })} placeholder={`Step ${i + 1}`} className="w-full bg-zinc-50 p-2" /> <Input {...form.register(`steps.${i}.date`, { required: true, })} type="date" /> </div> </FormControl> </div> </FormItem> )} /> ))} <Button variant={"secondary"} className="border" onClick={() => addStep({ title: "", date: "" })} type="button" > Add step </Button> </div> </div>; 现在我想使用 Shadcn/ui 中的 <FormMessage /> 和 <FormLabel /> 组件显示我的 Zod 验证错误消息。但是，如果我将它们放入数组中，它们会出现多次... 有没有人遇到过这种情况并找到解决方法。例如，是否可以将字段手动附加到 FormLabel，或者它始终必须位于 FormField > FormItem 内。仅供参考，shadcn/ui 在底层使用了 React-hook-form。如果您想在第一项下方显示错误消息： { !i && <FormMessage /> } 对于最后一项： { i+1 == stepFields.length && <FormMessage /> }

reactjs forms shadcnui

回答 1 投票 0

FastAPI POST - 错误 422 详细信息'': ( ( loc'':(正文文件 msg'': 必填字段''，类型 '': value_error 缺失)))

我想在后端读取这个xlsx文件。当我使用 swagger 时，我得到了它，但是当我在前端测试时，我收到错误 422 - devtools/网络详细信息'': ( ( loc'':(body file msg'':field required'',

python typescript forms post fastapi

回答 2 投票 0

NextJS 认为从“FormData”拉取的数据为“null”

我正在 NextJS 中创建一个应用程序，当我从表单提交信息时，NextJS 在我传递表单之前就认为表单中的所有数据都是空的。这是我的action.ts： '使用服务器'；导入 {

reactjs forms next.js

回答 1 投票 0

如何在vue3组合中创建自定义日期和时间输入

我正在vue3组合API中创建预订表单，我已经能够将日期输入设置为从当天开始，因此当天之前的任何其他日期都是无效的并且无法选择...