Consider this html
<input type="text" name="txt" ng-model="ctrl.txt">
I want to write my own form-validation mechanism in an Angular 1 app. Is it a good practice to base the validation on the value of the ngModel that is bind to the input element instead of the actual input value (as it done in the built-in angular form validator)?
In other words, is there a reason to avoid doing that (for any input type)?
(PS I'm familiar with the standard Angular form validation. No need to suggest using it)
Maybe is worth doing a small introduction to validation.
Front end validation is no validation, if you want to persist your data to a server.
It is best practice to validate inputdata server side before saving there somewhere.
In case you whish to "prevalidate" the user input to avoid a future reiteration because of a wrong input, then best practice is to use the standard features of Angular and not reinvent the wheel with custom controller function (even if it is possible).
angular forms guide
I hope it helps.
Related
Everyone, I am confused between HTML5 validation and Angular Form validation.
I want to know which validation should be used in validating a form HTML5 or angular's own form validation approach.
Please Also consider explaining:
Why and Why Not.
Which is better
Which is more secure.
Those are two completely different things.
On one side, you have the HTML validation. For instance :
<input type="number" name="hour" min="0" max="23">
This is a convenience validation : if you click on the arrows to increase the value, you won't go under 0 or above 23. But nothing prevents you from typing in 25.
Next, you have Angular's form validation. For instance, in the case of a reactive form
this.form = this.formBuilder.group({
hours: ['', [Validators.max(23), Validators.min(0)]]
});
This is a technical validation : Angular checks if the form is valid at every change you make to it.
You can get the state of the form with this.form.valid and this.form.invalid.
If you rely only on HTML, you will rely on the browser's capacity to check for validation. And they aren't that advanced. Plus, your user will be able to edit the DOM and simply override your validation.
In every case when you use Angular, you should use both HTML validation and Angular's form validation. The former one for user experience, the latter one for your business rules.
I am concerned about web security and the use of the HTML5 required word on input tags. I am trying to use it as part of 'form input validation'. Is the use of the HTML5 'required' on input tags something that is reliable for validation or is it easily manipulated by a user trying to bypass the input field requirement.
I have searched for information on html security and found little on this.
Thanks
In short, the answer is no, client side code is not a safe place to rely on security checks.
The method of using required provides the user with feedback and allows for a nicer user interface, but for security you will want to perform fidelity checks on all data passed over to the server side, how that is done depends on your backed architecture.
To answer your question in the comments, the required attribute is there to prevent the form being submitted without the field being complete, this is however purely to help the user know it is required. If you have a hacker simply remove the required attribute from the markup, then they're up to no good anyway and that's where a backend check will save you.
In my Opinion it is not an effective method. Required attribute can easily be changed using inspect element on that field on the browser.
The main thing here is to keep in mind that all client side validation is your first line of defense but most of the time you need an extra layer to check on your server side.
I could make an http post request to the action field of your form without using your form at all with tools like postman (chrome extension) if your server doesnot have extra validation then you are not safe.
We are currently looking to experiment with modern frontend frameworks like react on an MVC4 project. We use data annotations in our models and we have a lot of forms that use unobtrusive validation on the UI.
The main thing is finding a way to use react to generate the content while still being able to make use of features like unobtrusive validation. As I understand it, it really is just a bunch of data-val attributes dynamically generated when using HTML helpers like TextAreaFor, ValidationMessageFor with the attributes getting values from the data annotations in the model classes.
I've tried several things including
ReactDOM.render(
#using (Html.BeginForm("xyz", "xyz", FormMethod.Post))
{
#Html.TextBoxFor(x => x.Email)
which results in the input box not being editable for some reason.
I'd prefer to do something more like
ReactDOM.render(
<form><input type="text" data-val="#Model.datannotations[1].val" /></form>
Is that possible? How does one get the data-val values from the model anyway? What is the best way to achieve this?
it should not be possible.
These are two differents ways to delvelop the ui.
The razor way is preprocessing the markup code in server side to fill it.
And react works in another flow using the lifecycle methods, you should have already loaded the data-anotations values for accessing it on render.
Therefore, to make this works you have to run razor engine first to fill the markup and next using react engine.
I don't recommend use this approach because it's too hard to develop on it and the developers team have to keep that flow in mind while they are developing
Note this
ReactDOM.render(<ComponentMustHaveJSX/>)
I have an HTML form rendered by PL/SQL procedure that has an input field for comments to be entered by the user. In case, he enters some script and submits, the same gets inserted into database. To escape it while inserting the data, we can use htf.escape_sc function (takes care at back-end level). But can we do that for html at front-end level itself? If so, how to proceed?
you may wish to have a look at validation widgets from some js framework. offhand i remember kendoui (kendo ui validator) and jqwidgets (jqxValidator). however beware as both toolkits are commercial. jqueryUI should have similar functionality for free, though.
in case you prefer a plain html5 solution have a look at HTML5 Form Validation / Constraint Validation API. There also are an article on mozilla MDN, a list of Supporting browsers, and of course the official standard.
however, a plain html solution will not perform any conversion - which means that the user has to enter the data in the way it is expected at the other end, which in your case is probably nothing you'd want to burden the user with ...
ps:
this fiddle contains an elementary example for validating against a pattern.
disclaimer: i'm not affiliated with any of the named toolkits' producers.
I read some AJAX-Form tutorial like this. The tag form is used in HTML code. However, I believed that it is not necessary. Since we send HTTP request through XmlHttpRequest, the sent data can be anything, not necessary input in form.
So, is there any reason to have form tag in HTML for AJAX application?
Apart from progressive enhancement as already discussed (don't make your site require JavaScript until it really has to), a <form> with onsubmit would be necessary to reliably catch an Enter keypress submission.
(Sure, you can try trapping keypresses on separate form fields, but it's fiddly, fragile and will never 100% reproduce the browser's native behaviour over what constitutes a form submission.)
Sometimes, web apps using ajax to transform their data either use forms as a fallback when the user has no JavaScript enabled (a sometimes expensive but very good thing to do).
Otherwise, if an application builds and sends an AJAX request, there is no compelling reason to use a form except in rare special cases when you actually need a form element. Off the top of my head:
when using jQuery's form serialize function
when monitoring all fields in a form for changes
when there is need to make use of the reset form button (that to my knowledge is available in a proper <form> only).
I see at least two possible reasons :
Graceful degradation (see also Unobtrusive JavaScript) : if a user doesn't have Javascript enabled in his browser, your website should still work, with plain-old HTML.
Behavior of the browser : users know what forms look like and how they behave (auto-completion, error-correction, ...) ; it's best not going too far away from that
And I would add that, if you want the user to input some data, that's why <form> and <input> tags exist ;-)
Using the right tags also helps users -- as an example, think about blind users who are navigating with some specific software : those software will probably have a specific behavior for forms an input fields.
It really depends what you're doing. If you're wanting to take form content submitted by the user and use AJAX to send that somewhere then you're going to want to use the form tag so your user can enter their data somewhere.
There will be other times when you're not sending data from a form and in that case, you wont have a form to be concerned about :)