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

【问题标题】：Semantic UI onSuccess callback called even when form validation fails即使表单验证失败，也会调用语义 UI onSuccess 回调
【发布时间】：2016-01-11 03:02:57
【问题描述】：

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

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

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

片段：

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

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

       $(".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>

【问题讨论】：

标签： javascript jquery forms validation semantic-ui

【解决方案1】：

似乎通过两个单独的.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>

【讨论】：