单击按钮

Question

我正在使用Semantic UI进行表单验证，最后我确实有一个表单和一个提交按钮：这是我的HTML代码：

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

这是我的js代码：

     $('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');
        });

    });

所以当我点击提交按钮时我想要它我的字段变得像语义本身的工作方式一样变红，但是当我点击字段时它变成红色，当我点击提交按钮时它实际上提交表单而不是将字段变为红色并显示错误。

我应该怎么做才能像Semantic一样工作？ （我希望当我点击提交按钮显示字段中的错误时，如果没有错误则提交表单）

Answer 1

好吧，我找到了答案，我需要将按钮放在窗体内，而不是在外面才能正常工作。 ：|