How do I set clr-error when the input is invalid. I've set the input field to be required.
But on page load the clr-control-error message always shows and the exclamation-circle never shows even when i click into input and click away
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-4">
<div class="clr-input-wrapper">
<clr-icon shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required/>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<clr-control-error>Search Input is required</clr-control-error>
</div>
</div>
</div>
</form>
what you've got is the HTML/CSS version of form controls, which don't have built in validation. We've not yet created an input-group functionality that also works with Angular, so you'll have to manually toggle the display of the error message. You can see a few demos of this here: https://github.com/vmware/clarity/blob/master/src/dev/src/app/forms/input-group/input-group.html
Here is a demo based on your example of something that works with our markup, but currently requires some manual effort on your end. Eventually this will be supported in an Angular component, but not at the moment.
https://stackblitz.com/edit/clarity-light-theme-v1-0-xfaw9m?file=src/app/app.component.html
<form class="clr-form clr-form-horizontal">
<div class="clr-form-control clr-row">
<div class="clr-control-container clr-col-6" [class.clr-error]="search.invalid && search.touched">
<div class="clr-input-wrapper">
<div class="clr-input-group">
<clr-icon class="" shape="search"></clr-icon>
<input type="text" id="search" class="clr-input" [(ngModel)]="model" name="search" required #search="ngModel" />
</div>
<clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
<div class="clr-subtext" *ngIf="search.invalid && search.touched">Search Input is required</div>
</div>
</div>
</div>
</form>
Related
I am trying to add a class to my div if there is an error in the ModelState. Is there any way to achieve this?
This is how the Html looks like:
<div class="form-group">
<label class="control-label" asp-for="Vorname">Vorname</label>
<input type="text" class="form-control" asp-for="Vorname">
<span class="form-control-feedback" asp-validation-for="Vorname"></span>
</div>
Now I would like to add the class has-danger to the div arround it if an error occured on the Vorname property. Like this:
<div class="form-group has-danger">
<label class="control-label" asp-for="Vorname">Vorname</label>
<input type="text" class="form-control" asp-for="Vorname">
<span class="form-control-feedback" asp-validation-for="Vorname"></span>
</div>
Edit:
If your form is submitted to the server with no prior on-the-client JavaScript validation (old school! but it works), then you’ve got yourself the easiest of all fixed. You can just add these CSS classes whenever the page loads in the following fashion:
$(document).ready(function() {
$('.input-validation-error').parents('.form-group').addClass('has-danger');
});
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
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
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.
I have downloaded this fantastic web template called Brushed. It is heavy on css, which I am not too familiar with. I have managed to complete my personal webpage through trial and error, however, I am unable to get the CONTACT FORM to work through my servers.
The code from the template.
<!-- Contact Form -->
<div class="row">
<div class="span9">
<form id="contact-form" class="contact-form" action="#">
<p class="contact-name">
<input id="contact_name" type="text" placeholder="Full Name" value="" name="name" />
</p>
<p class="contact-email">
<input id="contact_email" type="text" placeholder="Email Address" value="" name="email" />
</p>
<p class="contact-message">
<textarea id="contact_message" placeholder="Your Message" name="message" rows="15" cols="40"></textarea>
</p>
<p class="contact-submit">
<a id="contact-submit" class="submit" href="mailto:info#elementsglobal.in">Submit</a>
</p>
<div id="response">
</div>
</form>
Any help would be greatly appreciated.
Thank you.
You need to create a resource (e.g. uri) that you can post your form to on your server. That is, you need to change the following
<form id="contact-form" class="contact-form" action="#">
to something like this
<form id="contact-form" class="contact-form" action="/contact/create">
And, you need to add a resource at "/contact/create" in your server that would parse form variables that are passed in from the post request, and do your thing (either save it to the database table or send yourself an email.
I hope this makes sense.
The contact form wont work because you have the action set to # and you dont have a method of sending the data. So unless you are grabbing this data another way that you dont have posted you should start by fixing these
<form id="contact-form" class="contact-form" action="#"/*Fix this*/ method="post">