I am using Spring's form:input as below :
<form:input type="number" .....>
in my jsp but when I check the html that is rendered on the browser it shows like :
type="number" type="text"
i.e., two type attributes are generated in the html.
On the other hand, if I check using inspect element option in the browser, it shows correct - only type="number" as expected.
Edit- My Question: Why am I getting two type attributes in generated html (type="number" type="text") ? How to get it resolved?
Spring form:input tag doesnt have any attribute named type and the type=number used in your code belongs to html5 input tag
Also have a look at HTML Text Input allow only Numeric input
Spring form tld lists the valid attributes of form:input element here
HTML 5
with <!DOCTYPE html> has native solution:
<input type="number">
Beware that it does not behave in standard way in some browsers.
Try input type="number" to see the HTML5 version in action.
See also https://github.com/jonstipe/number-polyfill for transparent support in older browsers.
I know this is old, but i found a solution that works just fine for me.
The spring:input form tag doesnt support the type attribute and there is no such thing as spring:number.
But you can use jquery to add the type="number" attribute to the parsed html.
I used:
$(".selector").attr({
"type" : "number",
});
Related
I have to modify a code using Struts. More precisely, I have to modify the style of some HTML inputs that are coded as <html:text> Struts tags.
So for example, I have:
<html:text name="myName" property="myProperty"
maxlength="24" size="25"
onchange="JavaScript:fooBar();" />
The inputs are actually displayed with disabled content and I would like to modify this. (The web browser I'm working on is IE 11).
EDIT:
The Struts tag actually generate this HTML :
<INPUT onchange=JavaScript:myFoo();myBar(this);
disabled="disabled"
maxLength=24
size=25
value=myValue
name=myProperty>
So it is clear that the disabled attribute is the origin of the problem but I don't know what might be the cause why Struts generates it in this case.
EDIT:
It appears that the display is different from a version of Internet Explorer to the other, for example when using IE 10, the inputs are not disabled and the disabled attribute value is an empty string (i.e. disabled="" in the HTML tag).
I made a page using a form with few input "number". I used the html output tag to display the result. But in MSIE, the calculations were performed, but the output tag would not display them. Is there a simple workaround or alternative? It works if i use an input tag in place of the output tag, but then the result is displayed in a box which doesn't format very nice. (I thought the solution would be rather simple, like: (-"I have variableresult apples." - )
HTML 5 output tag is not supported on IE (or EDGE). So you are stuck with using input tag. You can, however, always use CSS to fix the layout of your screen.
If you want to support IE, you would have to go the old fashion way i.e. use JS with CSS
Output tag is not supported by MSIE or Edge according to W3Schools, a solution using Javascript can be found here. Additionally you can just use CSS to style the output-input as you wish.
I write a code might helps you, because I didn't clear with your question.
<form onsubmit="return false" oninput="o.value = parseInt(a.value) + parseInt(b.value)">
<input name="a" type="number" step="any"> +
<input name="b" type="number" step="any"> =
<output name="o"></output>
</form>
I made simple calculator.
OUTPUT tag will not support in IE.
I was contacted by my client saying that users complaint saying that some fields now show a tooltip with a message "Please Fill out This Field". I couldn't believe what I heard... but the client is right - using latest Chrome version some fields show a browser tooltip with this message even side by side with my validators!
What's the problem? What am I missing?
Thanks.
EDIT:
The HTML generated by my user control is as follows:
<input name="tbMontante" type="text" maxlength="8" size="10" tbMontante" class="Montantetextfield"
FieldName="Montante"
Required="True"
AllowDecimalValues="True"
/>
EDIT:
My doctype is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Should my browser use HTML 5 to parse it?
Are you using the HTML5 required attribute?
That will cause Chrome 10 to display a balloon prompting the user to fill out the field.
https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate
You can disable the validation in the form.
Put novalidate="novalidate" on <form> tag.
<form novalidate="novalidate">
...
</form>
In XHTML, attribute minimization is forbidden, and the novalidate
attribute must be defined as <form novalidate="novalidate">.
http://www.w3schools.com/tags/att_form_novalidate.asp
To stop that Html5 popup/balloon in Web-kit browser use following CSS
::-webkit-validation-bubble-message { display: none; }
As I mentioned in your other question:
The problem to do with that fact, that you invented your own non-standard attributes (which you shouldn't have done in the first place), and now new standardized attributes (or attributes in the process of being standardized) are colliding with them.
The proper solution is to completely remove your invented attributes and replace them with
something sensible, for example classes (class="Montantetextfield fieldname-Montante required allow-decimal-values"), or store them in JavaScript:
var validationData = {
"Montante": {fieldname: "Montante", required: true, allowDecimalValues: true}
}
If the proper solution isn't viable, you'll have to rename them. In that case you should use the prefix data-... because that is reserved by HTML5 for such purposes, and it's less likely to collide with something - but it still could, so you should seriously consider the first solution - even it is more work to change.
You need to add the attribute "formnovalidate" to the control that is triggering the browser validation, e.g.:
<input type="image" id="fblogin" formnovalidate src="/images/facebook_connect.png">
If you have an html form containing one or more fields with "required" attributes, Chrome (on last versions) will validate these fields before submitting the form and, if they are not filled, some tooltips will be shown to the users to help them getting the form submitted (I.e. "please fill out this field").
To avoid this browser built-in validation in forms you can use "novalidate" attribute on your form tag.
This form won't be validated by browser:
<form id="form-id" novalidate>
<input id="input-id" type="text" required>
<input id="submit-button" type="submit">
</form>
In Chrome (v.56 is what I'm using but I AFAIK this applies generally) you can set title=" " (a single space) and the automatic title text will be overridden and nothing displayed. (If you try to make it just an empty string, though, it will treat it as if it isn't set and add that automatic tooltip text you've been getting).
I haven't tested this in other browsers, because I found it whilst making a Google Chrome Extension. I'm sure once I port things to other browsers, though, I'll see if it works in them (if even necessary), too.
Hey, we just did a global find-replace, changing Required=" to jRequired=". Then you just change it in the jquery code as well (jquery_helper.js -> Function ValidateControls). Now our validation continues as before and Chrome leaves us alone! :)
I have an XHTML 1.0 Strict document with an input field with autocomplete='off'. The w3c validator tells me that in strict documents you may not use autocomplete. So is there an alternative without changing the document type?
No. XHTML 1.0 provides no means to tell browsers not to help users fill in form fields.
You can use javascript. Write a little function that clears all of the input fields in a form by settings there value to an empty string. On page load, call the function, but call it in a setTimeout of about a second or so. If a value has been automatically entered into a field by the browser, it will be wiped by the javascript. The only problem with this is that the autocomplete value may be temporarily visible in the field before it is replaced.
You can solve this issue simply by using jquery
//Try this one:
$(document).ready(function(){
$("input.autocompleteOff").attr("autocomplete","off");
});
//For all textbox -
$(document).ready(function(){$("input").attr("autocomplete","off");});
//HTML
<input type="text" name="field" id="field" class="autocompleteOff" />
How about putting a hidden and fake password field like
<input type="password" name="stupid_autofill" id="stupid_autofill" value="" style="display:none;">
before the real password field. This generally works on the basis of the browser trying to guess the input field before the password field.
The correct solution in this latest version is put on the input
autocomplete = 'false'.
Is there any way to use placeholder on <input type=number>?
I've just checked against the HTML5 spec for input where a type is number and it explicitly says that the placeholder attribute may not be used. I also had errors with http://validator.w3.org when I tried to validate html with an input type of number with a placeholder attribute. Looks like browsers may support this but it's not valid in the HTML5 spec.
#zachleat is correct, the placeholder attribute is allowed in the latest HTML5 spec:
HTML 5.1 2nd Edition: forms, number-state-typenumber (see the bookkeeping section)
The following common input element content attributes apply to the element: autocomplete, list, max, min, placeholder, readonly, required, and step content attributes;
Here is the Placeholders section in the MDN Web Docs about <input type="number">: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Placeholders
Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each <input>. This is where placeholders come in. A placeholder is a value that demonstrates the for the value should take by presenting an example of a valid value, which is displayed inside the edit box when the element's value is "". Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.
Using Placeholder: <input type="number" placeholder="10">
Using Min and Max Values: <input type="number" placeholder="10">
Using Value: <input type="number" value="10">