Semantic UI form validation issue

by shigetak

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jade/1.11.0/jade.min.js"></script>
<link rel="stylesheet" href="https://stg.bambooshoot.io/static/stylesheets/style.css">
<table border=1><tr>
<td >sdfasdfasdfasdf</td>
<td id="level1">0</td>
</tr></table>
<div id="level2">0</div>
<div id=category-ranking data=url></div>
<form class="ui form container" id="form" method="POST">

  <div class="ui action fluid input">
    <input type="text" placeholder="Search" name="terms">
    <button class="ui icon button" type="submit">
      <i class="search icon"></i>
    </button>
  </div>
  <label for="name">Name</label>
    <input type="text" placeholder="Search" name="name" id=name>

  <div class="ui error message"></div>
</form>
<pre id="jadehi" style="display:none">
.con
  .pex
    h1= title
  .cot
    h1 List
    ul.list
      - for(var i in tmp=[1,2,8,"yooo~",9])
        li= "Item - "+tmp[i]
  .fot
    .line
    p= foot
</pre>
<div id=category-rankingR ></div>
<div id=category-ranking3 style="display:none">
              each category in root.sub
                  h3.left.blue.border.root= category.name
                  h3 category.foot
                  table.ui.selectable.celled.table.category-ranking-table
                      tbody
                        //-  +categoryRow(category, 1)

</div>
<div id=category-rankingZ style="display:none">
h3.left.blue.border rer
table.ui.selectable.celled.table
    tbody
</div>

JavaScript

$(function() {
    var djson = {
        title: "Jade Test Page",
        foot: "I'm a foot."
    };
    var root = {
    sub:{
          name: "syokuryouhin",
          foot: "I'm a foot.caaate"
        }
    };
    document.title = djson.title;
    //jade compile
    $("#category-ranking").html(jade.compile($("#jadehi").html())(djson));
  //  $("#category-rankingR").html(jade.compile($("#category-ranking3").html())(root));
//    $("#category-rankingR").html(jade.compile($("#category-rankingZ").html())(root));
  $("#category-rankingR").html(jade.compile($("#category-rankingZ").html()));
});

const shop = $('#category-ranking').data('shopUrl');
$(function(){
    $("body").css({opacity:'0'});
    setTimeout(function(){
        $("body").stop().animate({opacity:'1'},1000);
$('#category-ranking').append('<div id="category-ranking1">tt</div>');
    },1000);
});

$(window).on('load' , function(){
  if ($('#category-ranking1').is(':visible')) {
      alert("true");
    } else {
      alert("else");
    }
});
var result = '';
var users = [
  { 'user': 'barney',  'active': '1234' },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': false },
  { 'user': 'pebbles', 'active': false }  
];

result = _.findIndex(users, function(chr) {
  return chr.user == 'barney';
});
$("#level1").append('<td>append</td>');
$("#level1").text(result);
var kakikae = 1234;
$("#level2").text('testetsetste');
$("#level1").text(kakikae);