At this moment I use Tomahawk20 (v1.1.14) in Tomee (v1.7.4) for my input fields in the form:
<t:inputText id="email" value="#{bean.klant.email}" maxlength="255" size="50" readonly="#{bean.aktie.readonly}" />
The #{bean.aktie.readonly} returns true or false. Tomahawk takes care of the setting of the readonly attribute.
Now I want to change to bootstrap.js. Here I can use the normal <input /> tag but the setting of the readonly causes me trouble. I searched the internet but could not find a solution. On one site they proposed to use a ternary test (${bean.aktie.readonly?'readonly':''}):
<input id="email" type="text" class="form-control" value="#{bean.klant.email}" maxlength="255" size="50" ${bean.aktie.readonly?'readonly="readonly":''} />
This however gives me the error:
javax.servlet.ServletException: Error Parsing /viewMetadata/bean/detail.xhtml: Error Traced[line: 99] Element type "input" must be followed by either attribute specifications, ">" or "/>".
What is the simplest way to achieve this?
<input> is not a JSF tag, which is what the problem is. You must use h:inputText http://www.tutorialspoint.com/jsf/jsf_inputtext_tag.htm
You're also missing some quotations. Try this:
<h:inputText id="email" styleClass ="form-control" value="#{bean.klant.email}" maxlength="255" size="50" disabled="${bean.aktie.readonly}" />
By the way, if you're interested in using Bootstrap with JSF, take a look at: http://www.bootsfaces.net It'll make it incredibly simple to write BootStrap pages that look awesome.
EDIT
Be sure to see the first comment, you may be able to do this a different way
Related
I want to programatically set the input to invalid if specific condition is met e.g
<input type="text" required />
Lets take a variable isValid an example, if that is false, i want that bubble to show up with default browser bubble (onsubmit) and the custom error thats provided. So to add custom errors i figured the solition
<input
type="text"
required
oninvalid="this.setCustomValidity('Please Enter valid name')"
oninput="setCustomValidity('')"
/>
However this only check if its empty, the extra validation comes from a field called pattern however that regex, so I was thinking maybe do a pretty much all case regex when is 'isValid == true' else a regex that will fall everytime e.g. (react)
<input
type="text"
required
pattern={isValid ? 'regex valid always' : 'regex fail always'}
...
/>
Could this even work? is there a better way that I'm not seeing?
Thanks to #revo for his help got it working with just:
<input
type="text"
required
pattern={isValid ? null : '(?!)'}
...
/>
I am currently doing homework, and following the instructions the book gives me, but I can't get the required or pattern tags to work. I am creating a survey form, and trying to make an error come up when the user doesn't type in their name, receipt number, or email. Here is a portion of it.
<label for"receipt">Receipt number *</label>
<input name="receipt" id="receipt"
placeholder="re-nnnnnn"
required="required"
pattern="^re\-\d{6}$" />
A few things i see
the required attribute does not need a value, the existence of the attribute is what makes it required or not.
the - does not need to be escaped so use ^re-\d{6}$ for the pattern attribute
the issue with the notepad++ is that the language formatting/color-coding is not up-to-date with all the attributes.
<input name="receipt" id="receipt"
placeholder="re-nnnnnn"
required pattern="^re-\d{6}$" />
there is no need to write like that u can just write : required and it will work
and whats your pattern i don't catch that
This little HTML5 password field works perfectly WITHOUT the oninvalid attribute (the pattern say: minimum 6 characters):
<form>
<input type="password" name="user_password_new" pattern=".{6,}" required />
<input type="submit" name="register" value="Register" />
</form>
See the jsFiddle here.
But when I add an oninvalid attribute that gives out a custom error message when user's input does not fit the pattern, the entire field NEVER becomes valid, see the code here:
<form>
<input type="password" name="user_password_new" pattern=".{6,}" oninvalid="setCustomValidity('Minimum length is 6 characters')" required />
<input type="submit" name="register" value="Register" />
</form>
See the jsFiddle here.
Can you spot the mistake ?
If you set a value with setCustomValidity() then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to allow for the effects of any other validations you have to clear the custom validity:
<input type="password" name="user_password_new" pattern=".{6,}" required
oninvalid="setCustomValidity('Minimum length is 6 characters')"
oninput="setCustomValidity('')" />
Since I stumbled on the same problem, here is my solution – tested and working with FF, Chrome, IE 10, Edge (Feb 2017).
<form>
<input pattern="1234" oninput="setCustomValidity(''); checkValidity(); setCustomValidity(validity.valid ? '' :'please enter 1234');">
<input type="email" required>
<input type="submit">
</form>
Explanation:
setCustomValidity(''); removes the custom error string which otherwise would always result in an invalid field at the validation process.
checkValidity(); does a manual validation – the same as it is happening at the form submisson. The result is stored in validity.valid.
The second setCustomValidity(validity.valid ? '' :'please enter 1234'); now sets the error string according to the validation result. If the field is valid it needs to be empty, otherwise the custom error string can be set.
I like to use like this:
<input type="email" name="Email" required oninvalid="setCustomValidity('ErrorMessage')"/>
And unplugged for all of valid input data
UPD, one more thing for better work:
$("input").attr("onblur", "setCustomValidity('')");
$("input").attr("oninput", "setCustomValidity(' ')");
Although the answers for this question had good information, they weren't sufficient for my needs. I need to display different messages depending on which validity rule failed. In the other examples, the same validation failure message is used for all valiation failures.
The "validity" property of a form object holds the key to creating more than one validation failure message.
You can review all of the different "validity" property properties at this web site.
https://www.w3schools.com/js/js_validation_api.asp
This example shows how to display two different validation messages. If you uncomment the console.log() line below you can watch the validity property change as you type in a field.
<label for="user_password_new">New Password:</label>
<input type="password" name="user_password_new" id="user_password_new"
pattern=".{6,}"
value=""
required
oninput="
setCustomValidity('');
checkValidity();
// console.log(validity);
if (validity.patternMismatch) {
setCustomValidity('Please enter at least six characters.');
}
else if (validity.valueMissing) {
setCustomValidity('This field is required.');
}
else if (validity.valid) {
setCustomValidity('');
}
// allow default validation message to appear for other validation failures
"
>
NOTE: Some validity checks are "type" specific. For example, the "rangeOverflow", "rangeUnderflow", and "stepMismatch" attributes get set if type uses them; type="number".
You can use title as long as you don't mind having 'You must use this format:' before your message. If you want a full custom message, the setCustomValidity() worked for me.
I have a HTML page.
I want to have a input box, that has a default value, that people can select, but not write over. It if for a share link to the page.
How can I do this?
EDIT: Using readonly="readonly" works and satisfies the solution, but the mouse pointer becomes a stop sign. I have chosen to use pure text instead of putting the share link into an input box. A javascript/Jquery solution will be possible but I don't use scripts on my website.
give input box readonly property like
<input type="text" id="a" value="abc" readonly="readonly" />
you can use it as
<input type="text" id="a" value="abc" disabled="true"/>
you can also dynamically change this attribute using javascript as per your requirement.
add
readonly="readonly"..........
please notice :
readonly - is a markup class
we dont have to write x=x
so we can only write x
hence
<input type="text" id="a" value="abc" readonly />
also work
Method 1
input type="text" id="a" value="abc" disabled="true"
Method 2
input type="text" id="a" value="abc" readonly="readonly"
In first case, text field will be disabled and you will not be allowed to select the value, where as in the second method you can select it, but not able to edit it..
Disabled field are not accessible in successor pages.
You can also dynamically change this attribute using javascript as per your requirement.
What is the difference between:
<input name="TextBox1" type="text" id="TextBox1" readonly="true" />
and:
<input name="TextBox1" type="text" id="TextBox1" readonly="readonly" />
When i set readonly to true it works somewhat different from readonly='readonly'. W3C standard says readonly should be 'readonly' & not 'true'. Why most of the browsers allow readonly='true' which has somewhat different functionality than readonly='readonly'?
Giving an element the attribute readonly will give that element the readonly status. It doesn't matter what value you put after it or if you put any value after it, it will still see it as readonly. Putting readonly="false" won't work.
Suggested is to use the W3C standard, which is readonly="readonly".
This is a property setting rather than a valued attribute
These property settings are values per see and don't need any assignments to them. When they are present, an element has this boolean property set to true, when they're absent they're false.
<input type="text" readonly />
It's actually browsers that are liberal toward value assignment to them. If you assign any value to them it will simply get ignored. Browsers will only see the presence of a particular property and ignore the value you're trying to assign to them.
This is of course good, because some frameworks don't have the ability to add such properties without providing their value along with them. Asp.net MVC Html helpers are one of them. jQuery used to be the same until version 1.6 where they added the concept of properties.
There are of course some implications that are related to XHTML as well, because attributes in XML need values in order to be well formed. But that's a different story. Hence browsers have to ignore value assignments.
Anyway. Never mind the value you're assigning to them as long as the name is correctly spelled so it will be detected by browsers. But for readability and maintainability it's better to assign meaningful values to them like:
readonly="true" <-- arguably best human readable
readonly="readonly"
as opposed to
readonly="johndoe"
readonly="01/01/2000"
that may confuse future developers maintaining your code and may interfere with future specification that may define more strict rules to such property settings.
readonly="true" is invalid HTML5, readonly="readonly" is valid.
HTML5 spec:
http://www.w3.org/TR/html5/forms.html#attr-input-readonly :
The readonly attribute is a boolean attribute
http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes :
The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.
Conclusion:
The following are valid, equivalent and true:
<input type="text" readonly />
<input type="text" readonly="" />
<input type="text" readonly="readonly" />
<input type="text" readonly="ReAdOnLy" />
The following are invalid:
<input type="text" readonly="0" />
<input type="text" readonly="1" />
<input type="text" readonly="false" />
<input type="text" readonly="true" />
The absence of the attribute is the only valid syntax for false:
<input type="text"/>
Recommendation
If you care about writing valid XHTML, use readonly="readonly", since <input readonly> is invalid and other alternatives are less readable. Else, just use <input readonly> as it is shorter.
readonly="readonly" is xhtml syntax. In xhtml boolean attributes are written this way. In xhtml 'attribute minimization' (<input type="checkbox" checked>) isn't allowed, so this is the valid way to include boolean attributes in xhtml. See this page for more.information.
If your document type is xhtml transitional or strict and you want to validate it, use readonly="readonly otherwise readonly is sufficient.
I'm not sure how they're functionally different. My current batch of OS X browsers don't show any difference.
I would assume they are all functionally the same due to legacy HTML attribute handling. Back in the day, any flag (Boolean) attribute need only be present, sans value, eg
<input readonly>
<option selected>
When XHTML came along, this syntax wasn't valid and values were required. Whilst the W3 specified using the attribute name as the value, I'm guessing most browser vendors decided to simply check for attribute existence.
According to HTML standards, the use of
<input name="TextBox1" type="text" id="TextBox1" readonly/>
is enough to make the input element readonly. But, XHTML standard says that the usage listed above is invalid due to attribute minimization. You can refer to the links below:
https://www.w3.org/TR/xhtml1/diffs.html#h-4.5
http://www.w3schools.com/tags/att_input_readonly.asp