I've not used Knockout Validation and I'm trying to get a feel for what can be done with it.
I'm trying to figure out if it is possible to display an icon rather than an error message to the right of an input tag when there is an error. And, if the user hovers over the icon, the error message is displayed.
Has anyone done this or have an idea of how to accomplish this?
Thanks.
EDIT: (more detailed example of what I'm trying to do)
Say I have the following in my view model:
var firstName = ko.observable().extend({required: true});
My HTML:
<input data-bind="value: firstName" />
My understanding is that if the first name textbox were left blank, then (by default) some text would be displayed to the right of the textbox stating that this field is required.
What I'm trying to understand is how to change the default behavior of displaying error text on the right to displaying an icon on the right which, when hovered over, will popup the error message.
So, a start would be something like:
<div data-bind="validationOptions: {messageTemplate: 'myCustomTemplate'}">
<input data-bind="value: firstName" />
<input data-bind="value: lastName" /> //also required
</div>
<div id='myCustomTemplate'>
//This icon should only display when there is an error
<span class="ui-icon ui-icon-alert" style="display: inline-block"/>
//css/javascript would display this when user hovers over the above icon
<span data-bind="validationMessage: field" />
</div>
I have no clue if I'm using the messageTemplate feature correctly. I also wouldn't know what to bind the text to in the customTemplate in order to display the correct error message for each error. IOW, firstname and lastname could have custom error messages. If they are both using the same template, how does the template accomodate the custom error message?
I hope that makes sense.
It is possible to show an icon and to display the error message on hovering.
In one project we are doing something similar. We show a badge with a error number, but we use decorateElement to highlight the fields and errorsAsTitleOnModified to show the errors when hovering over the input.
To create a error messageTemplate you should wrap your template in a script tag. It works like templates of the ko template binding.
Inside the template you can access the validated observable by referring to 'field'. The error message is stored in the property 'error' of your observable.
<script type="text/html" id="myCustomTemplate">
<span data-bind="if: field.isModified() && !field.isValid(),
attr: { title: field.error }">X</span>
</script>
I have created a fiddle to show this in action: http://jsfiddle.net/nuDJ3/180/
Related
I am building a React site and have to support accessibility across browsers.
On my site I have inputs and I perform the validations only on blur, if the input is not valid - an error message is inserted after the input.
My problem is that the screen reader skips this new error element and jumps to the next one - it seems that the reader calculates the next element when it's focused on the previous one (in my case the input). and therefore when I "tab" and blur out of the input it goes to the next tabbable element - and skips the new error.
The new error element that's getting skipped has all required attributes, (it is getting focused if I do shift + tab from the next element that was reached after the input). I have also tried adding aria-live="assertive" to the new error message element but it doesn't help.
Any solution for this?
The aria-invalid and aria-describedby recommendations by #jongibbons is good but the actual announcement of the error message when it's added should be handled by aria-live. You mentioned you tried aria-live but that it didn't work. It might depend how you were trying to use it.
If you try to add that attribute dynamically when the error message is generated, then it won't work. aria-live must exist on the page before you add text to it. For example, the following won't work:
Before the error:
<input>
After the error
<input>
<div aria-live="polite">this is the error message</div>
If the <div> is added dynamically, it won't be announced even though it has aria-live.
Instead, your code should look like this:
Before the error:
<input>
<div aria-live="polite"> <!-- empty area for error message --> </div>
After the error
<input>
<div aria-live="polite">this is the error message</div>
In this case, "this is the error message" will be announced by screen readers when the new text is injected into the page.
And as #jongibbons said, associate the error message with the input field via aria-describedby.
<input aria-describedby="foo">
<div id="foo" aria-live="polite"> <!-- empty area for error message --> </div>
For the behaviour you describe to be accessible, you want to look at using the aria-invalid and aria-describedby attributes.
When a field has an error, toggling aria-invalid on the <input> from false to true will cause screen readers to announce the change in state.
Adding an aria-describedby relationship between your <input> that's in error and the HTML element containing your error message should then also cause the screen reader to announce the error message.
<label for="email">Email address</label>
<input type="text" name="email" id="email" class="error"
aria-invalid="true" aria-describedby="email-error">
<p class="error-message" id="email-error">
Error: This doesn't look like a valid email address
</p>
Here's an example on MDN with code that might match what you need:
Using the aria-invalid attribute
Materialize.css input tags onblur throw a console error.
I am building a Rails 5 app and using materialize css. When I add an input element like this:
<div class="input-field">
<label for="name">Email</label>
<input id="name" name="project[name]" type="text">
</div>
I get the following error.
jquery.js:4411 Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: required
at Function.a.error (jquery.js:4411)
at PSEUDO (jquery.js:4757)
at y (jquery.js:5275)
at a.compile (jquery.js:5414)
at x (jquery.js:5491)
at a (jquery.js:3984)
at Function.a.matchesSelector (jquery.js:4377)
at Function.filter (jquery.js:5734)
at init.is (jquery.js:5591)
at window.validate_field (materialize.min.js:6)
If I remove type="text" then the error goes away BUT the input label text stays in the way of my user input. If I put it back in, the label text will move out of the way on focus, but I get console errors which affects the rest of my js. Does anyone know how to resolve this issue?
In many forms I am developing with jQuery validation plugin I have many fields to fill like the following:
<p>
<label>Nome</label>
<span class="field">
<input type="text" name="nome" id="nome" class="smallinput"" value=""/>
</span>
</p>
and these fields are declared as required and if they are empty a message error is correctly shown. After that I would like the error message to hide when the user enters information. However, this does not happen. How can I set this? Moreover I have some fields which should contain email addresses whose rule is
email:{
required: true,
email: true,
},
and it happens that some email addresses are claimed to be not valid while instead they are. Is there a way to fix this?
SOLUTION
For those who might be interested, what I have tried is to add a class "req" to span elements which are required and when the user types in something and the value changes and is different from the void string, then an attribute style is added to generated label error, like that:
jQuery(".req").on('input',function(){
if (this.value != "")
jQuery(this).find("label").attr('style','display:none !important');
});
This seems to work fine. Obviously, if the value becomes again void then the red label error message is shown again.
I'm getting a WC3 error that has me completely confused.
The for attribute of the label element must refer to a form control. …you are human: Write code in box »
<label for="txtCaptcha"> Write code in box » <span id="txtCaptchaDiv" style="color:#29372F; font-weight:bold;"></span><!-- this is where the script will place the generated code -->
<input type="hidden" id="txtCaptcha" name="txtCaptcha"/></label><!-- this is where the script will place a copy of the code for validation: this is a hidden field -->
<input type="text" name="txtInput" id="txtInput" size="30" />
I have for="txtCaptcha" referring to the hidden input control id, so I am not sure what WC3 is saying. Any help will be appreciated.
Additional information was requested. I attempted to put the entire form here, but for some reason the code block does not accept all the code. It breaks it up and then when I try to submit, it won't let me because the code is not in a code block.
The page is here http://skeeterz71.com/gothic/quote-page.html line 641
Line 641, Column 55: The for attribute of the label element must refer to a form control. …you are human: Write code in box »
Thank you
The error you mention is as follows:
The problem is that the hidden field is not labelable, as you can read directly from the specifications:
4.10.2 Categories
Some elements, not all of them form-associated, are categorized as
labelable elements. These are elements that can be associated with a
label element.
button input (if the type attribute is not in the hidden state) keygen
meter output progress select textarea
HTML/Elements/input/hidden
<input type="hidden">
The hidden state represents a value that is not intended to be
examined or manipulated by the user.
I am trying to implement a dynamic form in Ember. I want the user to be able to select an option from a dropdown and add it to the form. Also each added field should have an "x" that deletes the element from the form.
I've put together something that seems to work (JSFiddle) but whenever an added form element is deleted (the x next to it is clicked), I get an error in the console that says: "Uncaught TypeError: Cannot read property 'handler' of undefined".
I think it may have something to do with the handlebars "action" helper that is attached to the "a" tag. I'm not sure though.
Here is a sample of the delete function that is called when the "x" next to the inserted input element is clicked.
deleteOption: function (event) {
this.removeChild(event);
this.rerender();
},
and here is the template for the "newOption" view that is used when a new input element is added (after clicking the "+" button)
<script type="text/x-handlebars" data-template-name="newOption">
<p>
<label {{bindAttr for="view.name"}}>{{view.label}}</label>
<br /><input class="input-medium option" {{bindAttr id="view.name" name="view.name"}} type="text" maxlength="5" />
<a href="#" class="delete addsub" {{bindAttr id="view.name"}} {{action deleteOption view target="view.parentView" }}>X</a>
</p>
</script>