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

Question

提交表单时，即使验证失败，仍会调用 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>

Answer 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>