使用模态时验证表单？

Question

我尝试进行表单验证，但是如果我点击提交，表单会在给我反馈之前消失：

<div class="ui right aligned grid">
    <div class="ui three wide column">
        <div class="ui center aligned inverted orange segment"> 
            <div class="ui animated fade large inverted button" onclick="contact()">
              <div class="visible content">Say Something!</div>
              <div class="hidden content">Express yourself ;)</div>
        </div>
    </div>
    </div>
</div>
<div class="ui first coupled modal">
<i class="close icon"></i>
<div class="header">
tell me something
</div>
<div class="content">
<form class="ui form" method="post" action="/msg">
    <h4 class="ui dividing header">What do you think</h4>
    <div class="field">
      <label><i class="write icon"></i></label>
      <textarea name="txt" class="field" placeholder="write something" required></textarea>
      <input class="ui green button" type="submit" value="gtt"/>
    </form>
  </div>
</div>
</div>
<div class="ui small second coupled modal">
<div class="header">
<i class="red heart icon"></i>
</div>
<div class="content">
  <div class="description">

    <h1>Thank you</h1>

  </div>
</div>
<div class="actions">
  <div class="ui approve inverted blue button">
    <i class="checkmark icon"></i>
    Bye ^_^
  </div>
</div>

JS：

 function contact(){
         $('.coupled.modal')
          .modal({
            allowMultiple: false
          })
        ;
        // attach events to buttons
        $('.second.modal')
          .modal('attach events', '.first.modal .button')
        ;
        // show first now
        $('.first.modal')
          .modal('show')
        ;    
    }

以下是第一个窗口如何在不让我验证的情况下消失。

更新：我添加了验证，但它确实有效：

$('.ui.form')
  .form({
    message: {
    identifier  : 'msg',
    rules: [
     {
      type   : 'empty',
      prompt : 'Please enter a message'
     }
   ]
      },
   })

Answer 1

onApprove和onDeny回调在哪里执行逻辑？

模态消失但调光器停留在屏幕上的事实表明js中存在错误。转到调试器并查找。