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>
Related
I'm building two forms which will live on a single page on a Kentico website. kentico websites are wrapped in one single form field so I can't create individual form elements for each form on the page. The problem is parsleyJS will only allow you to pass a form to initialise it e.g. $("#form").parsley(); and I need to validate the forms independent of each other. Has anyone had this issue before? Can anyone recommend a workaround.
$("#form").parsley();
input{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>
<form action="" id="form">
<div class="form1">
<label for="fname">First Name</label>
<input type="text" name="fname" required>
<label for="lname">Last Name</label>
<input type="text" name="lname" required>
<input type="submit" value="submit">
</div>
<div class="form2">
<input type="text" name="anotherInput" required>
<input type="submit" value="submit">
</div>
</form>
You may be able to get the results you want using the group option to validate only part of the fields in your form. This is used in this example of a multi step form.
Initialize the forms independent of one another by using the class selector.
$(".form1").parsley();
$(".form2").parsley();
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>
I have a button that is set to be disabled until the form is valid. However, depending on the situation some of the form fields are also disabled. My problem is, I need the user to only be required to fill in non-disabled form fields but angular doesn't seem to be validating the disabled fields.
<button ng-click="form.checkVerify(); appCtrl.pageLoad('spec')" ng-disabled="checkVerifyForm.$invalid" class="btn btn-lg btn-success pull-right">Complete</button>
<form name="checkVerifyForm">
<div class="col-md-6">
<fieldset ng-disabled="!form.dataStore.reqMake">
<label for="makeRec">Maker Recourse</label>
<div class="form-group">
<label class="radio-inline">
<input ng-change="form.justify()" ng-model="form.verify.mRec" type="radio" name="makeRec" id="makeRecYes" value="1" /> Yes
</label>
<label class="radio-inline">
<input ng-change="form.justify()" ng-model="form.verify.mRec" type="radio" name="makeRec" id="makeRecNo" value="0" /> No
</label>
<span id="helpBlock" class="help-block">Is there adequete recourse...</span>
</div>
Now I have seen some pretty intense directives that accomplish the task, but is there something simple that can be done in the controller to overcome this specific situation?
You can use e.g. ng-required to achieve that.
<input ng-change="form.justify()"
ng-model="form.verify.mRec"
type="radio"
name="makeRec"
id="makeRecYes"
value="1"
ng-required="form.dataStore.reqMake" /> Yes
AngularJS input documentation
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
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!