custom form control custom client side validation in Kentico - javascript

We've created a custom FormEngineUserControl to capture date input using 3 text inputs for day/month/year.
On the server we override the bool IsValid() method which works fine and displays the error message if invalid.
However we want to use client side validation also, we can use a CustomValidator control and assign a ClientValidationFunction to call a JS method however this is not then combined with the server validation function and we end up with two validation messages, one that removes when client validation passes, and one that only disappears when the form is re-submit, basically rendering the client validation useless.
Is there no way to register a client validation method with a custom form control? that will then be combined with the server method and error label etc. ?

This should work pretty much like any other .net user control. How are you preventing further processing if the validator returns false? You might need to set StopProcessing property to true.
There a few similar topics which might address your porblem:
stop execution in Custom validator if it false
Custom validator fires but does not prevent postback

I don't think this is feasible as I'm not sure how you could combine client vs server side validation. You cannot ever disable server side validation. The client side validation is just there for better UX, its not secured by any means. The general idea this is used is that you disable form submission until all fields are verified on the client side. If the validation is the same on the server, you should not see the same error messages because otherwise it wouldn't go pass the client in the first place.
The way you could do this in Kentico is to use some custom js (or better yet some framework/library to help you with validation such as validate.js), give Kentico form some id/class and connect the form validation with your js and have each side (client/server) do its job.

Related

Is possible to change the Javascript in the clients browser?

on a webform I'm using JQuery Validator to check my form data, however I don't add any validation on the server side.
I would like to know if is possible for a user to alter the code and remove my validations from their browser. If that is possible, how could I prevent it?
The code on the browser can be tempered maliciously, you must always include validations on your server/backend/api

How much validation should I do?

I have an angular client that has a form that sends requests to an api service that has the following components:
Form
Controller
Service
I can trigger validations on each of them but should I be doing that or applying validation on the From is sufficient?
In my opinion you should be validating on every layer you have listed.
Anyone can easily modify the HTML of a form to bypass any client validation, just turn of JS. So you should also be ensuring that in the controller you have the correct data.
Your service, I am assuming this might be accessible from other places/applications, so it should be enforcing the same/similar validation in the service to make sure you application is consistent with it's data.
Doing it this way will make sure no 'bad' data gets through your whole stack.
Forms is not sufficient, someone can disable javascript or make changes in the objects. Do atleast Forms and Service

Comparison of simple User Regeistration by PHP and Javascript

A simple user registration may be completed by PHP (framework: Codeigniter,etc..) and Javascript.Following is simple flow:
PHP
A registration view with form input(user_name,e-mail,password)
post the data to an controller to validation
-Pass, redirect to a completion view
-Failed, go back to the registration view with some alert strings.
Javascript
A registration html with input text(user_name,e-mail,password)
Validation could be done by Javascript directly before submit; Alert strings could be
generated by Javscript. Even submission could be done by ajax. Then redirect to the
completion page.
I found myself code more javascript less PHP. Even the user registration could be done without the "form" tag,right? I am afraid of some parts I had miss or ignore.
Could someone gives me an simple comparison of good/bad parts about these two methods?
User registration details have to be stored on the server. You can use any language you like there, JavaScript (node.js is the current preferred way to achieve that), Perl (PSGI/Plack), Python (WGSI), C# (ASP.NET), PHP (mod_php), whatever. If you did it entirely with client side JavaScript, then the registration would exist only for a particular browser (which makes it rather pointless for almost anything on the WWW).
You can do a lot of things with client side JavaScript.
You can test if the data enter by the user conforms to the requirements you've set (such as "usernames contain only ascii alphanumeric characters").
You can't stop data that doesn't conform to those requirements being submitted to your server though - everything outside your server is beyond your control. Users can edit your pages in their browser as much as they wish. Client side validation is a convenience to the user (giving feedback without a server round trip and page reload), nothing more.
You can use Ajax instead of an HTML form … but there is no reason to do that. It just adds an unnecessary dependancy on JavaScript. That doesn't mean Ajax can't be useful, you could use it to ask the server if a username was already taken while the user is filling out the rest of the form.

Use javascript to control some html fields of a form before submitting

Before submitting a form, i use javascript code (surrounded in PHP) in order to make locally some controls but sometimes javascript may not be enabled client-side.
The fact is that I have to check by pattern/regex each control of the form for example checking email, phone number,.. format so that user cannot enter anything haphazardly. Therefore, if javascript is not enabled, the form must not be submitted, even if all field are fulfilled out.
Therefore my question is to know if there is a tag or function which allow to perform what i want to?
Thank for your help
JavaScript runs client-side.
That means that users have FULL CONTROL over it.
Then, if they want to disable it, you can't do anything about it.
The only thing you should do is be sure that users with JS disabled will be able to submit the form too.
If you use JS to validate the form, be aware that users have FULL CONTROL over it, so they can send the form if they want, even if your code says that it's invalid.
The right way to do it is:
Be sure users without javascript can send the form
Implement client-side validation for users with javascript activation. This way they will have a better user experience (because can know if the data is invalid immediately) and is less server intensive (your server will have to validate less invalid forms).
ALWAYS validate the submited form server-side. Data coming from a client is always UNTRUSTED, even if you think you have validated it.

Node.js server-side form validation with client-side response

Express-form is a quite powerful validation plugin for node.js/express. However, in the examples and documentation, all the responses are server-side (console.log), which is enough for development, but not quite practical to tell the user what's wrong.
At the moment, I can imagine two different solutions:
Submit the form and redirect back / render the form again with req.body and validation messages attached to add 'error'-classes to wrong fields.
Submit the form using AJAX.
I would prefer option 2, as I don't want to query the database again when rendering 'new'. But I have no idea how to pass the validation results back to the client and add 'error'-classes to input fields.
Any ideas?
I try to validate user input via javascript in the first instance in the browser, and then validate on the server outputting errors in the rendered form (a la rails). Right now I'm using my set of custom validators so I can't point you in the right direction with express-form.
Along with my custom regexes I, sometimes, use the validator npm package, you can also use the validator validations in the browser using plain DOM or some framework.
edit:
working with AJAX validations is quite easy, you receive an object in your request (if you use express.bodyParser() middleware), validate the parameters, if there are some errors you can point at it in your response ex.
{
"errors": {
"foo": "must be a number"
}
}
and:
for (i in answer.errors) {
var target = document.getElementById(i);
target.class = "error";
// here you can also handle the error description
}
If you are using a framework on the browser side, there are plugins or I'm sure it's simple to write one.

Categories

Resources