title: implement Alerts UI Web
body: <p>I am trying to make a form in which i have a text box. Now I have a validation that the name should be unique.</p>
  
  <p>So i was going to the parent div and changing the full html inside it.</p>
  
  <p>I am going to the parent div and doing like </p>
  
  <pre><code>`parentdiv.find('.child').html('&lt;div class="form-group has-error has-feedback validateblockname"&gt; &lt;input type="hidden" id = "edit_tower_id" &gt;&lt;div class="alert alert-danger blocknamealert" role="alert" style="margin: 5px 0px 0px 0px;float: right; padding: 0;"&gt; &lt;code style="font-size: small;"&gt;Tower name already exists &lt;/code&gt;&lt;/div&gt;&lt;/input&gt;&lt;label for="ProjectBlocks_block_name" class="control-label"&gt;Name&lt;/label&gt;&lt;span class="glyphicon glyphicon-exclamation-sign form-control-feedback"&gt;&lt;/span&gt;&lt;input type="text" class="form-control" id="ProjectBlocks_block_name" onblur="EditProjectBlocks.validateblockname();" onchange="EditProjectBlocks.validateblockname();"&gt;&lt;/div&gt;'')`
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ieiPY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ieiPY.png" alt="After validating html"></a>
  <a href="https://i.stack.imgur.com/n6Mwp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n6Mwp.png" alt="Initial image"></a></p>
  
  <p>this is for initial image</p>
  
  <pre><code>parentdiv.find('.child').html('&lt;div class="form-group"&gt;&lt;input type="hidden" id="edit_tower_id"&gt;&lt;label for="ProjectBlocks_block_name" class="control-label"&gt;Name&lt;/label&gt;&lt;input type="text" class="form-control" id="ProjectBlocks_block_name" onblur="EditProjectBlocks.validateblockname();" onchange="EditProjectBlocks.validateblockname();"&gt;&lt;/div&gt;');
  </code></pre>
  
  <p>Is there a better way to do this</p>