Angular JS textarea validation - javascript

I have this AngularJS code trying to show two stars next to label when there is no text in the textarea. Same code works for input tags, but not with textarea.
<div class="input-left">
<label for="email">
<span ng-show="contactform.email.$error.required" class="required">*</span>Email:
</label>
<input ng-model="email" type="text" name="email" id="email" required></br></br>
<label for="budget">Budzet:</label>
<input ng-model="budget" type="text" name="budget" id="budget">
</div>
<div class="clearboth">
<label for="msg" class="left" >
<span ng-show="contactform.msg.$error.required" class="required">**</span>Pitanja ili Komentari?
</label>
<textarea ng-model="msg" rows="8" cols="50" class="input-no-width rounded shaded left clearboth" id="msg" required></textarea>
</div>
According to AngularJS documentation - textarea should behave same as input.

Your problem with the <textarea> tag is that it doesn't define name attribute.
AngularJS uses the name attribute to expose validation errors.
You should define your textarea like so:
<textarea ng-model="msg" name="msg" rows="8" cols="50"
class="input-no-width rounded shaded left clearboth" id="msg" required>
</textarea>
Please note that having id and ng-model is not enough to properly handle validation messages. In AngularJS applications the id attribute often doesn't serve much purpose and could be omitted.

For form validation name is very important. Give it a name it should work.
<textarea ng-model="msg"
rows="8"
cols="50"
class="input-no-width rounded shaded left clearboth"
id="msg"
name="msg"
required>
</textarea>

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.

AngularJS / JQuery - form input without an associated label

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.

Multiline textbox in html instead textarea

in a project of mine,
when trying to send contents of text-area using commons file upload, i got null value,
<td>Message</td>
<td><textarea id="msg" name="msg" rows="5" cols="38" style="resize: none;" ></textarea>
</td>
later i used hidden field and succeed in getting the value
<td>Message</td>
<td><textarea id="msg" name="msg" rows="5" cols="38" style="resize: none;" ></textarea>
<input type="hidden" id="msgid" name="msgid"/>
</td>
But i want to use multiple line textbox instead of text-area,
can any one tell me how to use multiple line in textbox?

why tooltip not display with validation in jquery?

I validate my form using jquery validate .It is working fine .
http://jsfiddle.net/cRew4/2/
When you change focus one field to and another it gives error.
Now I will implement tooltip in that,so I add tittle in all input field as example "title="title"" it show tooltip but it removed validation of that field.Instead of showing error it show title of the input field. why ?
http://jsfiddle.net/cRew4/3/
$("#commentForm").validate();
$(document).tooltip();
<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" title="title" 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>
I need it show tooltip when there is mouse over on the field .but it show validation error when user fill incorrect value intead of tooltip message
The validate takes title by default.
So, you must add ignoreTitle arguement to it.
JS
$(document).tooltip();
$("#commentForm").validate({
ignoreTitle: true
});
The documentation mentions it, look here : http://jqueryvalidation.org/validate/
JSfiddle Demo

jqBootstrapValidation plugin is not working for my form

This is my first time using this plugin. I am using jQuery v-1.10. I am also using the migrate plugin. I have added the js file. I have added all of these using prepros. But still the plugin is not working.
No error is also showing in the console; only a warning is showing saying:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
My form and the JS code is given below.
<form id="login-form" method="post" action="#" novalidate>
<label for="login-email" class="control-label">Email : </label>
<input id="login-email" class="form-control" name="email" type="email" placeholder="Email..." required><br>
<label for="login-password" class="control-label">Password : </label>
<input id="login-password" class="form-control" name="password" type="password" placeholder="Password..." required><br>
<input class="btn btn-default" name="submit" type="submit" value="Submit">
</form>
$("#login-form input").not("[type=submit]").jqBootstrapValidation();
You must use proper controls in your markup for this to work.
Ex.
<form ...>
<div class="control-group">
<label ...>Email</label>
<div class="controls">
<input ... />
<p class="help-block"></p>
</div>
</div>
</form>
And personally I believe the better way of handling the javascript is to create a "validated" class because not all fields will require validation. But I suppose this really depends on your form elements: you may indeed require the entire form to be validated but in most of the forms I've worked with, only certain elements require validation and therefor creating a class to call in your javascript is better so that jqBootstrapValidation.js isn't scanning the entire form.
Ex.
/* assigned by class */
$(function(){$(".validated").jqBootstrapValidation();});
/* assigned by element */
$(function(){$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();});
Then simply add your "validated" class to anything you need validated:
<input type="email" class="form-control validated" name="email" id="email" placeholder="Email Address" required />
Hope this helps!

Categories

Resources