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
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 trying to customize Jasig's CAS 4.0.0 to a new view using Angular 1.4. But i have a problem on this time, here i can't use the angular tags on the current <form:form> tag, and also i have no idea to extract the bean that,it uses to define the action=cas/login?... part. Here's what it uses:
The viewLogin.jsp that uses the form:
<form:form method="post" id="fm1" modelAttribute="${commandName}"htmlEscape="true" cssClass="form-validate mb-lg" novalidate="">
I again changed from commandName to modelAttribute, because i saw a question saying it was outdated... But i still haven't any idea how to extract the information which i need from that form. Apparently, that's just a name to instantiate a bean that is resolved by spring automatically. But how can i access that information outside of the JSP attribute? Also I want to make the validation from Angular to complete it, but since that i cannot extract the URL that CAS generates, I can't make it "totally works".
Thanks in advance!
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>
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
I want to replicate the html that the cakephp form helper creates, so i can add to it and integrate it into my bootstrap front end. Basically the cakephp form helper isnt generating the html I need.
Someone else built the app using cake forms, and I dont want to rewrite the backend.
I thought it would simply be a case of including the correct input names, form classes etc, and building upon it. It seems however that even an exact copy/paste of the form html doesnt trigger the cakephp form errors.
It sends identical headers to cake,
http://pastebin.com/JZyCk6cv
so I can only assume that the cakephp form helper does some jiggery pokery when its constructed in the template, in order to trigger validation errors?
I think the best solution is to create a custom CakePHP-Helper. If you're using twitter-bootstrap i recommend this Helper, packed as a plugin:
https://github.com/loadsys/twitter-bootstrap-helper
Form validation should work, as it uses CakePHP's core form-helper to create inputs and labels.
Maybe you don't have to rewrite or edit much if you use search and replace (replace $this->Form->input by $this->TwitterBootstrap->input).