This is an important issue for the blind community which I'm trying to adress. How would I tell blind visitors that the username is taken?
My current set-up is not important but for examples case, I've currently got a Jquery implementation that checks the user input against a php script over ajax, which returns a json which I then display on screen in an error field. Very basic, and beyond the scope of my issue as it is working perfectly.
But if I'm blind, I won't notice that the username Batman is already taken or can't contain spaces, and that my password requires at least 7 characters.
Alternatively, the errors are listed on the error landing page after the form is submitted without javascript- it's chunky but it works. A better more dynamic solution and suport would be optimal.
As a screen reader user I usually just fill out the entire form, submit it, and if it doesn't work I then look for error text. In order to notify a blind user about invalid data before the entire form is submitted take a look at the aria-live="assertive" option scene on the following test page, section d.
http://www.accessibleculture.org/articles/2011/02/aria-alert/
Out of all the test cases section d is the only test that worked for me under firefox 18.0.1 with Jaws 13.0. For some reason the alert option doesn't work. You could use the assertive option to notify the user that something was wrong.
Related
I am trying to have my Pupeteer autofill information on a PayPal page, but when I try typing it will instantly delete my info, here is a clip showing what happens: https://gyazo.com/205c07d98126ec31fe5c06551164d8d1
Here is my code:
await page.waitForSelector('input[id="cc"]');
page.type('#cc', '1234123412341234');
Not sure what is going wrong, I have tried changing the elements 'value' attribute, but when submitting the form it does not recognize the information.
Not sure what else to do! :(
Two things that come to my mind to check:
check if you have the same problem with other input fields out of Paypal. It could be important to isolate the problem and make a more precise research
check if the problem is related only to Puppeteer or is shared with other UI testing frameworks (like Cypress, TestCafè, Selenium). It's important to understand if it's Paypal that is doing something to block every browser automation tool (I would do it if I were in their place) or if they have a bug (it seems a mistake issue with React/Vue controlled input fields) that has something related to the automation.
I'm working on some forms for a Website. Currently I have the usual HTML Browser check (with "required"-tag and patterns and stuff in the inputs), I check the values in a JavaScript before submitting and I do a server-sided check of the data after submitting.
Everything works fine, even if I have only one of them enabled, but it seems a little bit overkill to me, so my question is if I can just leave the Javascript check out? Of course I need to keep the server chek :D
Looking forward to your answers!
You must always validate input at serverside. Javascript is optional and it just to make life of your users easier. Your users get better experience. That's it.
All modern browsers support the HTML5 form field attributes. As you are using those, you may skip the JS validation.
To expand a little on the current answers:
Server side validation is always required, you mentioned that.
HTML and Javascript validation are used for different things.
The HTML required tag can be used to check a form's fields are not blank before a form submission.
Javascript validation allows you to be far more flexible with what you want to validate and when. However, it requires more work because it's not as simple as a required tag.
With Javascript you can do far more. Some examples:
Validation that occurs as soon as a user starts to type
Have the box highlight a different colour
Show an error message
Have a big red cross appear next to invalid fields or a big green one next to valid ones
Spin your page around when the user enters something invalid. (don't actually do that)
etc.
Also note browser support for the required tag.
I have a multi-step form for capturing leads and generating potential client estimates. I modified a framework that I found elsewhere on the web. The form looks and works beautifully now, but I need to pass the values from the form through PHP to email. I'm not a stranger to this process, but I believe that something in the Javascript required to make the form beautiful and interactive is voiding the values that should be passing from the form to the email.
What I have done to test (trust me, I hate to bother people, but this is driving me nuts):
I eliminated the fieldsets and any other extra form-formatting, all links to CSS and Javascript. I tested the form and it worked as expected. I took the name in the name="name" field and emailed it to me no problems.
I systematically reconstructed the form until it was complete with fieldsets and CSS. I tested at every step and the form continued to pass the name into the email.
Finally, I added the javascript used for transitions and calculations to the bottom of the page and it no longer performs as expected. It triggers the PHP, but it doesn't redirect as I want it to. and it sends the labels in the email, but doesn't pass the values from the form. If I move the Javascript links to the head, the transitions don't occur making it impossible to navigate to the submit button. Any clues?
Here is the link to the form: http://bigislandwebsitedesign.com/test_form.html
You can follow the links to the various scripts from the source.
Specifically, in a login screen with two visible inputs (a text input for the username, named 'username' and a password type field for the password, named 'password) and two hidden fields (URLs to forward successful resp. faulty requests to after validation), what can cause Chrome to fail to autofill credentials?
If I go to the login screen in Chrome, having previously saved exactly one set of username and password, it mostly autofills the fields correctly. However, every 3-15 times loading the page (apparently more often on a slow connection) it will fail to do that, leaving the fields empty. I've tried attaching events directly in the HTML to listen for change in the fields, but got nothing (literally, the events did not fire).
I use KnockoutJS, but this happens long before ko is activated, or even loaded. I use JQuery 1.7.1 and RequireJS 1.0.5. (Updating them does not seem to affect the problem.)
Are there code patterns known to have this effect? Could it be a weird bug in Chrome? Cosmic radiation?
This problem was caused by changing the action of the form with JS. If you do so, Chrome will, sometimes, decide this is not the same form at all, and refuse to autofill credentials.
It was hell finding this, so I'm answering this question myself, then maybe some poor soul somewhere can find a solution to their problem here...
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Recommendation for javascript form validation library
I've got a HTML5 login form. The user enters their Username and Password. Currently if the password is incorrect an alert box is thrown which informs them. However, alert boxes are ugly and make everything look horrible. I'm looking for alternatives, easy to implement ideas that others find much more elegant. Something you don't have to click to get rid of but make it very aparent to the user what happened.
My advice is to check nice jQuery plugin for form validation:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Perhaps a jQuery hide/show of an error message along side the offending text box is what you need.
Your question suggests that the validation is being done on the client side, not the server. If that's not correct, you can make an Ajax call to the server with the credentials. Your server can do the lookup in the directory or database, determine whether the person is a valid user, and respond accordingly.
I concur with duffymo.
If the password field is incorrect for instance, instead of an alert box you can probably try using a colored border to highlight the field(use filters and shadowbox for better effects) and make span element come along side the password field indicating that the user has entered the wrong data (You can use a text and image combo or just plain text, concise.) and fadeout the span element after sometime. I have used this concept extensively for some of the pages i have created in my company.