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.
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
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'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/
I am using jquery.validationEngine.js for form validation .
I was downloaded this js from http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
this site.But it not works for checking validation for default value such as I have first name field whose value is "First Name".I want validation for checking that this field should not be blank but it not works because it contains default value "First Name".
Also I want this should work in jquery.validationEngine.js file because I have to many validations on form & I am using this js.
My field is
<input type="text" id="Uname" name="Uname" value="User Name" onfocus="if(this.value=='User Name')this.value='';" onblur="if(this.value=='')this.value='User Name';" />
If anyone using this file let me know & help to solve this problem.
If you wish to use validationEngine to validate your form the way you describe, there appear to be at least three solutions based on the documentation.
1) You can create a new custom regex in the translation file for each default text value, and then add that custom regex to the relevant form item. This is probably the trickiest of your options, as you will need to use a negative lookahead or something similar to get the regex correct.
2) Have the validator call one or more functions that you write to handle your special cases. I don't know if validationEngine allows you to pass parameters to the function--the documentation says nothing about that--so I'd guess it doesn't. This may mean that you will need to either write a separate function for each default value or else use a global variable to indicate the default value you are checking for. A function for your Uname field in your code snippet might look like this:
function checkUname(field, rules, i, options){
if (field.val() == "User Name") {
return "You must type in your username.";
}
Once that function is defined, you can use something like this to use it:
<input type="text" class="form validate[required,funcCall[checkUname]]" id="Uname" name="Uname" value="User Name" onfocus="if(this.value=='User Name')this.value='';" onblur="if(this.value=='')this.value='User Name';" />
3) You can write a single JavaScript function that goes through each field in your form and, if it finds the default value, changes it to an empty string. Then attach that function to the onsubmit event in your form. This may be the easiest option, but it depends on your function running before the validationEngine code. If that's not the case, then it won't work.
Here is a good example
How do you validate optional fields with default value?
Otherwise see the question I posted as identical question with the possible change
jQuery.validator.addMethod("defaultInvalid", function(value, element) {
if (element.value == element.defaultValue) return false;
}
instead of the switch/case
<input type="text" id="Uname" name="Uname" value="User Name" onfocus="if(this.value==this.defaultValue) this.value=''"
onblur="if(this.value=='') this.value=this.defaultValue" />
You should set the placeholder value using the HTML5 placeholder attribute instead of JavaScript.
I have a form with four different fieldsets. For jQuery validation, I would like the errors from the inputs in each of the fieldsets to be placed in an error block at the top of the specific fieldset. For example:
<fieldset id="contact">
<legend>Contact Information</fieldset>
<ul id="errors_contact" class="messages"></ul>
<!-- input elements -->
</fieldset>
<fieldset id="financial">
<legend>Financial Information</legend>
<ul id="errors_financial" class="messages"></ul>
<!-- input elements -->
</fieldset>
Can this be done with jQuery validation?
It can't using errorLabelContainer specifically, there's one setting/store for errorLabelContainer in the code, but you can use the errorPlacement and wrapper options for the effect you want, for example:
$("form").validate({
wrapper: "li",
errorPlacement: function(label, elem) {
elem.closest("fieldset").find(".messages").append(label);
}
});
Instead of the standard .insertAfter() (normally placing the <label> after the element it goes with), this wraps it in a <li></li> and appends that to the .messages container for the current <fieldset>.
I did it this way:
I had a form that had to validate multiple controls - but I wanted one area of error - and one message for all - one line.
Default if you use errorLabelContainer it puts the validations as "add-ons" - that is multiple validations create many rows in the errorlabel.
I noticed one thing - if it had the height of labelcontainer less than 30px, it made a new empty row second time. I don't know why.
In my case it's a label - but it can be a div too, of course. In my HTML I have this (assuming you have the jQuery validation.js and base):
Myform is the name of the form - then the different HTML controls - any type - for example:
INPUT id=theNameofcontrol type=checkbox name=theNameofcontrol validate=required:true
Then the container for the error message (don't know how to make it look like HTML :)
label id=errorlabel name=errorlabel style=font-size:1.3em;height:30;color:red; /label
In my onclick function for the form, I put empty messages as errormessages and put a message if the form wasn't valid and return false if it isn't (so I don't post it.)
Of course you can just fill in every custom message - but I wanted to have one line regardless of how many errors.
$("#MyForm").validate(<br>
{<br>
errorLabelContainer:"#errorlabel",<br>
messages : <br>
{theNameofcontrol: {required: "" },<br>
theNameofcontrol2: {required: "" },<br>
theNameofcontrol3: {required: "" }<br>
} <br>
);<br>
<br>
if(! $("#MyForm").valid())<br>
{<br>
$("#errorlabel").html("My message when not all contols are valid!");<br>
return false;<br>
}
Hope this is helpful for you. You should be able to do the same for the fieldset if you have a container for all the "objects" in the group.
To validate one control you use:
$("#MyForm").validate({errorLabelContainer:"#errorlabel",messages :{theNameofcontrol: {required: "This has to have a value" }}}).element("#theNameofcontrol");
Good luck