here my code
<div class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
Script
$('#datepic .input-group.date').datepicker({
});
Right now i can set the date with popup select, but i need user can allow to entry the date manual as well as using popup
Try below code, hope will work for you and try below click also for you reference
https://jsfiddle.net/onlinesolution/ap6dwpmz/
<div class="input-group date">
<input type="text" class="form-control datepicker"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
$( ".datepicker" ).datepicker({ constrainInput: false });
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');
});
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>
I have an embedded form on a website I own that I'd like to populate and send using RSelenium.
I can't seem to to detect the elements as a first step. Obviously I'd like then to populate and send.
The form code is:
<div id="form">
<form accept-charset="utf-8" method="POST" novalidate="">
<div class="form-group"><label for="form_Name" class="control-label">Full name<sup>*</sup></label><input required="" pattern="^***+(.****" class="form-control" title="Full name" id="form_Name" type="text" name="form_Name"></div>
<div class="form-group"><label for="form_Email" class="control-label">Email address<sup>*</sup></label><input required="" class="form-control" title="Email address" id="form_Email" type="email" name="form_Email"></div>
<div class="form-group"><label for="form_Company" class="control-label">Company name<sup>*</sup></label><input class="form-control" title="Company name" required="" id="form_Company" type="text" name="form_Company"></div>
<div class="form-group"><label for="custom_Message" class="control-label">Message</label><textarea class="form-control" title="Message" id="custom_Message" name="custom_Message"></textarea></div>
<div><input class="btn-large btn-inverse btn" type="submit" value="Submit"></div>
</form>
</div>
I've tried all the options with:
remDr$findElement()
but get the same error:
Error: Summary: NoSuchElement
Detail: An element could not be located on the page using the given search parameters.
The server is definitely up and working - I've successfully taken a screenshot of the site page.
Can anyone help with how to detect the form elements so I can populate all and send please?
You didn't mention what you tried with findElement(). Here's a minimal working example that includes your form and code that finds and populates the "Full Name" box. First, I write the HTML code for the form to a temporary file:
html <- '<div id="form">
<form accept-charset="utf-8" method="POST" novalidate="">
<div class="form-group"><label for="form_Name" class="control-label">Full name<sup>*</sup></label><input required="" pattern="^***+(.****" class="form-control" title="Full name" id="form_Name" type="text" name="form_Name"></div>
<div class="form-group"><label for="form_Email" class="control-label">Email address<sup>*</sup></label><input required="" class="form-control" title="Email address" id="form_Email" type="email" name="form_Email"></div>
<div class="form-group"><label for="form_Company" class="control-label">Company name<sup>*</sup></label><input class="form-control" title="Company name" required="" id="form_Company" type="text" name="form_Company"></div>
<div class="form-group"><label for="custom_Message" class="control-label">Message</label><textarea class="form-control" title="Message" id="custom_Message" name="custom_Message"></textarea></div>
<div><input class="btn-large btn-inverse btn" type="submit" value="Submit"></div>
</form>
</div>
'
tmp <- tempfile(fileext = ".html")
cat(html, file = tmp)
Load RSelenium, navigate to the page, find the form element, and populate it:
library(RSelenium)
rD <- rsDriver()
remDr <- rD[["client"]]
remDr$navigate(paste0("file://", tmp))
# Find and populate the field
webElem <- remDr$findElement(using = "id", "form_Name")
webElem$sendKeysToElement(list("Foo Bar"))
# Close browser
remDr$close()
You can refer to resources like https://ropensci.org/tutorials/rselenium_tutorial/ for more information.
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.