在语义ui表单验证中没有得到错误提示

Question

我正在使用语义ui.我里面有一个模态和一个表单.问题是我没有收到无效的电子邮件错误提示.当输入无效的电子邮件地址时,该字段变为红色,这意味着正在捕获错误,但我没有收到错误提示.请告诉我我哪里错了.我还想知道"标识符"选项是什么.

HTML

  <div class="ui basic modal" id="qqmodal">
      <i class="close icon"></i>

    <div class="ui compact raised segment" id="qqform">
<form class="ui form" action="qqsend.php" method="post">

        <div class="field"><input type="text" name="name" placeholder="Name" autocomplete="off" id="qqname"></div>
        <div class="field"><input type="text" name="phone" placeholder="Phone" autocomplete="off" id="qqphone"></div>
        <div class="field"><input type="text" name="mail" placeholder="Email" autocomplete="off"></div>
        <h5 class="ui header">What do you want?</h5>
        <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" name="servicecb1">
          <label>New Website</label>
        </div>
      </div>
      <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" name="servicecb2">
          <label>Website Redesign</label>
        </div>
        </div>
        <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" name="servicecb3">
          <label>Search Engine Optimization</label>
        </div>
        </div>
        <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" name="servicecb4">
          <label>Mobile App</label>
        </div>
        </div>


      <div class="field">
      <textarea rows="5" placeholder="Describe your requirements" name="description" id="desc"></textarea>

        </div>

        <center><button type="submit" class="ui blue button" id="smbtn">Submit</button></center>
</form>
</div>

  </div>

JQuery的

$('#qqform form').form(
{
on: 'blur',
fields: {

  mail: {
    identifier  : 'mail',
    rules: [
       {
        type   : 'email',
        prompt : 'Please enter a valid e-mail'
       }
     ]
   }
  }
}
);

Answer 1

要显示提示,请inline: true在.form()通话中添加选项.

如果您希望改为对提示进行分组,<div class="ui error message"></div>请在标记中添加一个,但省略该inline选项或将其设置为false.

例

$('#qqform form').form({
  on: 'blur',
  inline: true,
  fields: {
    mail: {
      identifier: 'mail',
      rules: [{
        type: 'email',
        prompt: 'Please enter a valid e-mail'
      }]
    }
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>


<div class="ui compact raised segment" id="qqform">
  <form class="ui form" action="qqsend.php" method="post">

    <div class="field">
      <input type="text" name="name" placeholder="Name" autocomplete="off" id="qqname">
    </div>
    <div class="field">
      <input type="text" name="phone" placeholder="Phone" autocomplete="off" id="qqphone">
    </div>
    <div class="field">
      <input type="text" name="mail" placeholder="Email" autocomplete="off">
    </div>
    <h5 class="ui header">What do you want?</h5>
    <div class="inline field">
      <div class="ui checkbox">
        <input type="checkbox" name="servicecb1">
        <label>New Website</label>
      </div>
    </div>
    <div class="inline field">
      <div class="ui checkbox">
        <input type="checkbox" name="servicecb2">
        <label>Website Redesign</label>
      </div>
    </div>
    <div class="inline field">
      <div class="ui checkbox">
        <input type="checkbox" name="servicecb3">
        <label>Search Engine Optimization</label>
      </div>
    </div>
    <div class="inline field">
      <div class="ui checkbox">
        <input type="checkbox" name="servicecb4">
        <label>Mobile App</label>
      </div>
    </div>


    <div class="field">
      <textarea rows="5" placeholder="Describe your requirements" name="description" id="desc"></textarea>

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

    <center>
      <button type="submit" class="ui blue button" id="smbtn">Submit</button>
    </center>
    
  </form>
</div>

</div>

的identifier定义如下:

验证对象包括表单元素列表和验证每个字段的规则.字段由任一匹配id,name或data-validate属性匹配的设置中指定的对象的标识符.

来源:表单验证 - 指定验证规则