Link to home
Start Free TrialLog in
Avatar of zachvaldez
zachvaldezFlag for United States of America

asked on

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.
Avatar of kaufmed
kaufmed
Flag of United States of America image

What do you mean by "Bootstrap error handling features?" Bootstrap is a presentation framework, not a programming language/library.
Avatar of zachvaldez

ASKER

I understand it's not a programming language but it has some has error classes which can be displayed  maybe thru JavaScript..
Is this for Web Forms or MVC?
Web forms
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


User generated image
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.
correction>>>But I could NOT find a way to trigger  that to happen.. sorry for the typo
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.
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
ASKER CERTIFIED SOLUTION
Avatar of kaufmed
kaufmed
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
That's clever !
Is it possible to insert a red asterisk after the control or maybe inside just to inform what error is it?
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.
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?
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?
The best answer!