last week i began developing an ASP.NET Page with Bootstrap (with LESS).
My website has an language switcher between German and English. This works fine for my own components.
But the Bootstrap sign-in form automatically uses the browser language. If an field is empty, i get a message to fill out all fields. I want to set the used language manually in all forms in Bootstrap.
Is this possible, or are there other options?
Thanks.
Edit:
here is my Code
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="container">
<div class="form-signin" role="form">
<h2 class="form-signin-heading">
<asp:Localize ID="LocalizeHeading" runat="server"
meta:resourcekey="LocalizeHeadingResource1" Text="Anmeldung"></asp:Localize>
</h2>
<input ID="InputUsername" runat="server" type="text" class="form-control" placeholder="<%$ Resources: Authentification, PlaceHolderUsername %>" required autofocus>
<input ID="InputPassword" runat="server" type="password" class="form-control" placeholder="<%$ Resources: Authentification, PlaceHolderPassword %>" required>
<label class="checkbox">
<input type="checkbox" value="remember-me">
<asp:Localize ID="LocalizeRememberMe" runat="server"
meta:resourcekey="LocalizeRememberMeResource1" Text="Anmeldung speichern"></asp:Localize>
</label>
<asp:Button ID="ButtonSignIn" runat="server" Text="Einloggen"
class="btn btn-lg btn-primary btn-block" type="submit"
meta:resourcekey="ButtonSignInResource1" onclick="ButtonSignIn_Click" />
</div>
</div> <!-- /container -->
</asp:Content>
This is not a Bootstrap issue. The tooltip error is a default behaviour of HTML5 so, at the very end, it generates from the browser. The error generates since the input tag has the attribute required, then the browser will try to ensure that you place any text on it.
Please check changing the language of error message in required field in html5 contact form - in particular Rikin's answer in order to set
setCustomValidity message using javascript.
Related
I'm trying to style input type file using Laravel -> Form::file:
<div class="col-md-3">
{{ Form::file('images[]', ["class"=>"required","multiple"=>true]) }}
</div>
It should look like that:
I've searcched in web for some solutions and there are possibilities with js but in some of them it's commented that it's not always working in all browsers.
What should be the right way to do that?
you can solve this through "label" tag.
<label for="form-file">Upload a file</label>
<input type="file" name="file" id="form-file" class="hidden" />
Just hide the input with css or move it somewhere -9999px to the left, and style the label element to whatever you desire. When user will click on label it will show the upload popup.
I hope this help.
EDIT:
Here is example.
With "Form::file" you can just add label and add ID parametr to your function.
Here's you can attach your file in laravel
<div class="row p-t-20">
<input id="file-upload" type="file" name="banner_url" value="{{old('banner_url')}}" />
{!! $errors->first('banner_url', '
<p class="text-warning errorBag">:message</p>') !!}
<label for="file-upload" id="file-drag">
<div id="file-cont">
Select a file to upload
<br />OR
<br />Drag a file into this box
</div>
<br />
<br /><span id="file-upload-btn" class="btn btn-success">Add a file</span>
</label>
<progress id="file-progress" value="0">
<span>0</span>%
</progress>
<output for="file-upload" id="messages"></output>
this is the easy and the stylish way to input your file in laravel
please share anyone who needs this thanks
Hello I changed the the html Code of a bootstrap template,
Here is the old line
<input type="submit" id="AbteilungSearch" class="form-control" value="Suche starten" style="height:25px;">
and here is the new one
<asp:button Text="Suche starten" id="AbteilungSearch" cssclass="form-control" runat="server" style="height:25px;" />
Well my problem is that the Form-control does not get used anymore.
I have an ASP.NET 5 app. I'm creating this app as a learning exercise on a Mac. Currently, I'm trying to use the validation tag helper. In my view, I have the following code:
<form method="POST" action="~/account/login">
<h1>Login</h1>
<div class="validation" asp-validation-summary="All" />
#Html.ValidationSummary(false, "", new { })
<input id="Username" name="Username" />
<br />
<input id="Password" name="Password" />
<br />
<button type="submit">Login</button>
#Html.AntiForgeryToken()
</form>
The traditional #Html.ValidationSummary(...) approach works. However, the <div class="validation" asp-validation-summary="All" /> approach does not. I want to break away from using the tradition #Html. approach and use tag helpers as much as possible.
Why won't the validation results appear in the asp-validation-summary?
Thank you!
Since this commit
the ValidationSummaryTagHelper takes a value of the ValidationSummary enum instead of a string
So you need to write:
<div class="validation" asp-validation-summary="ValidationSummary.All" />
See also in the sample on Github.
Is there a way to style the "popup" when a field is invalid in AngularJS?
I have no idea WHERE this thing is styled? We also have Bootstrap loaded, not sure if it's there. Can't right-click to "find element" either.
That's the browser validation kicking in. Disable it as follows:
<form novalidate></form>
Edit: Example of a form using novalidate with AngularJS's validation:
<form name="form" class="css-form" novalidate>
Name:
<input type="text" ng-model="user.name" name="uName" required /><br />
E-mail:
<input type="email" ng-model="user.email" name="uEmail" required/><br />
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
</div>
</form>
I believe it is no longer possible to style these popups:
Link
I'm having some problems with the bootstrap forms. For some reason they all get messed up.
This is what it should look like:
http://i.imgur.com/vjCZvwc.png
This is how it shows up on my page:
http://i.imgur.com/48qtLc7.png
As you can see, it makes the input box smaller and it places 'br' code behind every line. It also puts a random 'p' in it without any closing tag. (nowhere to be found on the page)
My input code:
<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
The output code in the browser:
<form>
<fieldset>
<legend>Legend</legend>
<p>
<label>Label name</label><br />
<input type="text" placeholder="Type something…"><br />
<span class="help-block">Example block-level help text here.</span><br />
<label class="checkbox"><br />
<input type="checkbox"> Check me out<br />
</label><br />
<button type="submit" class="btn">Submit</button><br />
</fieldset>
</form>
So my question is; What could possibly be causing this and how do I fix it?
I'm using Bootstrap v2.3.2 as a theme on wordpress and followed this tutorial, so most of my code looks like it.
blog.teamtreehouse (dot) com/responsive-wordpress-bootstrap-theme-tutorial
Thank you for taking the time to read this. :)
This is not a problem with Bootstrap, but with your WordPress editor (or how you're using it).
You'll need to use a plain text editor or reconfigure what your editor does to HTML on save.