I have a master page with a form field and a page with form fields in asp.net using html5 validation. Both sets of form fields have a submit button. I am aware that they are on the same form once the page is compiled.
My problem is that all of the fields require validation. I am using the required="required" attribute. I prefer not to use the group validation from c#.
I need one field to be submitted if one button is selected and the other 3 fields to be submitted if the other button is selected. As of right now, if either button is submitted, ALL form fields must be filled out. One of the form fields and button is in the master page for a newsletter subscription and the other fields and button are on a page.
Any help would be greatly appreciated.
Thanks,
Justice
Page Code:
<div class="form-group">
<input runat="server" type="text" placeholder="Enter Email" name="register_email" id="register_email" class="form-control" required="required" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input runat="server" type="text" placeholder="Enter Phone" name="register_phone" id="register_phone" class="form-control" required="required" />
</div>
</div>
<div class="col-sm-12">
<div class="form-group text-center">
<button runat="server" data-loading-text="Please wait..." class="btn btn-dark btn-theme-colored btn-sm btn-block mt-20 pt-10 pb-10" id="submit2" name="submit2" onServerClick="Submit_Click2">Send Now</button>
</div>
</div>
Mater Page Code:
<div class="input-group">
<input runat= "server" name="emailOut" id="emailOut" placeholder="Your Email" class="form-control input-lg font-16" data-height="45px" />
<span class="input-group-btn">
<button runat="server" data-height="45px" class="btn btn-colored btn-theme-colored btn-xs m-0 font-14" type="submit" id="submit" name="submit" onServerClick="Submit_Click" formnovalidate="formnovalidate" >Get Started</button>
</span>
</div>
Related
I have the following form
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Id" />
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ReleaseDate" class="control-label"></label>
<input asp-for="ReleaseDate" class="form-control" />
<span asp-validation-for="ReleaseDate" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Genre" class="control-label"></label>
<input asp-for="Genre" class="form-control" />
<span asp-validation-for="Genre" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Price" class="control-label"></label>
<input asp-for="Price" class="form-control" />
<span asp-validation-for="Price" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
After running the project and going to Edit action view, i see in the source code in browser that <form asp-action="Edit">is translated into <form action="/Movies/Edit/2" method="post">
My question is, how does ASP know about the id (2) in "/Movies/Edit/2".
In this markup the ASP defines what is its ID to be passed in POST when its form is sent to the controller.
<input type="hidden" asp-for="Id" />
A hidden field allows your entity Id to be kept in the form without being seen or modified by users when a form is submitted.
See this documentation below as a supplement to your question.
https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/controller-methods-views?view=aspnetcore-2.2
Thanks!
The edit form should always be delivered from an URL that has an ID in the URL according to our routing rules, something like /Movies/edit/1.
The form is always going to post back to that same URL, /Movies/edit/1.
The MVC framework will be able to pull that ID out of the URL and pass it as a parameter.
Refer to https://www.tutorialspoint.com/asp.net_core/asp.net_core_razor_edit_form.htm
Trying to build a 3 control input-group with Bootstrap 3.3.7, however the height of the first addon does not match the following input nor button.
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="text" class="form-control" />
<div class="input-group-btn">
<button class="btn">Submit</button>
</div>
</div>
Anyone have a working sample to solve this design?
First and for all where is your <label> tag?
Do you want the submit in your input field? Or the submit button underneath it?
You need also to place form around it and your input can be declared as number because it's amount; your input field also needs a name. A submit button is an input button with type='submit':
example:
<input type="submit" class="btn btn-default" value="submit" id="submit">
You can also declare on your body class='container'
<body class="container">
<form id="youWantToGiveThisAName" class="form-group">
<label for="amountOfSomething"></label>
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="number" name="amountOfSomething" id="amountOfSomething" class="form-control" value="0.00000121">
</div>
<div>
<input type="submit" class="btn btn-coinchecker pull-right" value="submit" id="submit">
</div>
</form>
</body>
Here's a fiddle to see the result
I'm building an asp.net web application. In the login page, the username and password text boxes are required and I get a really nice message when the user tries to validate without filling both the boxes, as shown below:
But when I add an onserverclick event handler to the submit button, this functionality no longer works - nothing happens if the user validates with empty text boxes. Here is the code for the login form.
<fieldset>
<%--Input--%>
<div class="form-group">
<label for="UsernameTextBox" class="col-lg-2 control-label text-right">Username</label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="username" required id="UsernameTextBox" runat="server">
</div>
</div>
<div class="form-group">
<label for="PasswordTextBox" class="col-lg-2 control-label text-right">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" placeholder="password" required id="PasswordTextBox" runat="server">
</div>
</div>
<%--Buttons--%>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="submit" class="btn btn-primary btn-lg" onserverclick="Login_Click" id="LoginBtn" runat="server"><i class="glyphicon glyphicon-ok"></i>
</button>
<button type="reset" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-repeat"></i>
</button>
</div>
</div>
</fieldset>
I have just been trying this out. When I put a break point on the button server side function and click, I see it hit the break point, if I then click the button again the Required message comes up.
MSDN for onserverclick states "This event causes a round trip to occur from the client to the server and back. It is deliberately different from the client-side OnClick event."
https://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlbutton.onserverclick(v=vs.110).aspx
The button gets setup with an onclick attribute which will be doing the postback and bypassing the browser required validation.
<button onclick="__doPostBack('ctl00$MainContent$btnSubmit','')" id="MainContent_btnSubmit"> Submit </button>
I found that if you use a standard asp:button then the required validation fires.
<asp:Button runat="server" ID="btnSubmit" OnClick="btnSubmit_Click" />
I am trying to add a bootstrap form in asp.net content page(.aspx). but it gives me an error regarding "Element form must not be nested with in a element form"
But i want to use the form element for a Login purpose in the page.
<div class="container">
<h2>Vertical (basic) form</h2>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<%-- --%>
</asp:Content>
Thanks in Advance
All asp webpages are already in a form, so you don't need the form tag, all you can do is instead of using, you can see the form tags at your main master page <form> you can use <div class="form"> hope this helps also for the best result
you should use CssClass instead of class in asp tags when adding the styling classes. e.g <asp:TextBox ID="TextBox14" runat="server" CssClass="form-control"></asp:TextBox>
you have simply use
<div class="container">
<h2>Vertical (basic) form</h2>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
The message is clear.
Remove the extra form tags <form> and </form> from your code. Beside that your form did not post anywhere - use the asp.net form to post to code behind, you do not need other form there.
i have a problem when my view render, i am using a input group class to join a textbox and a input but the problem is that if you see they doesn't get together, i already find a solution that is to erase part of the 'site.css' mvc project make from default but that doesn't work for me.
here is my code.
#using (Html.BeginForm())
{
<div class="input-group">
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
Product name: #Html.TextBox("id", null, new {#class = "form-control"})
</div>
}
and its views like this
Try changing the width of the div.
UPDATE:
I am confused on why your TextBox and Label(Product Name) are below the span.
Here is a working example with add-ons on both sides:
<div class="form-group">
<label class="control-label">Input addons</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Button</button>
</span>
</div>
</div>
Your problem is that "Product name:" falls inside the input-group but isn't in a input group compatible tag. Here is a plunker with some options. enter link description here
<form action="/Products/Index" method="post">
<div class="input-group">
<span class="input-group-addon"> Product name:</span>
<input class="form-control" id="id" name="id" type="text" value="" />
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
</div>
</form>
<form action="/Products/Index" method="post">
<label>Product name:</label>
<div class="input-group">
<input class="form-control" id="id" name="id" type="text" value="" />
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
</div>
</form>