I have parsleyjs and jquery on my page and I'm trying to get parsley to work when the user clicks out of the input field. I have marked it as a required field and also set it to trigger if its blank or empty when the user clicks out of the input field. But right now its not showing any error. What am I doing wrong.
<form action="" method="post" class="form-horizontal" data-validate="parsley">
<input type="text" name="firstname" data-required="true" data-trigger="blur" data-notblank="true" placeholder="First Name" />
</form>
Second question is there a way to trigger a custom validation method in another js file for specific input fields? If so how would I go about it in this setup.
By default parsley only validates once there are 3 or more characters in a field.
If you want to validate on blur for empty, then you need
'data-validation-minlength' => 0 as an attribute
Related
I am completely new to AngularJs. I need to make autocomplete=off for a password input.
Is autocomplete=off the only way or do we have to do it in some different way in AngularJs?
This doesn't nothing to do with AngularJS at all, but simply html.
Regarding to your statement, password fields shouldn't be autocompleting if they are set to type password, otherwise if you want to set a specific field inside a form to autocomplete off you can do it setting that property to false like this <input autocomplete="on|off">.
This can be defined at form level or at input level. In a form it would be like this:
<form action="" autocomplete="on|off">
</form>
Also you can define it in a form level, and override the behavior for some specific inputs like this:
<form action="" name="myform" autocomplete="on">
<input autocomplete="off" name="myInput" >
</form>
In the above code, in the form myform the autocomplete is on, it means all inputs (the one which allow it) will do autocomplete, but in the input myInput will not, since it overrides the form behavior.
More info can be found in The HTML autocomplete attribute
This should be sufficient:
<input type="password"
autocomplete="off"
placeholder="password"
ng-model="vc.password">
I added the autocomplete="off" just for redundancy but it seems completely unnecessary.
jsbin - https://jsbin.com/bowuxopese/edit?html,js,output
I have a form text field it is required but its initial value is an empty string, so when I load the form the controller validates the form field and marks it as error, I want on the initial load not to validate the form field only after an onblur event.
<input data-ng-model="MyCtrl.opportunity.company" type="text" class="form-control" name="company" ng-model-options="{ updateOn: 'blur' }" required />
And here is the fiddle http://jsfiddle.net/petran/Lvc0u55v/725/
I know I can call $setValidity on controller I am looking for a more elegant solution if there is exist.
Add this statement to ng-class statement:
...&& addOpportunityForm.company.$dirty...
Use the $pristine for validation tool in AngularJS. This will allow the funtion to wait until the input field has been changed before testing the condition. You can learn more about form states here: Angular Form States
I have a few requirements for validating a form, and my attempts have been unsuccessful.
The form should validate as you fill it out. The md-input-container should be invalid if the validation requirements fail and the associated ngMessage should show. For example, if an input is marked as required it should turn red and show the message if you click into it and then move focus without typing anything.
The inputs should also be invalid if the form is submitted and they fail validation.
Here is what I've tried:
<md-input-container md-is-error="jac.application.$invalid && (jac.application.$submitted || jac.application.$dirty)" flex="20">
<label>Last Name</label>
<input type="text" name="last_name" ng-model="jac.application_object.last_name" required />
<div ng-messages="jac.application.last_name.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
Using the above, submitting the form without entering anything has the desired effect; however, entering something valid into the input afterwards ONLY clears the ngMessage (the container is still red).
Also, the form doesn't validate as you fill it out.
Any suggestions on how I can achieve this?
I am using angular-unsaved Changes directive as well as the angular built in form controller to detect if a form is $dirty.
I have a form on a specific page that even though I edit elements, the form never registers as dirty. I have gone so far as to strip everything and leave only:
<form unsaved-warning-form class="form-horizontal" name="WHAT">
<input type="text" name="thematif" id="thematiff" class="form-control" >
</form>
The formis never $dirty even when I change the value of the input. Any ideas what the problem could be causing the changes to input not to be detected? Is it that there should be an angular input equivalent tag instead of a plain old "input"?
What could be disabling the detection?
Ng-model is missing on your input field.
Validations and all form enhancements are provided by utilizing ng-model directive (and its controller). So add ng-model and everything is Ok.
See: http://jsbin.com/podepo/edit?html,output
<form unsaved-warning-form class="form-horizontal" name="WHAT">
<input type="text" name="thematif" ng-model="whatever" >
<pre>{{WHAT|json}}</pre>
</form>
I'm using angular-auto-validate and am having some state management issues. I have a multipart form where some fields are required (name/email address) and the user is able to go "back" to change answers. Basically, I have a partial for every stage in the form which is working well, with one exception. The continue button is disabled if the field is invalid. I tried simply using the $valid identifier, but when the partial loads, each field begins with ng-valid so I can either use $touched or $pristine. Problem is, when the user goes back, the value that has binded to a data source is valid, but the field isn't touched so the continue button doesn't activate. Sample code (this is generated code after I've hit the "back" button):
<input type="text" name="name" ng-minlength="3" ng-model="myModel" placeholder="Your First Name" ng-focus="inputFocused()" ng-pattern-err-type="" ng-model-options="{updateOn: 'blur'}" class="ng-valid ng-valid-pattern ng-valid-minlength">
and the button:
Continue
How can I either disable the default ng-valid or identify a condition where the value is being populated by the controller?
I think you should use ng-dirty/pristine. You can manually set the condition of the form as the user navigates.
When you populate your form data you can do something like:
if($scope.myForm.data) {
$scope.myForm.$setDirty
}
Your button:
Continue