onFailure上的语义形式变化，onSuccess无法正常工作

Question

以下函数尝试验证表单并检查条件，然后相应地显示失败或成功的警报消息。但系统没有显示任何条件的警报信息？

function userRegistrationSubmit(){

$('.ui.form')
  .form({
    fields: {
      firstName: {
        identifier: 'fname',
        rules: [
          {
            type   : 'empty',
            prompt : 'Please enter your first name'
          },
          {
            type   : 'minLength[3]',
            prompt : 'Your first name must be at least {ruleValue} characters'
          }
        ]
      },
      lastName: {
        identifier: 'lname',
        rules: [
          {
            type   : 'empty',
            prompt : 'Please enter your second name'
          },
          {
            type   : 'minLength[3]',
            prompt : 'Your second name must be at least {ruleValue} characters'
          }
        ]
      },

      email: {
        identifier: 'email',
        rules: [
          {
            type   : 'email',
            prompt : 'Please enter a valid email'
          }
        ]
      },
      password: {
        identifier: 'password',
        rules: [
          {
           type    : 'empty',
            prompt : 'Please enter a password'
          },
          {
            type   : 'minLength[6]',
            prompt : 'Your password must be at least {ruleValue} characters'
          }
        ]
      },
      password2: {
        identifier: 'password2',
        rules: [
          {
            type   : 'match[password]',
            prompt : 'Please enter again a password'
          },
          {
            type   : 'minLength[6]'
          }
        ]
      },
          phone: {
        identifier: 'phoneNumber',
        rules: [
          {
             type   : 'number',
            prompt : 'Please enter an integer value'
          },
          {
            type   : 'minLength[9]',
            prompt : 'Your phone number must be at least {ruleValue} characters'
          }
        ]
      },
            lastName: {
        identifier: 'lname',
        rules: [
          {
            type   : 'empty',
            prompt : 'Please enter your second name'
          },
          {
            type   : 'minLength[3]',
            prompt : 'Your second name must be at least {ruleValue} characters'
          }
        ]
      }
    }
  },
{
    onFailure: function()
    {
        alert('failure');
        return false;
    },
    onSuccess: function()
    {
        alert('success');
    }
});
 $("#signUpAsUser").form("validate form");

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.css" rel="stylesheet"/>
<div class="centered row" id="sectionB" style="margin-top:60px">

    <div class ="ui stackable grid" style="width:100%">
      <div class="sixteen wide column">
        <div class="field">
        <i class="huge users icon"></i><br>
        </div>
          <h2>User registration:</h2>
      </div>
      <div class="seven wide centered column">
         <div class="ui two buttons">
           <div class="ui red button"id="pickupButton" onClick='userClicked();'>User</div>
           <div class="ui red inverted button" id="deliveryButton" onClick='companyClicked();'>Company</div>
         </div>
      </div>
    </div>

     <div class="ui stackable grid" style="width:100%">

      <div class="one wide column" id="hideMe" style="display:none"></div>
       <div class="seven wide column " id="centerMe" style="margin:auto">

        <form class="ui form segment" id="signUpAsUser">
         <div class="two fields" id ="User">
           <div class="field">
             <label>Your name:</label>
             <input placeholder="First Name" name="fname" type="text">
           </div>
            <div class="field">
             <label>Last name:</label>
             <input placeholder="Last Name" name="lname" type="text">
           </div>
         </div>

          <div class="field">
            <label>E-mail:</label>
            <input placeholder="E-mail" name="email" type="text">
         </div>
          <div class="two fields">
            <div class="field">
              <label>Password:</label>
              <input placeholder="Password" name="password" type="password">
           </div>
            <div class="field">
              <label>Confirm password:</label>
              <input placeholder="Confirm password" name="password2" type="password">
           </div>
         </div>
            <div class="field">
             <label>Phone number:</label>
             <input placeholder="Phone number" name="phoneNumber" type="text">
           </div>
            <div class="field">
             <label>Address:</label>
             <input placeholder="Address" name="address" type="text">
            </div>
            <div class="fields" style="display:none" id="Company">
              <div class="field">
               <label>Company name:</label>
               <input placeholder="First Name" name="company" type="text">
             </div>
           </div>
            <div class="fields" style="display:none" id="Address2">
             <div class="field">
              <label>Company address:</label>
              <input placeholder="Company address" name="address2" type="text">
            </div>
           </div>
          <div class="fields" style="display:none" id="Code">
            <div class="field">
              <label>Company code:</label>
              <input placeholder="Company code" name="code" type="text">
           </div>

          </div>
              <div class="ui error message"></div>
          </form>
     </div>

     <div class="seven wide column" id="hideMe2" style="display:none">

        <form class="ui form segment" id="signUpAsUser">
         <div class="two fields" id ="User">
          <div class="field">
              <label>Company name:</label>
              <input placeholder="Company name" name="name" type="text">
           </div>
           <div class="field">
               <label>Company VAT code:</label>
               <input placeholder="Company code" name="code" type="text">
             </div>
         </div>

         <div class="field">
               <label>Company address:</label>
               <input placeholder="Company address" name="addres" type="text">
             </div>
          </form>
     </div>
   </div>

    <div class ="ui stackable grid" style="width:100%">
    <div class="seven wide centered column">
     <div class="column">
       <div onclick="userRegistrationSubmit()" class="fluid red submit ui button" type="submit">Submit</div>
     </div>
    </div>
   </div>

   </div>