Validate searchable Bootstrap DropDownList using jQuery ValidationEngine Plugin in ASP.Net

Last Reply 20 days ago By dharmendr

Posted 26 days ago

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>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td style="height: 40px">
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </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>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td style="height: 40px">
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td style="height: 40px">
            </td>
        </tr>
        <tr>
            <td>
                <br />
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td style="height: 40px">
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                &nbsp;
            </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>

 

Posted 20 days ago Modified on 9 days ago

Hi jmontano,

Check this example. Now please take its reference and correct your code.

HTML

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
        </td>
        <td>
            Please fill the following Form
        </td>
    </tr>
    <tr>
        <td>
            &nbsp;
        </td>
        <td>
            &nbsp;
        </td>
    </tr>
    <tr>
        <td>
            City:
        </td>
        <td>
            <asp:DropDownList ID="ddlCities" 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>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <asp:Button ID="Button1" Text="Submit" runat="server" />
        </td>
    </tr>
</table>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link href="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>
<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>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html