Make this tutorial without problems:
https://www.aspsnippets.com/Articles/ASPNet-Form-Validation-Tutorial-to-validate-Form-using-Validation-Engine-jQuery-Plugin.aspx
But when trying to implement the validation in a DropDownList control with the class of the tutorial: CssClass = "validate [required]" collides with the class bootstrap: class = "form-control selectpicker" of my control, that is to say the first class takes the of the validation and the second, the bootstrap does not implement it: The code of my control is as follows:
<asp: DropDownList ID = "ddlMarca" runat = "server" CssClass = "validate [required]" class = "form-control selectpicker" data-show-subtext = "true" data-live-search = "true">
</ asp: DropDownList>
Even already change the order and nothing. How can I make it so that my control takes both classes so that the validation is executed and is presented as a bootstrap control?
The dropdownlist if it takes the bootstrap design but does not validate and / or does not present me with the message "This field is required". I enclose my source code to see if you can support me by telling me what I'm doing wrong. Greetings.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ValidaSELECTconBOOTSTRAP.aspx.cs"
Inherits="Prueba_Bootstrap.ValidaSELECTconBOOTSTRAP" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
body
{
margin-top: 100px;
font-family: Arial;
font-size: 10pt;
}
input, select
{
width: 150px;
}
</style>
<link href="css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
</td>
<td>
Please fill the following Form
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
City:
</td>
<td>
<asp:DropDownList ID="ddlCities" runat="server" CssClass="form-control selectpicker validate [required]">
<asp:ListItem Text="Please Select" Value="" />
<asp:ListItem Text="Mumbai" Value="1" />
<asp:ListItem Text="Delhi" Value="2" />
<asp:ListItem Text="Kolkatta" Value="3" />
<asp:ListItem Text="Chennai" Value="4" />
</asp:DropDownList>
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
<br />
</td>
<td>
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td style="height: 40px">
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="Button1" Text="Submit" runat="server" />
</td>
</tr>
</table>
</form>
<link href="css/ValidationEngine.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine-en.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.validationEngine.js" charset="utf-8"></script>
<script type="text/javascript">
$(function () { $("#form1").validationEngine('attach', { promptPosition: "topRight" }); }); </script>
<script type="text/javascript">
function DateFormat(field, rules, i, options) {
var regex = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
if (!regex.test(field.val())) {
return "Please enter date in dd/MM/yyyy format."
}
}
</script>
</body>
</html>
