I'm developing application using AngularJS (using requireJS). I want to validate input fields (basically all client side validation). I thought to use Parsley.js which looks great but it doesn't work with AngularJS. HTML5 validation overrides parsley validation.
So my questions are
1) Any idea why parsley is not working with my angular app?
2) Which is best validator for angular (except angular default validation)?
I am looking into this as well. Seems that someone on SO has created a directive to make Parsley work with Angular. Click.
The best validator, as of yet, to me seems to be the built-in Angular validation. Though multi-field validation is still a pickle.
Try this
<form role="form"
ng-submit="submit(this.form, reg)"
novalidate="novalidate" ...
to prevent native browser validation
Related
I am planning to have an angularjs application. We will be doing the CRUD operation using Web Api service. And these controller functions I can call from ng-click directive (I mean with out a submit)
AngularJs <-> WebApi <-> Sql Serevr => This is our stack.
We need get call to web server (to fetch files. Ex: images).
But I am wondering, will we ever need a post operation into webserver in our case?
Also, do we ever need a form,ng-form,submit,ng-submit - in our case?
Any help would be apprecicated, Thanks!
There are number of reasons outside of just submitting to use a <form> tag in your code. For one, angular wires up validation results right into the form object. If you didn't have the form, you wouldn't get that functionality.
I'd suggest taking a look at the example at the bottom of the Angular Form documentation to see why you may want to use the Form. You can see how the form.$valid and form.$error change if you clear out the textbox in the example.
https://docs.angularjs.org/api/ng/directive/form
Regarding submitting, ngSubmit will prevent the default action of a form which is usually posting the server. Similar to the validation properties that exist, there is also a form.$submitted property that will be updated to true when the form is submitted with an ng-submit. This will not happen on an ng-click.
https://docs.angularjs.org/api/ng/directive/ngSubmit
Not much different，but ng-submit would be prevent by input[required] etc. ng-click is unlimited
I'm experiencing an issue where a simple form tag is having an action and method attribute added to it. Also added are some hidden input fields for what I am guessing is anti-forgery.
Here is the html I'm adding in the Razor View:
<form>test</form>
And here's what's being rendered:
<form action="/company/adduser" method="post" class="ng-pristine ng-valid">
test
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8KMbFT4ebnROrEREXkL-MYlPSgL0ISe6_sqTJXc982ocoWgKH1v_yCV2_5Qa9h8AmVFaNk0i0Wpa6gQlhWY-PHkZ929_Tkv1B-lCR7-aLyd53L2448CLQNtakb-UHQmLgPGCiQF0dj4jij9lc_sS7jRPjcGFnNjxdT_wobz-CsU3NvR-fm-a9r0MnqhflgwLLw">
</form>
It's causing major issues since I'm only using asp.net MVC to serve up HTML and using AngularJS on the client. The action methods is causing issues with angular when trying to use ng-submit.
Does anyone know:
Is MVC somehow automatically adding anti-forgery tokens?
How do I disable this?
As of the time of this writing, that's just a bug in the Form tag helper. It will be fixed.
You can exclude Form (or any element) from taghelper processing by adding a ! as in <!form></!form>
Problem here is that Microsoft added new TagHelpers and one of them is <form>. It seems to be adding all that extra "stuff".
Edit and better fix:
I ended up configuring TagHelpers to have a prefix. In my _GlobalImport.cshtml I added:
#addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"
#tagHelperPrefix "asp:"
This allowed me to add "asp:" in front of any TagHelpers I did want to render. This also prevented the <form> tags from being rendered by the TagHelper.
I was notified by Damien Edwards on the ASP.NET team at Microsoft that the issue with the form tag is a bug and will be fixed. I still thought this information would be helpful in the meantime.
You can also prevent a TagHelper from rendering by adding a ! in front like so: <!form></!form>
Angular JS has the $pristine, $dirty, $valid, and $invalid booleans for checking the state of a form. Are there equivalents for these in Angular Dart?
Same properties will be in AngularDart, but since we are still not v1.0, we still have some missing features. This is in the works: https://github.com/angular/angular.dart/pull/372
Didn't find anything about this yet too.
EDIT
This is available and seems to work fine.
I am using angular js for building a form.
Whats the best way to validate my form in a similar way to JQuery validate including custom rules?
Thank you!
With ngForm directive you have an instance of FormController with access to its methode $setValidity() which sets the validity state of a control. You may use it with $parsers in your directive.
I am using jQuery in my cakephp forms. I want to add validation using the way I have added my plugin. Putting required on selected input element automatic validates it. No matter if I add my plugin or not. I have included js helper..
public $helpers = array('Html', 'Form', 'Js'=>'jQuery', 'Text');
Like this. I want to stop the traditional way it follows for auto validation. And put the validation according to my requirement. I know cakephp 1.x version it follows the same way I want. but changes have been made in cakephp 2.x version for it autovalidation ? how can I stop that ?
HTML5 form validation
Depending on the browser you're using, the validation-messages you see are probably part of the HTML5 validation performed by the browser. Recent versions of Chrome will automatically perform Form Validation for input elements that have a required attribute.
You can disable HTML5 validation by adding a novalidate attribute to the <form> tag.
See this question for more information:
Disable validation of HTML5 form elements
Note
Although validating with jQuery can be a nice addition (from a user-interface perspective), you should never rely on validation in the browser alone. Always be sure to perform proper server-side validation. In CakePHP this is done in the models, see Data Validation