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.
Related
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.
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.
I wanted to understand the meaning of novalidate directive usage in form tag, especially when used to validate the form.
Thanks
It prevents the browser's native validation to kick in i.e form data will not be validated upon submission. Examples include input where type='email'
Note that it is not Angular's directive. It is HTML 5 attribute. Read more about it here
novalidate attribute is used to disable browser's native form validation.
You can use it when you need do your own AngularJS custom validation.
You can use the same ones used by the HTML 5 specification in Angular,so you can add the novalidate attribute to the form element, which tells the browser not to use its native validation. Because different browsers have different implementation validations. Since Angular get validation itself, the browser don't need to do validation implementation.
I'm not sure if what I'm trying to do is even possible, but it's worth a try.
I need to make an html form and put a checkbox there (a "I accept the terms and conditions"). When the user clicks submit, it should verify if the checkbox is checked and display an error message if it isn't. But the trick is that I'm not allowed to use JavaScript, as my client doesn't support it.
What can I do?
EDIT: I'm looking for a client-side solution, if that's not possible, then I'll have to live with it :p
Without javascript you're going to have to rely on something server side to do the validation for you (PHP, CGI script, Python, anything really). Submit your form to this validation URL and return an error if the checkbox is not checked. Without more useful information (your environment for one) I can not provide any examples.
In HTML 5 you can use the
'Required' attribute for checkboxes,
Which causes the form not to be submitted unless it is checked
You can read up on it more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
When using HTML5 "email" fields — <input type="email"/> — a lot of UAs (user agents/browsers) prevent you from submitting the form without using a "valid" (by regex) email address. They also apply the :invalid pseudoclass. However this my conflict with your own validation scheme, and the lack of direct feedback may confusing visitors. Also, :invalid is applied (in Chrome 8) to my field before anyone even attempts to submit it. I hate this. I t makes it look like the user has made a mistake, but they haven’t yet.
So is it possible to use <input type="email"/> without triggering validation behavior?
According to Philip Taylor (Philip) on the irc.w3.org#html-wg IRC room:
http://whatwg.org/html5#attr-fs-novalidate says you can use to disable validation for the whole form
So basically, you can apply novalidate as an attribute on the entire form. You can also specify a submit button to submit the form without validating — the canonical example is a “save progress” button that doesn’t validate at all. In that case, you put formnovalidate on the submit button itself.