So I've been having this problem for a while now, and I just can't figure out why it isn't working. I want to use html5 validation to validate my form, but only show a pink background on invalid inputs AFTER clicking on a button.
.submitted input:invalid {
background-color: pink;
}
I have this jsfiddle here representing the problem I have.
Why is this CSS selector not working? Is there any other way to achieve this?
If I remove the .submitted and just leave the input:invalid, it works instantly, but I want the validation to execute only AFTER I click the button.
I'm certain the script works, as I can see the class being added to my inputs via firebug, but the styling infuriatingly stays the same.
Aren't you simply looking for the following? Pardon if I misunderstood your question.
input.submitted:invalid {
background-color: pink;
}
For starters I'm not sure what you're trying to do with your jsfiddle.
Firstly, inorder to assess whether a field is invalid, you need to do some validation then say, add a class to the input to say if it's invalid.
Seeing as you're using jQuery, I'll give you an example using javascript.
$('form'/*could supply a name like [name="name"]*/).submit(function(event){
if($('input[name="firstName"]').val().length<3)$('input[name="firstName"]').addClass('error');
event.preventDefault();
}
Related
I have posted another similar problem yesterday. Here's the link.
Now I ran into a different problem. Under a rich-column of an extended data-table, I have added another 2 rich-datables. One table for the header, the other table for the table-data. All these were done to make sure our design doesn't get changed.
Now, coming to the problem, you can see the attached image down. [Intended Page Rendering][2]. This is what I need. But when the page loads, I generally get something like this [Actual Page rendering][3].
After looking through the generated HTML code, I can get the desired output by deselecting the background-color property of the rf-dt class. See the third image below.
[Generated HTML -code][4] - this shows by deselecting the background-color property of rf-dt class, I can achieve my purpose. But when I go to actual code and try to put the changes its not working... I tried to put this in the CSS class
.shipmentBrowseTable .rf-dt {
background-color: none;
}
where shipmentBrowseTable is the styleclass for outer Extended-data-table - the same styleclass used for inner data-table too.
The above code is not giving me the intended result. If someone can help me with this, it would be great.
.shipmentBrowseTable .rf-dt {
background-color: none !important;
}
the !important tag should override most styles
I'm asking what may be a silly question, and I apologize in advance.
I am working on something without access to the back end. I have this annoying little "magic box" where I can use HTML / CSS.
My question is this: I have a class with a link and I'm trying to hide that specific one.
So in this case I'm trying to hide this .ad_link href="/colt?ban-link=141"
I don't want to hide the entire .ad_link class, Just the specific class with that href attached to it. There are more items under the ad_link class that need to stay unhidden.
I hope my question makes enough sense, please let me know if I need to clarify more.
bigesgunshop.com It's located under the left side, the "colt" image/link
Try this:
.ad_link[href="/colt?ban-link=141"] {
display: none !important;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
or if you can add another class to this link, just add hidden defined as:
.hidden {
display: none !important;
}
Agree to #pawel, but this approach is not very maintainable.
I suggest it's in this case better to hide with inline style:
Foo
Or use an class with more importance to hide the link.
My code:
myTextItem = new TextItem();
myTextItem.setHint("Some text");
myTextItem.setShowHintInField(true);
myTextItem.setHintStyle("myTextItemHint");
My css:
.myTextItemHint {
color: gray;
}
My Problem:
My issue is that I can have that setShowHintInField(true) set OR my css getting applied, but not both.
I found more info about this on the link: http://forums.smartclient.com/showthread.php?t=14463 but I cannot come up with a common style / place for it, that would make the trick while the hint is inside the field.
My question:
What kind of css would I need in this case and how I tell the field to use it?
What I have tried:
With that setShowHintInField(true) line and without. Both cases: half of the solution is there. Not both halves.
FormItem has method setCellStyle() to set the style of specific cell.
Use
myTextItem.setCellStyle("myTextItemHint");
your CSS will look like this:
.myTextItemHint, .myTextItemHint input {
color: gray;
}
Override other properties also if needed
.textItem,.textItemFocused,.textItemDisabled,.textItemDisabledHint,.textItemError,.textItemHint
For more information on CSS, Please have a look at skin_styles.css that is already shipped along with standard skins in SmartGWT.
How do I style the HTML form validation error messages with CSS?
Currently, there is no way to style those little validation tooltips. The only other option, which is what I have chosen to do, is to disable the browser validation all together for now and rely on my own client-side validation scripts.
According to this article:
http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4
"The simplest way to opt out is to add the novalidate attribute to your <form>. You can also set formnovalidate on your submit controls."
Chrome up until version 27 provided a native look and feel for their validation error speech bubbles. The error bubble is made up of four containing elements that are not normative elements. These four elements are style-able via pseudo-elements that apply to separate sections of the bubble:
::-webkit-validation-bubble
::-webkit-validation-bubble-arrow-clipper
::-webkit-validation-bubble-arrow
::-webkit-validation-bubble-message
With the release of Chrome v28, they removed these non-standard selectors: https://bugs.chromium.org/p/chromium/issues/detail?id=259050
Use pseudo selectors, as easwee said. For example, to make the form element green when valid, and red when invalid, do something like this:
:invalid {
background: #ffdddd;
}
:valid{
background:#ddffdd;
}
If you need a full reference of these, head to Mozilla Developer Network
A required field will be invalid until the correct input is entered. A field that isn't required but has validation, such as a URL field, will be valid until text is entered.
input:invalid {
border:solid red;
}
for more info http://msdn.microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx
Im trying to override the grey text of a disabled input and textarea. At the moment Im only really concerned with it working in Webkit and Mozilla. At the moment Im currently using every trick in the book that I know of:
input[#disabled=true], input[#disabled],
button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled],input[disabled="disabled"], input[disabled] {
color: black !important;
}
Sure it does change the colour if I change it to something else, however when I choose black it is still greyed out a bit.
Any ideas? I am using Ext JS if I can use that to manipulate it. Thanks.
input.button-control[disabled]
{
color: #cccccc !important;
}
Here button-control is a class on the input element, whose text is overriden to grey when the disabled attribute is set.
I hope this helps.
I would prefer to go the JavaScript way to achieve best browser compatibility. I would use the ExtJS [http://www.extjs.com/deploy/ext-1.1.1/docs/output/Ext.DomQuery.html][DomQuery] and insert the CSS rules by adding specific class or directly injecting them as style attribute values.