AngularJS / JQuery - form input without an associated label - javascript

I have a problem with "Form input without an associated label". This appears on [textarea], [select], [select], [input] classes.
Here is my code:
<div class="panel-body">
<form name="f" data-ng-submit="addTodo()">
Nazwa:
<textarea class="form-control" name="newTodo" data-ng-model="formData.newTodo" required></textarea>
Typ:
<select class="form-control" name="type" data-ng-model="formData.type" data-ng-option="value.name for value in categories" required></select>
Estymowany czas:
<select class="form-control" name="estimates" data-ng-model="formData.estimates" data-ng-option="value + 'h' for value in [] | rangeTime:9:true" required></select>
Data:
<input class="form-control" type="text" data-ng-model="formData.date" data-ng-data-picker="" name="date" required readonly="readonly">
<br />
<button class="btn btn-success" data-ng-disabled="f.$invalid">Add <span class="glyphicon glyphicon-ok"></span></button>
</form>
Thanks for help!
Moderator Clarification: The quoted message stated above is a warning provided by JetBrains products within the IDE. The OP is most likely using either
WebStorm or IntelliJ for front-end development.

This is not an error, however it's recommended to associate labels with corresponding form elements for the sake of UX convenience. For example for the name field:
<label for="name">Nazwa:</label>
<textarea class="form-control" id="name" name="newTodo" data-ng-model="formData.newTodo" required></textarea>
I assume your IDE is smart enough to identify missing labels and provide you with a reasonable suggestion to add those.

I guess WebStorm?
just follow the advice and add the label.
label is useful especially for radio, checkbox so that you can active them by merely clicking on the label.

Related

How to remove auto suggestion from an input tag

I need someone to please tell me how to remove this auto-suggested text below the input field. I have tried autocomplete="off" , autocomplete="false". I've also placed <form autocomplete="off"></form> in form tag.
Anyone with a solution please help.
<div class="col-md-6">
<div class="form-group">
<span class="label">Enter Postal Code</span>
<input type="text" class="form-control" id="search_input" autocomplete="off" placeholder="Type postal code ..." required>
</div>
</div>
Here you can see which browsers support the autofill attribute CaniUse. Here is a simple work around from this source: Turning off form-autocompletion.
You can work around with autofill="new-password"
"If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete="new-password"."
<form method="post" action="/form">
<div>
<label for="cc">Enter Postal Code:</label>
<input type="text" id="cc" name="cc" autocomplete="new-password">
</div>
</form>
Lastly, instead of pairing a <span> with the input element, it is common practice to use the <label> element. Please read more here label
Apply autocomplete="off" to your form not the input box.

Voice over is not reading what I am typing in textbox

Below is my code:
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
whenever voiceover highlights the input text field it reads "You are currently on text field, inside web content. To enter text in this filed, type. To exit web area,.."
and when I Start typing it says nothing.
and checked other appilcation or websites it reads what i am typing.
but in my case its not reading.
Please help if anyone knows the solution.
Add title attribute to the input element and provide additional text.
Adding aria-label to the input elements should also be picked by the screen readers.
http://pauljadam.com/demos/title-aria-label.html provides details on how different browsers and screen readers treat these attributes.
Your code seems pretty fine. I tried with a chrome plugin called ChromeVox everything seems to be fine except that add the lang attribute to the parent html tag and enclose everything in a body tag some thing like this.
<html lang="en-US" style="height: 100%;">
<body>
<form>
<div class="form-group loginFormGrp">
<label class="caption">Backup Cloud</label>
<div class="custSelect loginSelect">
<label class="caption">Server URL</label>
<input type="text" aria-label="Server URL" name="serverUrl" class="form-control" placeholder="example.server.com" value="">
</div>
<div class="form-group loginFormGrp">
<label class="caption">Email</label>
<input type="text" aria-label="Email" name="email" class="form-control" placeholder="user#example.com" value="">
</div>
<div class="loginBtnRow">
<button tabindex="0" type="submit" class="lgBtn btn btn-primary btn-block">Continue</button>
</div>
</div>
</form>
</body>
</html>
I'm not sure if this'll help, but You may try to update fields value attribute, every time user modify text field. Something like that:
document.querySelectorAll('input[type="text"]').forEach(function(v){
v.addEventListener('input', function(){
v.setAttribute('value', v.value);
});
});
But I wish someone provide better answer, without using extra JavaScript.

How to use Twitter Boootstrap's form validation tooltip messages?

