Semantic UI onSuccess callback called even when form validation fails

Question

When submitting a form, the onSuccess callback is still called even then the validation fails.

Why is it being called when the form is not valid?

Example here: https://jsfiddle.net/tL5xx6m9/7/

Snippet:

Verbose explanation to satisfy code/text ratio for submission:

In this snippet I have text that gets written when the onSuccess event is called. By clicking submit you will see that the form is not valid, and that the onSuccess text gets written. Under that text is the bool for whether the form is valid or not by calling $(".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>

Answer 1

It appears that by having two separate .form() method calls, it creates two validation checks that execute independently from each other. So the first call without rules will always be successful.

Move the onSuccess event to the same call as your validation rules and it starts to work as intended.

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