带有输入类型文件字段的语义UI重置表单

拉杰什(Rajesh Yogeshwar)

我使用的是语义UI,总体而言,它确实很棒。我遇到了一些不稳定的问题,我有一个表单,其中包含输入类型文件字段。现在,当我调用$("form").form("reset")应该重置表单的电话时,遇到以下错误消息。

Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

这不是一个简单的重置吗?我在这里想念什么。我宁愿坚持使用语义UI提供的用于此类操作的功能,但到目前为止,我仍然坚持。

Albciff

没有完整的示例,我不确定您的错误来自何处,但是form('reset')对于我来说,<input type='file'>使用语义UI 2.1.8可以正常工作请参见以下示例:

  
$(document).ready(function(){
  // initialize the form an fields
  $('.ui.form')
  .form({
    fields: {
      fileInput:{
        identifier: 'name',
        rules: [
          {
            type : 'empty'
          }
        ]
      }
    }
  });
});

function myOwnReset(){
  $('.ui.form').form('reset');
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>

<form class="ui form segment">
  <div class="field">
    <label>File</label>
    <input type="file" name="fileInput"></input>
  </div>
  <div class="ui blue submit button">Submit</div>
  <div class="ui reset button">Reset</div>
  <div class="ui clear button">Clear</div>
</form>

<input type="button" onClick="myOwnReset();" value="force form('reset')"></input>

在示例中,我使用了Reset中添加的默认功能<div class="ui reset button">Reset</div>无论如何,我添加了一个按钮来查看强制是否form('reset')按预期工作。

希望能帮助到你,

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

带有动态下拉菜单的语义UI表单验证

React-输入类型文件语义UI React

带有语义 ui 的动画

HTML语义:没有用于删除项目的输入字段的表单

输入[类型文件]更改后,变量imageLen没有重置

清除并重置表单输入字段

Tablesorter缺少带有语义ui的箭头

表单内错误状态的语义UI输入元素

表单语义 UI 反应

如何在语义UI反应中自动聚焦输入字段?

使用带有角形材料2的输入类型文件

带有Android 4.4的HTML输入类型文件

ReactiveForms:通过addControl()重置输入类型“文件”

如何重置所有输入字段的反应?

Angular2反应性表单-设置表单输入字段的默认值(输入类型=文件)吗?

通过带有输入字段的嵌套ul / li结构进行过滤,如果输入为空,则重置为原始状态

在 React 中提交表单后无法重置输入字段

在Phoenix LiveView中提交后重置表单输入字段

无法重置表单输入字段(React JS 控制的组件)

将输入文本字段更改为带有标签javascript内输入类型值的标签

所有按钮触发表单验证语义ui

如何使用 element-ui 重置特定的表单字段

PHP,发送带有 2 个字段的数组作为通过表单隐藏的输入

maxlength在带有引导程序的html表单输入字段中不起作用

如何通过地理位置验证带有国家代码的注册表单电话输入字段

如何在Flutter中显示带有提交按钮和隐藏输入字段的HTML表单

一行内联表单,在输入字段上方带有标签

带有输入字段和复选框的 Angular 4 表单验证

使用带有提交按钮和重置按钮的JavaScript计算表单中的两个字段