A few days ago, perform the following tutorial:
https://www.aspsnippets.com/Articles/ASPNet-Form-Validation-Tutorial-to-validate-Form-using-Validation-Engine-jQuery-Plugin.aspx
After several problems I managed to execute the validation of the plugin and the live search functionality of bootsrap in a dropdownlist. Now the detail that is presented is that the dropdownlist appears an additional box, gray background and white letters. The question is? What should I do to remove the additional box and that the background has no color and the letters are in black? I leave my source code and an image so they can see what the issue is about. regards
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>FormDen Example</title>
<style type="text/css">
body
{
margin-top: 100px;
font-family: Arial;
font-size: 10pt;
}
input, select
{
width: 150px;
}
</style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link href="css/ValidationEngine.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<script type="text/javascript" src="http://cdn.ucb.org.br/Scripts/formValidator/js/languages/jquery.validationEngine-en.js"></script>
</head>
<body>
<!--formden.js communicates with FormDen server to validate fields and submit via AJAX -->
<!--<script type="text/javascript" src="https://formden.com/static/cdn/formden.js"></script> -->
<!-- Special version of Bootstrap that is isolated to content wrapped in .bootstrap-iso -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<!--Font Awesome (added because you use icons in your prepend/append)-->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- Inline CSS based on choices in "Settings" tab -->
<style>.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso form{font-family: Arial, Helvetica, sans-serif; color: black}.bootstrap-iso form button, .bootstrap-iso form button:hover{color: white !important;} .asteriskField{color: red;}</style>
<!-- HTML Form (wrapped in a .bootstrap-iso div) -->
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form action="" method="post" runat="server">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Date
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input name="_honey" style="display:none" type="text"/>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control selectpicker validate[required]" data-show-subtext="true" data-live-search="true">
<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>
</form>
</div>
</div>
</div>
</div>
<!-- Extra JavaScript/CSS added manually in "Settings" tab -->
<!-- Include jQuery -->
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-datepicker3.css"/>
<script src="js/bootstrap-datepicker.es.min.js" charset="UTF-8"></script>
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
showOnFocus: true,
language: 'es'
})
})
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></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>
