Semantic UI form validation won't work when clicking button

Question

i was using form validation by Semantic UI and i do have a form and a submit button in the end : here is my html code :

    <form class="ui  form submit-form" name="information">
        <div class="ui  two fields">
            <div class="eight wide  field">
                <label>name</label>
                <input name="name" type="text" placeholder="name">
            </div>
            <div class="eight wide field">
                <label>lastname</label>
                <input name="familyName" type="text" placeholder="lastname">
            </div>
        </div>
        <div class="ui  two fields">
            <div class="eight wide field">
                <label>email</label>
                <input name="email" type="email" placeholder="email">
            </div>
        </div>
    </form>
    <button class="ui left floated orange submit button" type="submit" id="submit-btn">submit</button>

and here is my js code :

     $('form')
       .form({
          inline : true,
          on: 'change',
          fields: {
              name: {
                 identifier  : 'name',
                 rules: [
                     {
                         type   : 'empty',
                         prompt : 'please fill in the black'
                     }
                 ]
             },
             lastname: {
                identifier  : 'familyName',
                rules: [
                      {
                         type   : 'empty',
                         prompt : 'Please fill in the black'
                      }
                ]
           },
           email: {
                identifier  : 'email',
                rules: [
                      {
                            type   : 'email',
                            prompt : 'Please put the valid email address'
                      }
                ]
            }
        }
    })
    $('#submit-btn').click(function () {
        $('form').form('validate form');
        $('form').form('is valid', function () {
            $('form').form('submit');
        });

    });

so i want it when i clicked on the submit button my fields get red like the way semantic itself works , but instead of that , when i click on the fields it turns red and when i click on the submit button it actually submits the form instead of turning the fields red and show the error .

how should i make it right like how Semantic works ? ( i want when i clicked the submit button shows the error in fields then if there was no error it submit the form )

Answer 1

okay i found the answer i needed to put the button inside the Form not outside for it to work properly . :|