First of all, I am not asking about using Bootstrap's javascript guide to write tooltips from scratch which is in the docs.
I recently used type="email", along with v3.3.1. It automatically validated and showed awesome tooltips for wrong email. I am looking to extend this to custom fields (type="text" and so on) with least amount of code. Looking at Bootstrap's docs, I didn't find any such documentation.
I am wondering it I can use something that resembles formvalidation.io for validation without writing a ton of javascript combined with above tooltip style.
I can do javascript, but if there's a better way, I would like to know.
Right now, my form is extremely simple, no tooltip Javascript and this works:
<form ng-submit="submit()">
<!--<input type="hidden" name="_token" value="{{ CSRF_TOKEN }}">-->
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" ng-model="data.email" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" ng-model="data.password" id="exampleInputPassword1" placeholder="Password">
</div>
</form>
you can change/edit the message of the tooltip using pattern
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Enter a letter from the english alphabet ')"
onchange="try{setCustomValidity('')}catch(e){}" />
Good Link on patterns right here: it has time and a lot of data types patterns
If you use type="email" the tooltips you see are generated by the browser.

Onclick function not working with CFINPUT validation

I am trying to validate the fields using CFINPUT and then calls a popup window function to do more stuff BEFORE submitting the form but it's not working. The onclick function seems to take precedent over the CFINPUT validation. As soon as I click on the Submit button it's calling the popup window function first without validating the fields. I need it to:
first validate the fields
call the popup function
then submit the form after the popup closes itself
(p.s. I see other similar case on here but there is no answer given)
The code looks like this:
<cfform action="register.cfm" method="post">
<cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
<cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
....
<input type="submit" value=" Send " onclick="popup()">
....
Please help. Thank you.
This is an old blog posting so not sure how accurate things are today but it shows how you can run the CFFORM validation via the _CF_checkTaskForm() function. So it seems like if you change the submitting of the form to a button via <input type="button" value="Send" onclick="popup(this.form)" /> then change the popup function to first validate the form via the _CF_checkTaskForm() and if that passes to proceed with the other JS you are doing.
http://www.neiland.net/blog/article/triggering-cfform-validation-when-using-ajax/
To expand on that, I just looked at a CF8 and CF11 installations and looks like the function in those is _CF_checkCFForm_1 if using that version of CF then something like this should get you in the correct direction:
<script>
popup = function(formreference) {
var check = _CF_checkCFForm_1(formreference);
if (!check) {
//if the rules failed then do not submit the form
return false;
} else {
// Do the popup
}
}
</script>
<cfform action="register.cfm" method="post">
<cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
<cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
<input type="button" value=" Send " onclick="popup(this.form)" />
</cfform>
The cfinput validation you're attempting to do is the client-side equivalent to
<cfif len(trim(string)) gt 0>
(Edit: That is not to imply that you should depend wholly on client side validation. Client-side validation is more of a feature to help your visitors. Server side validation is still important.)
Which I have to say is really weak validation. Anything consisting of at least 1 non-whitespace character will pass the test. People will be able to have usernames like "!" which isn't fanstastic, but that's just some information.
On the jQuery Validate link you provided, they show an example form (along with a link of the same form in action)
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
This very basic example shows how simple Validate can be to install, and a simple format of
<input name="ele" type="text" required>
is exactly the same level of validation you're attempting. So, to begin with, you can almost copy and paste the code. (Aside from from the different requirements you can make, setting minlength requires a certain number of characters and requires that at least one not be whitespace).
jQuery Validate can get quite extensive but is very easy to basically install and once you become familiar, make custom classes as needed
As a final note, don't disregard the disdain for CFForm elements. It may seem like others are disregarding your question, but that's not the case.
To be honest, they began to be introduced at a different time in the life of the internet, but have always been kind of finicky to work with. Expansion to them, in the opinions of many, have not been done well and have frequently exasperated the flaws.
It's super attractive to be able to say <cfinput...required> but the tags become a nuisance and you don't easily have the fine control over them that you might desire. They're a crutch, and a rusty crutch at that.
You might check out CFUI The Right Way # Github or this hosted version for some great insight and examples.

With jQuery Mobile forms, where do i put the validation message?

According to the jQuery Mobile docs, this is how you set up fields in a web form:
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
Is there a best practice or "official" way of adding a validation message to this? I basically want the validation messages to appear under each textbox in my form.
I haven't seen any "official" way of supporting input-validation fields. What we're currently doing though, is using the combination of:
jquery.validate
jquery.unobtrusive.js (not a pre-requisite)
asp.net mvc3 w/ Fluent validation (not a pre-requisite)
Here's an example of what the input-validation looks like for a single field:
<label for="Name" class="ui-input-text">Name Input:</label>
<input data-val="true" data-val-required="Name is required" id="Name" name="Password" type="text" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-d">
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
jquery.validate then takes care of inserting and displaying the correct message in the validation span. It doesn't support html5 input field-types yet, but I have a branch on github with the necassary changes to support this.

Categories

Resources