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
Related
I have an input field <input type='text' name='user' autocomplete='off'> but autocomplete is still active.
This is what I see when I inspect the element
It seems that Firefox somehow thinks that this field is a password field and uses the build-in Login Manager storage module. I did not use any Javascript on this input element.
I also noticed a strange key symbol at the autocomplete drop-down list
How can I get rid of that key symbol and disable autocomplete?
Heres my HTML Code
<form class='clearfix'>
<div id='loginForm'>
<label>
Login
<span>
<a href='/memberArea/lostPass.php' id='hackB'>
Forgot Password? Click here!</a></span>
</label>
<input type='text' name='user' id='username' autocomplete="off">
<label >Password </label>
<input type='password' name='pass' id='passLogin' autocomplete="off">
</div>
<button class='confirmbutton' id='loginButton'>Login</button>
</form>
Clear browser, Try,
<!--
<form autocomplete="off"> will turn off autocomplete for the form in most browsers
except for username/email/password fields
-->
<form autocomplete="off">
<!-- fake fields are a workaround for chrome/opera autofill getting the wrong fields -->
<input id="username" style="display:none" type="text" name="fakeusernameremembered">
<input id="password" style="display:none" type="password" name="fakepasswordremembered">
<!--
<input autocomplete="nope"> turns off autocomplete on many other browsers that don't respect
the form's "off", but not for "password" inputs.
-->
<input id="real-username" type="text" autocomplete="nope">
<!--
<input type="password" autocomplete="new-password" will turn it off for passwords everywhere
-->
<input id="real-password" type="password" autocomplete="new-password">
</form>
Related fiddle:
http://jsfiddle.net/v86Dv/4/
The "First Name" field is validated as expected when the "submit" button is clicked.
But, fields added via the "click here to add field" link are not validated.
How can I get parsely.js (http://parsleyjs.org) to validate those fields?
Related code from fiddle:
HTML:
<form id="myForm" method="post" data-parsley-validate novalidate>
<p>Click here to add field</p>
<p><label>First Name</label>
<input type="text" name="firstName" value="" required data-parsley-trigger="change" /></p>
<p><input type="submit" value="submit" /></p>
</form>
JavaScript
$('#addField').on('click', function(){
$('input[type="submit"]').before('<p><label>Another Field</label> <input type="text" name="anotherField" value="" required data-parsley-trigger="change" /></p>');
});
I'm afraid in your fiddle you are using 1.2.3 Parsley version, that does not support natively dynamic field adding / removing. Please consider using 2.x version. Best
I'm using parsley.js to validate a form. It appears to work fine except the checkbox is not being validated. I've tried adding other checkboxes and using data-min-check, but none of them are being validated. I've tried adding data-parsley-trigger with various events, makes no difference.
No errors appear in the console. And I'm using the latest version of parsley. Any ideas?
<form action="form.php" method="POST" id="form" data-parsley-validate>
<label for="email">Email address</label>
<input type="email" name="email" class="form-control" id="email"
placeholder="Enter email" required
data-parsley-maxlength="128"
data-parsley-maxlength-message="Cannot exceed 128 characters."
data-error-message="Required field."/><br/>
<label for="agreeTerms">
<input form="form" type="checkbox" id="agreeTerms" name="agreeTerms" required/>
I have read and agree to the terms and conditions
</label>
<div class="submitbutton">
<button type="submit" value="submit" class="btn btn-xlarge" style="width: 100%">Enter Here to Win
</button>
</div>
</form>
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/parsley.js"></script>
There were various bugs with radio and checkbox inputs with parsley 2.x < RC5.
I strongly recommend you to upgrade your parsley version to latest.
Sorry for the inconvenience.
I was having the same problem, so I decided to put an invisible checked checkbox with CSS.
Parlsey's validation works fine with two, so one is always checked. The only thing you need to modify is the error messsage because the default will not work in our case. Here is my example and works.
<label for="ingredients">Select ingredients:</label>
<p>
<!-- Check the error message-->
Cheese <input type="checkbox" name="hobbies" value="ski" data-parsley-mincheck="2" data-parsley-error-message="You must select at least one choice" required data-parsley-group="block2"/>
Ham <input type="checkbox" name="hobbies" value="run" />
Mushrooms <input type="checkbox" name="hobbies" value="eat" />
<!--This is the important part-->
<input type="checkbox" name="hobbies" value="eat" style="visibility:hidden" checked/>
<p>
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!
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>