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

Question

我正在使用 Semantic 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.

不应该是简单的重置吗？我在这里错过了什么。对于此类操作，我更愿意坚持使用 Semantic UI 提供的功能，但我现在还卡住了。

Answer 1

如果没有完整的示例，我不确定您的错误从何而来，但是 form('reset') 在 <input type='file'> 中使用 semantic-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') 按预期工作。

希望对您有所帮助，

Answer 2

这将清除表格

<div class="ui clear button" onclick="$('.ui.form').form('clear')">Clear</div>

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

Semantic UI reset form with input type file field

javascript

forms

semantic-ui