I am working with a .net c # form, what I'm doing is showing a <ul> of fontawebsome icons and the user selects one and changes the color to identify which one he selected, in other fields of the form I add RequiredFieldValidator to validate that the fields are not empty, the problem I have is that if there are empty fields validators are activated and the selection of the icon is no longer displayed so I must select again the icon is what I want to avoid, what can I do? How can I do it with JQuery or JS this is my JS code that selects the icon
var iconos = document.querySelectorAll('.fa');
var input = document.getElementById('<%=txtIcono.ClientID%>');
for (var i = 0; i < iconos.length; i++) {
iconos[i].addEventListener('click', function () {
input.value = this.className;
var div1 = document.getElementById('capa');
});
}
This is my form
<table border="0" width="75%">
<tr>
<td>Icono del Anuncio:
</td>
<td align="left">
<asp:TextBox runat="server" ID="txtIcono" MaxLength="100" SkinID="txtGral" Width="582px" onkeydown="javascript:return false" Visible="false"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="rfIcono" ControlToValidate="txtIcono" ErrorMessage="*Seleccione un icono para el anuncio." Display="Dynamic" EnableClientScript="true">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td></td>
<td align="left">
<div id="capa" style="display: block;">
<ul id="navegador" class="social-icons icon-circle list-unstyled list-inline">
<li class="enlace"><a href="#"><i class="fa fa-android"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-apple"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-bitcoin"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-css3"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-dropbox"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-facebook-square"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-html5"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-linux"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-skype"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-trello"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-tumblr"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-tumblr-square"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-twitter-square"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-windows"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-youtube"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-youtube-play"></i></a></li>
<li class="enlace"><a href="#"><i class="fa fa-youtube-square"></i></a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td align="right" style="width: 126px">Titulo del Anuncio:
</td>
<td align="left">
<asp:TextBox runat="server" ID="txtTitulo" MaxLength="199" SkinID="txtGral" Width="582px"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="txtTitulo" ErrorMessage="*Ingrese un titulo para el anuncio." EnableClientScript="true">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td valign="top" align="right" style="width: 126px;">
<div style="padding-top: 12px">Cuerpo del Anuncio:</div>
</td>
<td align="left">
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator5" ControlToValidate="txtCuerpo" ErrorMessage="*Ingrese el cuerpo del anuncio." EnableClientScript="true">*</asp:RequiredFieldValidator>
<CKEditor:CKEditorControl ID="txtCuerpo" BasePath="../AnunciosPortal/JS/" runat="server" Height="490px" Width="595px"></CKEditor:CKEditorControl>
</td>
</tr>
<tr>
<td align="right" style="width: 126px">Archivo:
</td>
<td align="left">
<asp:FileUpload ID="FileUpload1" runat="server" />
<hr />
<asp:Label ID="lblMessage" ForeColor="Red" runat="server" />
<asp:Label ID="lblMessage1" ForeColor="Green" runat="server" />
<asp:TextBox runat="server" ID="txtArchivo" SkinID="txtGral" Width="168px" Visible="false"></asp:TextBox>
</td>
</tr>
<tr>
<td align="right" style="width: 126px">Pagina principal:
</td>
<td align="left">
<asp:CheckBox runat="server" ID="chkStatus" Checked="true" Text="" />
</td>
</tr>
<tr>
<td align="right" style="width: 126px">Color:
</td>
<td>
<asp:TextBox runat="server" ID="txtColor" class="demo" data-control="brightness" data-position="bottom right" value="#32CD32" onkeydown="javascript:return false" MaxLength="20" SkinID="txtGral" Width="143px"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator2" ControlToValidate="txtColor" ErrorMessage="*Seleccione color." EnableClientScript="true">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right" style="width: 126px">Inicio de vigencia:
</td>
<td align="left">
<asp:TextBox runat="server" ID="txtFechai" MaxLength="20" SkinID="txtGral" Width="168px"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator3" ControlToValidate="txtFechai" ErrorMessage="*Seleccione la fecha inicial del anuncio." EnableClientScript="true">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right" style="width: 126px">Fin de vigencia:
</td>
<td align="left">
<asp:TextBox runat="server" ID="txtFechaf" MaxLength="20" SkinID="txtGral" Width="168px"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator4" ControlToValidate="txtFechaf" ErrorMessage="*Seleccione la fecha final del anuncio." EnableClientScript="true">*</asp:RequiredFieldValidator>
</td>
</tr>
</table>