Question

我使用语义ui。我里面有一个模态和一个表单。问题是我没有收到无效的电子邮件错误提示。当输入无效的电子邮件地址时，该字段变为红色，这意味着错误被捕获但我没有收到错误提示。请告诉我哪里错了。我也想知道＆＃34;标识符＆＃34;选项就是。

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属性匹配。

来源：Form Validation - Specifying Validation Rules

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

1 个答案: