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

Semantic UI reset form with input type file field

本文关键字：UI 语义 表单 字段 输入 类型 文件      更新时间：2024-05-12

我使用的是语义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提供的功能，但到目前为止我还是被卡住了。

如果没有完整的示例，我不确定您的错误来自哪里，但是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>

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

希望有帮助，

这将清除表单

<div class="ui clear button" onclick="$('.ui.form').form('clear')">Clear</div>
相关文章：