<input type="text" name="username" maxlength="20" pattern="^[a-zA-Z0-9]+[_\.\-]?[a-zA-Z0-9]+" title="Please enter only alphabets or numbers or one of the special characters period(.), underscore(_), hyphen(-) and make sure it starts and ends with an alphabet or a number" required>
This validation message is being displayed for short period, as the message is long it should have stayed for long, but it disappears after few seconds.
How to manage the duration ?
You must have code that is causing this behavior, as by default the HTML 5 form validation merely adds a :valid or :invalid CSS pseudo-class to the input field.
You can add custom CSS styling to reflect this state to the user as follows:
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
You can read more about client-side input validation here:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation
Related
My question: Does the checkbox offer a pattern? If so, what is it?
The following is intended for additional context, as the community is willing to offer peripheral answers as well.
HTML input elements can accept a pattern, which comes in handy for 'real-time' error reporting. Say an input field has a pattern [a-z], any input with numbers will be marked with the invalid pseudo class.
I am unable to have a checkbox respond in the same manner.
I understand that sources (https://www.w3schools.com/tags/att_input_pattern.asp, as well as people in the comments) claim the pattern match is run after form submission, this does not seem to be the actual behavior. Here is an example of how the input's invalid is applied before the form is submitted: https://jsfiddle.net/kshe57ou/
I'm attempting to alter styles of my form based upon this pseudo class, and was hoping there was a way to style the checkbox as well, whether or not checkbox inputs had a pattern attribute.
You can still style a checkbox with the :invalid when it is required.
input[type="checkbox"]:required:invalid {
outline: 1px solid red;
}
input[type="checkbox"]:required:valid {
outline: 1px solid green;
}
<form>
<input type="checkbox" required />
<input type="submit">
</form>
Typically most people would style the label
input[type="checkbox"]:required:invalid + label {
color: red;
}
input[type="checkbox"]:required:valid + label {
color: green;
}
<form>
<input type="checkbox" required id="terms"/>
<label for="terms">I accept the terms</label>
<input type="submit">
</form>
Looks like the pattern attribute is unavailable for radio buttons and check boxes.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
It's not enough to read the spec, we must thoroughly read it.
i am double checking if everything is good with my website with also other browsers.
I noticed that in Chrome i can style readonly but in Internet Explorer you can't style it.
I normally have disabled on input fields but this readonly fields need to be readonly for putting it into the database.
If it's not possible. I want the readonly input not to be focused in with the mouse click. Because i now have a input field readonly with a placeholder. If i click inside the readonly input the text dissapears. So the input can change if i click inside it. Can that be prevented if my first question can't be done?
Thanks for your time, i appreciate it.
HTML readonly (need it to be readonly because i have to POST it)
<input id='overNightRate' type='text' name='overNightRate' class='form-control disabledDesign' placeholder="Bedrag word berekent" readonly/>
CSS
.disabledDesign:read-only{background-color:#003c85;
color: white;
opacity: 1;}
And i have more input fields which are the same but just calculate the sum of something. And that needs to be readonly also because it needs to store that input data to the database
If it needs to be readonly, I believe IE 11 supports the attr selector:
.disabledDesign[readonly='readonly'] {
background-color: #003c85;
color: white;
opacity: 1;
pointer-events: none;
}
<input id='overNightRate' type='text' name='overNightRate' class='form-control disabledDesign' placeholder="Bedrag word berekent" readonly="readonly" />
Edit: Tested on IE11 and works as expected.
I am trying to make the following selector work with my HTML:
input[type="submit"][value=" "]:not(.unwantedIconClass)/*, thisIsAComment*/
It will not work unless I replace value with actual text (and have the same text in the HTML, of course).
I have tried \007C\00a0\00a0 following advice from nbsp not working in CSS content tag but it does not seem to work either and makes Eclipse syntax coloring confused.
What I actually want is for the value to be invisible to the user but selectable using CSS. It does not matter what the value actually is.
This is because I do not have control about the input tag, only its value attribute.
Any suggestions ?
EDIT -- Since it is part of the problem, I will explain more:
The value of my value attribute is actually generated through a custom JSP tag, and that custom JSP tag is enclosed by a layout:submit attribute (Struts Layout).
<layout:submit
styleClass="tooCommonClass"
reqCode="notAReliableIdentifierEither">
<customTag:message key="keyToPropertyFile" />
</layout:submit>
Just use the empty string for value.
input[type="submit"][value=""] {
background-color: orange;
}
input[type="submit"][value="_"] {
background-color: purple;
font-size: 0;
color: transparent;
}
<input type="submit" value="" />
<input type="submit" value="Submit" />
<input type="submit" value="_" />
The part that says "Get notified when its ready via email" is the text in question. I am using the WP Maintenance Mode plugin https://wordpress.org/plugins/wp-maintenance-mode/ for this page on my Wordpress site. You can see the text box on my website http://boasish.com.
<div class="subscribe_wrapper" style="min-height: 100px;">
<form class="subscribe_form" novalidate="novalidate">
<input type="text" placeholder="Get notified when it is ready via email" name="email" class="email_input" data-rule-required="true" data-rule-email="true" aria-required="true">
<input type="submit" value="Submit">
</form>
</div>
.wrap form.subscribe_form input[type="text"] {
text-align: center;
font-family: 'Myriad Pro';
height:42px
padding: 11px 10px 10px 0;
width: 388px;
padding-top: 16px
}
It belongs to the placeholder attribute of the input element. As a pure CSS solution, you could change the color of the placeholder text to white when the <input> get :focused:
.email_input:focus::-webkit-input-placeholder { /* WebKit browsers */
color: white;
}
.email_input:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
}
.email_input:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
}
.email_input:focus:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
<input type="text" placeholder="Get notified when it is ready via email" name="email" class="email_input" data-rule-required="true" data-rule-email="true" aria-required="true">
Update
A clean css solution as suggested by Hashem Qolami is much better and unintrusive. I honestly didn't thought of such approach but already wrote 90% of my answer. I recommend that you go with it!
The textbox is using a placeholder tag, which gets automatically cleared the moment the user starts writing. I recommend that you leave it this way because it's not an entirely unexpected behavior. Most users are used to either situation where the text would disappear the moment you start writing or the moment you click on the field.
Shortly, it serves as a reminder or pointer what is it to be entered in this field.
The placeholder attribute specifies a short hint that describes the
expected value of an input field (e.g. a sample value or a short
description of the expected format).
The short hint is displayed in the input field before the user enters
a value.
Note: The placeholder attribute works with the following input types:
text, search, url, tel, email, and password.
If you still want to clear it the moment you click, you will have to use some sort of javascript. If you can directly edit the plugin in some way, you can add those to the check box:
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'Get notified when its ready via email"
If you cannot edit the plugin, you will have to do insert some javascript on the page, something in the lines of:
//Clear placeholder on focus;
$('.subscribe_form .email_input').focus(function()
{
$(this).attr('placeholder', '');
});
//Restore the placeholder on blur (loss of focus)
$('.subscribe_form .email_input').blur(function()
{
$(this).attr('placeholder', 'Get notified when its ready via email');
});
I see all over the web two ways that people code checkboxes, which one is correct?
<input id="a" type="checkbox"/><label for="a">checkbox</label>
<label for="b"><input id="b" type="checkbox">checkbox</label>
They both work fine in Chrome, is one more cross browser than the other? Is there any difference?
DEMO
Both are perfectly correct, valid and accessible as long as you associate input and label with for/id attributes, even when the input is right into the label` (see the best answer to the question linked by #AramKocharyan and my comment there)
Screen readers will read the associated label content when its user focus on a form element (input, select or textarea). When in a form, chances are they'll only read labels, legends and buttons (I mean reset, submit, image or button) because JAWS and alike have special modes; roughly the aim is to fill a form, not to read the content as with the rest of a web page.
You'll often find forms with a label on the left, input on center and some help on the right:
E-mail [ ] ex: johndoe#domain.com
With an input outside the label element, the hint will be coded with a span for example. It won't be heard by screen readers because it's not part of a label or submit button.
With an input inside a label element, you can put both the label and the hint into the label element:
<label for="email">
<strong>E-mail</strong>
<input type="text" id="email" name="whatever"> <!-- HTML4.01 doctype -->
<span>ex: johndoe#domain.com</span>
</label>
That way, the hint will be read to the AT user along with the real label.
Note: of course you'll style the strong and span differently, say resp. bold right-aligned and italic left-aligned. span isn't necessary for styling (just style label and cancel half of rules for strong) but it's more simple (simpler?) :)
It's as useful for errors as for hints:
<p class="error>
<label for="email">
<strong>E-mail</strong>
<input type="text" id="email" name="whatever" value="aaa"> <!-- HTML4.01 doctype -->
<span>ERROR: not a valid e-mail address. Example of a valid e-mail: johndoe#domain.com</span>
</label>
</p>
.error strong {
color: red;
font-weight: bold;
}
.error input {
border: 1px solid red;
}
.error span {
color: red;
}
That way, the error is read to screen readers (and color that they can't see or barely see isn't the only way of conveying information to them with the help of this text).
Either is correct.
Labels may contain inline elements (except other labels). Input elements are inline elements.
imho below:
Anyhow, I would not put the checkbox inside the label since it seems kinda weird to me. Labels are meant to label the input fields, hold a description, not to contain them.