zachvaldez
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.
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.
What do you mean by "Bootstrap error handling features?" Bootstrap is a presentation framework, not a programming language/library.
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?
ASKER
Web forms
So for example:
Makup
Code-behind
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>
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
ASKER
This is great but it still looks like the RegularExpressiValidator/V aliationSu mmary 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.
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.
ASKER
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.
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.
ASKER
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
"
<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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That's clever !
ASKER
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.
ASKER
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?
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?
ASKER
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?
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?
ASKER
The best answer!