Add validation as seen in picture please CODE ==================================
ID: 3722732 • Letter: A
Question
Add validation as seen in picture please
CODE
=================================================================================
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Request.aspx.cs" Inherits="XEx07Reservation.Request" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Chapter 7: Reservations</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/site.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<header class="jumbotron">
<img src="Images/logo.png" alt="Royal Inns and Suites" />
</header>
<main>
<form id="form1" runat="server" class="form-horizontal">
<h1>Reservation Request</h1>
<h3>Request data</h3>
<div class="form-group">
<label class="col-sm-3 control-label">Arrival Date</label>
<div class="col-sm-4">
<asp:TextBox ID="txtArrivalDate" runat="server" TextMode="DateTime"
CssClass="form-control"></asp:TextBox>
</div>
<div class="col-sm-5">
<!-- validator(s) -->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Departure Date</label>
<div class="col-sm-4">
<asp:TextBox ID="txtDepartureDate" runat="server" TextMode="DateTime"
CssClass="form-control"></asp:TextBox>
</div>
<div class="col-sm-5">
<!-- validator(s) -->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Number of people</label>
<div class="col-sm-4">
<asp:DropDownList ID="ddlNoOfPeople" runat="server" CssClass="form-control">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Bed type</label>
<div class="col-sm-9 bedtype">
<asp:RadioButton ID="rdoKing" runat="server" Text="King" GroupName="Bed" />
<asp:RadioButton ID="rdoDouble" runat="server" Text="Two Queens" GroupName="Bed" />
<asp:RadioButton ID="rdoSingle" runat="server" Text="One Queen" GroupName="Bed" />
</div>
</div>
<h3>Special requests</h3>
<div class="form-group">
<div class="col-sm-7">
<asp:TextBox ID="txtSpecialRequests" runat="server" TextMode="Multiline"
Rows="4" CssClass="form-control"></asp:TextBox>
</div>
</div>
<h3>Contact information</h3>
<div class="form-group">
<label class="col-sm-3 control-label">First Name</label>
<div class="col-sm-4">
<asp:TextBox ID="txtFirstName" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-sm-5">
<!-- validator(s) -->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-4">
<asp:TextBox ID="txtLastName" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-sm-5">
<!-- validator(s) -->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Email address</label>
<div class="col-sm-4">
<asp:TextBox ID="txtEmail" runat="server" TextMode="Email"
CssClass="form-control"></asp:TextBox>
</div>
<div class="col-sm-5">
<!-- validator(s) -->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Telephone number</label>
<div class="col-sm-4">
<asp:TextBox ID="txtPhone" runat="server" TextMode="Phone"
CssClass="form-control"></asp:TextBox>
</div>
<div class="col-sm-5">
<!-- validator(s) -->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Preferred method</label>
<div class="col-sm-4">
<asp:DropDownList ID="ddlPreferredMethod" runat="server" CssClass="form-control">
<asp:ListItem>Email</asp:ListItem>
<asp:ListItem>Telephone</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<%-- Submit and Clear buttons --%>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
CssClass="btn btn-primary" />
<asp:Button ID="btnClear" runat="server" Text="Clear"
CssClass="btn btn-primary" />
</div>
</div>
<%-- message label --%>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<asp:Label ID="lblMessage" runat="server" CssClass="text-info"></asp:Label>
</div>
</div>
</form>
</main>
<footer>
<p>© <asp:Label ID="lblYear" runat="server"></asp:Label>
Royal Inns and Suites</p>
</footer>
</div>
</body>
</html>
=================================================================================
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace XEx07Reservation
{
public partial class Request : System.Web.UI.Page
{
private string currentDate = DateTime.Today.ToShortDateString();
private string currentYear = DateTime.Today.Year.ToString();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
txtArrivalDate.Text = currentDate;
lblYear.Text = currentYear;
rdoKing.Checked = true;
}
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
lblMessage.Text = "Thank you for your request.<br>" +
"We will get back to you within 24 hours.";
}
protected void btnClear_Click(object sender, EventArgs e)
{
txtArrivalDate.Text = currentDate;
txtDepartureDate.Text = "";
ddlNoOfPeople.SelectedIndex = -1;
rdoKing.Checked = true;
rdoDouble.Checked = false;
rdoSingle.Checked = false;
txtSpecialRequests.Text = "";
txtFirstName.Text = "";
txtLastName.Text = "";
txtEmail.Text = "";
txtPhone.Text = "";
ddlPreferredMethod.SelectedIndex = 0;
lblMessage.Text = "";
}
}
}
Explanation / Answer
Dear Student ,
As per the question submitted , in this solution I am using the asp.net validators i.e. validation controls that are available in toolbox of visual studio. Below is the list of validation controls
1.RequiredFieldValidator : This control is used to make each server control as mandatory field. This control having properties like
ErrorMessage="Enter First Name or Enter Last Name",
ForeColor:"Red",
ControlToValidate:"txtFirstName"
This validation control is used to validate firstName and LastName
2.CompareValidator : This control is used to compare two server controls i.e in our case we are using to compare values of arrival date and departure date.Here I have used couple of properties like
ErrorMessage="Must be after arrival date",
ForeColor : "Red",
ControltoCompare="txtArrivalDate",
ControlToValidate="txtDepartureDate",
Operator="GreaterThanEqual",
Type:"Date"
3.RegularExpressionValidator : This validation control is used to check regular expressions like email , postal code , telephone no etc. Here we are using this validation control to validate email and telephone number. This validator control having properties like
ErrorMessage="Must be valid email address or use this format 999-999-9999"
ForeColor:"Red"
ControlToValidate :"txtEmail ot txtPhone"
ValidationExpression="for email :w+([-+.']w+)*@w+([-.]w+)*.w+([-.]w+)* for phone (((d{3}) ?)|(d{3}-))?d{3}-d{4}"
4.RangeValidator : This validator control is used to check the value between certain rage like age between 18 to 60 etc.
5.CustomValidator :If all available validation contols doesnt full fill our requirement then this validator control is used for doing custom validation.
6.ValidationSummary : Its display error message of all other validation controls.
below is the code for Request.aspx page :
====================================================================
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Request.aspx.cs" Inherits="Request" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Chapter 7: Reservations</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/site.css" rel="stylesheet" />
<style type="text/css">
.auto-style1 {
left: 0px;
top: 1px;
}
.auto-style2 {
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="container">
<header class="jumbotron">
<img src="Images/logo.png" alt="Royal Inns and Suites" />
</header>
<main>
<form id="form1" runat="server" class="form-horizontal">
<h1>Reservation Request</h1>
<h3>Request data</h3>
<div class="form-group">
<label class="col-sm-3 control-label">Arrival Date</label>
<div class="col-sm-4">
<asp:TextBox ID="txtArrivalDate" runat="server" TextMode="DateTime"
CssClass="form-control"></asp:TextBox>
</div>
<div class="col-sm-5">
<!-- validator(s) -->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Departure Date</label>
<div class="col-sm-4">
<asp:TextBox ID="txtDepartureDate" runat="server" TextMode="DateTime"
CssClass="form-control"></asp:TextBox>
</div>
<div class="col-sm-5">
<!-- validator(s) -->
<asp:CompareValidator ID="CompareValidator1" runat="server" ErrorMessage="Must be after arrival date" ControlToCompare="txtArrivalDate" ControlToValidate="txtDepartureDate" ForeColor="#FF3300" Operator="GreaterThanEqual" Type="Date" ></asp:CompareValidator>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Number of people</label>
<div class="col-sm-4">
<asp:DropDownList ID="ddlNoOfPeople" runat="server" CssClass="form-control">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Bed type</label>
<div class="col-sm-9 bedtype">
<asp:RadioButton ID="rdoKing" runat="server" Text="King" GroupName="Bed" />
<asp:RadioButton ID="rdoDouble" runat="server" Text="Two Queens" GroupName="Bed" />
<asp:RadioButton ID="rdoSingle" runat="server" Text="One Queen" GroupName="Bed" />
</div>
</div>
<h3>Special requests</h3>
<div class="form-group">
<div class="col-sm-7">
<asp:TextBox ID="txtSpecialRequests" runat="server" TextMode="Multiline"
Rows="4" CssClass="form-control"></asp:TextBox>
</div>
</div>
<h3>Contact information</h3>
<div class="form-group">
<label class="col-sm-3 control-label">First Name</label>
<div class="col-sm-4">
<asp:TextBox ID="txtFirstName" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-sm-5">
<!-- validator(s) -->
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Enter First Name" Text="*" ForeColor="Red" ControlToValidate="txtFirstName"></asp:RequiredFieldValidator>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-4">
<asp:TextBox ID="txtLastName" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-sm-5">
<!-- validator(s) -->
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Enter Last Name" Text="*" ForeColor="Red" ControlToValidate="txtLastName"></asp:RequiredFieldValidator>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Email address</label>
<div class="col-sm-4">
<asp:TextBox ID="txtEmail" runat="server" TextMode="Email"
CssClass="form-control"></asp:TextBox>
</div>
<div class="col-sm-5">
<!-- validator(s) -->
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Must be valid email address" ControlToValidate="txtEmail" ForeColor="#FF3300" ValidationExpression="w+([-+.']w+)*@w+([-.]w+)*.w+([-.]w+)*"></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Telephone number</label>
<div class="col-sm-4">
<asp:TextBox ID="txtPhone" runat="server" TextMode="Phone"
CssClass="form-control"></asp:TextBox>
</div>
<div class="col-sm-5">
<!-- validator(s) -->
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ErrorMessage="Use this format: 999-999-9999" ControlToValidate="txtPhone" ForeColor="#FF3300" ValidationExpression="(((d{3}) ?)|(d{3}-))?d{3}-d{4}"></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<label class="auto-style2">Preferred method</label>
<div class="col-sm-4">
<asp:DropDownList ID="ddlPreferredMethod" runat="server" CssClass="form-control">
<asp:ListItem>Email</asp:ListItem>
<asp:ListItem>Telephone</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<%-- Submit and Clear buttons --%>
<div class="form-group">
<div class="auto-style1">
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
CssClass="btn btn-primary" />
<asp:Button ID="btnClear" runat="server" Text="Clear"
CssClass="btn btn-primary" />
</div>
</div>
<%-- message label --%>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<asp:Label ID="lblMessage" runat="server" CssClass="text-info"></asp:Label>
</div>
</div>
</form>
</main>
<footer>
<p>© <asp:Label ID="lblYear" runat="server"></asp:Label>
Royal Inns and Suites</p>
</footer>
</div>
</body>
</html>
When you open this page "Request.aspx " in the browser , you will get the output as shown in screen given in question . Kindly check for all the validations.
Note : Kindly provide feedback about this answer.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.