セマンティック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

は、プロンプトが表示されていあなたの.form()コールオプションとしてinline: trueを追加します。

代わりにプロンプ​​トをグループ化する場合は、<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