Bootstrap error handling

Is it possible to use Bootstrap error handling features after an error in the
Try,Catch,End try container.
I was thinking of not using RegularExpression  validator but instead boootrap because adding a regularExpression control
would mess the page layout  as use have to insert another column to accommodate the "*" error message.
Instead I prefer that in case of an error the textbox input should have the borders turned red.
zachvaldezAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

käµfm³d 👽Commented:
What do you mean by "Bootstrap error handling features?" Bootstrap is a presentation framework, not a programming language/library.
0
zachvaldezAuthor Commented:
I understand it's not a programming language but it has some has error classes which can be displayed  maybe thru JavaScript..
0
käµfm³d 👽Commented:
Is this for Web Forms or MVC?
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

zachvaldezAuthor Commented:
Web forms
0
käµfm³d 👽Commented:
So for example:

Makup
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication13._Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="Content/bootstrap.css" />
</head>
<body class="container">
    <form id="form1" runat="server">
        <asp:PlaceHolder runat="server" ID="phAlert">
            <div class="alert alert-danger" role="alert">
                <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                <span class="sr-only">Error:</span>
                <asp:Label runat="server" ID="lblError" class="alert alert-danger" role="alert"></asp:Label>
            </div>
        </asp:PlaceHolder>
        <div class="row">
            <label class="col-xs-4">First Name</label>
            <label class="col-xs-4">Last Name</label>
            <label class="col-xs-4">Age</label>
        </div>
        <div class="row">
            <span class="col-xs-4">
                <asp:TextBox runat="server" CssClass="col-xs-4 form-control" ID="txtFirstName"></asp:TextBox>
            </span>
            <span class="col-xs-4">
                <asp:TextBox runat="server" CssClass="col-xs-4 form-control" ID="txtLastName"></asp:TextBox>
            </span>
            <span class="col-xs-4">
                <asp:TextBox runat="server" CssClass="col-xs-4 form-control" ID="txtAge"></asp:TextBox>
            </span>
        </div>
        <div class="row">
            <span class="col-xs-2">
                <asp:Button runat="server" CssClass="btn" ID="btnSubmit" Text="Submit" />
            </span>
        </div>
    </form>
</body>
</html>

Open in new window


Code-behind
Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Me.phAlert.Visible = False

        If String.IsNullOrWhiteSpace(Me.txtFirstName.Text) Then
            Me.phAlert.Visible = True
            Me.lblError.Text = "First name missing"
        End If

        If String.IsNullOrWhiteSpace(Me.txtLastName.Text) Then
            Me.phAlert.Visible = True
            Me.lblError.Text = "Last name missing"
        End If

        If String.IsNullOrWhiteSpace(Me.txtAge.Text) Then
            Me.phAlert.Visible = True
            Me.lblError.Text = "Age missing"
        End If
    End Sub

End Class

Open in new window


Screenshot
0
zachvaldezAuthor Commented:
This is great but it still looks like the RegularExpressiValidator/ValiationSummary of Visual Studio and this would also work.
What I saw in Bootstrap docs was the textbox border for example in the Age input would turned red once the alert is called. But I could find a way to trigger that to happen. I appreciate your input.
0
zachvaldezAuthor Commented:
correction>>>But I could NOT find a way to trigger  that to happen.. sorry for the typo
0
lenamtlCommented:
Suggestion for javascrip validation for Bootstrap
http://reactiveraven.github.io/jqBootstrapValidation/
http://formvalidation.io/examples/

Bootstrap css for form are explained here
http://getbootstrap.com/css/#forms-control-validation

For more security you will also need to validate using serverside validation.
0
zachvaldezAuthor Commented:
The Bootstrap doc explains this and probably the solution I'm looking for but how to implement this?
"
  <div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
"
 how would I implement this if for example instead of input type I have TextBox1(server side control) Thnaks
0
käµfm³d 👽Commented:
A crude approach:

Markup
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication13._Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="Content/bootstrap.css" />
</head>
<body class="container">
    <form id="form1" runat="server">
        <div class="row">
            <label class="col-xs-4">First Name</label>
            <label class="col-xs-4">Last Name</label>
            <label class="col-xs-4">Age</label>
        </div>
        <div class="row">
            <asp:Panel ID="pnlFirstName" CssClass="col-xs-4 form-group" runat="server">
                <asp:TextBox ID="txtFirstName" CssClass="form-control" runat="server"></asp:TextBox>
            </asp:Panel>
            <asp:Panel ID="pnlLastName" CssClass="col-xs-4 form-group" runat="server">
                <asp:TextBox ID="txtLastName" CssClass="col-xs-4 form-control" runat="server"></asp:TextBox>
            </asp:Panel>
            <asp:Panel ID="pnlAge" CssClass="col-xs-4 form-group" runat="server">
                <asp:TextBox ID="txtAge" CssClass="col-xs-4 form-control" runat="server"></asp:TextBox>
            </asp:Panel>
        </div>
        <div class="row">
            <span class="col-xs-2">
                <asp:Button runat="server" CssClass="btn" ID="btnSubmit" Text="Submit" />
            </span>
        </div>
    </form>
</body>
</html>

Open in new window


Code-behind
Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Const ERROR_CLASS As String = " has-error"

        If String.IsNullOrWhiteSpace(Me.txtFirstName.Text) Then
            Me.pnlFirstName.CssClass += ERROR_CLASS
        Else
            Me.pnlFirstName.CssClass = Me.pnlFirstName.CssClass.Replace(ERROR_CLASS, String.Empty)
        End If

        If String.IsNullOrWhiteSpace(Me.txtLastName.Text) Then
            Me.pnlLastName.CssClass += " has-error"
        Else
            Me.pnlLastName.CssClass = Me.pnlLastName.CssClass.Replace(ERROR_CLASS, String.Empty)
        End If

        If String.IsNullOrWhiteSpace(Me.txtAge.Text) Then
            Me.pnlAge.CssClass += " has-error"
        Else
            Me.pnlAge.CssClass = Me.pnlAge.CssClass.Replace(ERROR_CLASS, String.Empty)
        End If
    End Sub

End Class

Open in new window


Screenshot
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
zachvaldezAuthor Commented:
That's clever !
0
zachvaldezAuthor Commented:
Is it possible to insert a red asterisk after the control or maybe inside just to inform what error is it?
0
käµfm³d 👽Commented:
A red asterisk could probably be achieved through some crafty CSS and the :after pseudo-selector. For the informing of what the error is, I might go for a combination of the two examples I provided above. In this way, the errors are collocated in an expected area of the screen, but you still get the advantage of highlighting individual fields. It's of course your preference.
0
zachvaldezAuthor Commented:
As a backup, I created a validation summary. How would I display the validation summary inside a placeholder when
there is an error in page on page_load. By default I'll leave the visible property to false and visible=true when error in page exists?
0
zachvaldezAuthor Commented:
Thanks that was  a clever move again.

If is a date field that is being validated,
what would be the code behind.. It has to be mm/dd/yyyy or m/d/yyyy format?
0
zachvaldezAuthor Commented:
The best answer!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.