即使表单验证失败，也会调用语义UI onSuccess回调

Semantic UI onSuccess callback called even when form validation fails

本文关键字：语义 调用 UI onSuccess 回调 表单 验证 失败      更新时间：2023-09-26

提交表单时，即使验证失败，仍会调用onSuccess回调。

为什么在表单无效时调用它？

此处的示例：https://jsfiddle.net/tL5xx6m9/7/

代码段：

详细说明以满足提交的代码/文本比例：

在这个片段中，我有在调用onSuccess事件时编写的文本。单击提交，您将看到表单无效，并且会写入onSuccess文本。在该文本下是通过调用$(".ui.form").form('is valid')来判断表单是否有效的bool。

       $(".ui.form").form({
         onSuccess: function(event, fields) {
           SubmitForm(fields);
           event.preventDefault();
         }
       });
       //Processes the forms data for a submission
       function SubmitForm(fields) {
       var valid = $(".ui.form").form('is valid');
         $('#successText').html("On Success Called" + "<br> Is Valid: " + valid);
         console.log("Submitting Form");
         console.log(fields);
       }
       $('.ui.form').form({
         fields: {
           input1: {
             identifier: 'input1',
             rules: [{
               type: "empty",
               prompt: "input1 - This field is required"
             }]
           },
           input2: {
             identifier: 'input2',
             rules: [{
               type: "empty",
               prompt: "input2 - This field is required"
             }]
           }
         }
       });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<form class="ui form attached fluid segment">
  <div class="field">
    <input name="input1" type="text" placeholder="input1" id="testRemoveField">
  </div>
  <div class="field">
    <input name="input2" type="text" id="" placeholder="input2">
  </div>
  <button class="ui teal button" type="submit">Submit</button>
  <div class="ui error message"></div>
  <div id="successText">
  
  </div>
</form>

通过两个单独的.form()方法调用，它创建了两个相互独立执行的验证检查。因此，第一次没有规则的呼叫总是成功的。

将onSuccess事件移动到与验证规则相同的调用，它就开始按预期工作。

//Processes the forms data for a submission
function SubmitForm(fields) {
  var valid = $(".ui.form").form('is valid');
  $('#successText').html("On Success Called" + "<br> Is Valid: " + valid);
  console.log("Submitting Form");
  console.log(fields);
}
$('.ui.form').form({
  fields: {
    input1: {
      identifier: 'input1',
      rules: [{
        type: "empty",
        prompt: "input1 - This field is required"
      }]
    },
    input2: {
      identifier: 'input2',
      rules: [{
        type: "empty",
        prompt: "input2 - This field is required"
      }]
    }
  },
  onSuccess: function(event, fields) {
    SubmitForm(fields);
    event.preventDefault();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<form class="ui form attached fluid segment">
  <div class="field">
    <input name="input1" type="text" placeholder="input1" id="testRemoveField">
  </div>
  <div class="field">
    <input name="input2" type="text" id="" placeholder="input2">
  </div>
  <button class="ui teal button" type="submit">Submit</button>
  <div class="ui error message"></div>
  <div id="successText">
  </div>
</form>

相关文章：