I'm developing a form with Symfony2 : several text inputs and one file input (for one picture). I have defined some asserts (maxLength, minLength...) in my entity in order to check the form (isValid).
My problem is : if the user puts bad data in text input (text too long or too short...), he still can submit the form, and error and printed but the user have to re-choose his picture.
As I think it's impossible to keep the picture in the form after bad validation, I should maybe check the form in client side (javascript), before submit.
So, is there an automatic way to do this (to forbidden submit until data are correct)? Can we get the assert minLength, maxLength value in twig ?
Thank you !
Ben.
You can use js validation before submitting the data, using some js form validation tools, but this way you need the replicate the validation logic from the server, so if validation rules changes, you need to modify on both server and client side. I recommend this method to reduce the traffic between client-server.
If you don't want this, use ajax form submitting (example here). You still validate the form using symfony, but the page won't refresh, so you won't lose the attached file. But this generates additional traffic to server, and you also need to implement error displaying using javascript.
Related
I am looking to better understand the typical approach to form validation with AJAX.
I have found some information on this approach but it is hard sometimes to decipher what is the standard practice and what is a hack.
In my scenario, which is a common one, I have a dynamic form that the user submits and I want to ensure that the form input is valid. If the form input does not pass validation, I want to re-display the form with the input submitted and display an error message.
From what I have read, it appears the best practice approach is to perform an AJAX POST on submit, essentially posting the entire form. The server processes the AJAX post validating the posted items, and if all the items are valid, they are operated on (updates, inserts, etc to database). Finally, the AJAX response returns the validation result. If the validation result indicates success, a simple redirect occurs (the form is not re-posted since the form input was already processed and committed to the DB in the AJAX request). If the validation result indicates an error, the error is displayed and the redirect does not occur.
Is this the correct approach?
Should the form input be processed during the AJAX POST, leaving just a redirect on the callback, or is it best to process the form input after the callback by re-posting the form?
It doesn't make sense to me to re-post the form. In that case, I would think you'd have to validate the data twice for security reasons...both on the AJAX post and the re-post.
It is also possible I missed an even better, more standard approach. Thanks.
Is there an existing library that would do this?
I want to be able to have code on the client side where the user chooses something, it makes a call to the server, and the server sends back "for this option, you need a have a text field called foo and a select field called bar with the following options, this one is selected, etc", and then the client side builds the next part of the form from that information. Or if they choose a different option, a different set of fields and values is returned from the server and populated on the screen. Also it might cascade so after the first selection we need a select field with some options, and then depending what they select on that select field the next field might be another select field or it might be a text input field.
Has anybody done anything like that? Is my best choice to have the AJAX call return some html that I just stuff into a div, or can I do it field by field and value by value?
If it matters, the back end is going to be written in Perl/MASON, and the front end will be using Javascript/JQuery/JQuery-UI.
I would use jquery and submit AJAX calls to whatever backend system you choose. Have this backend system compute the necessary changes and return the info as JSON. Let JQuery parse it for you and append the necessary form elements. However, it seems like under alot of use cases these decisions could be made on the client side without even talking to the server just as we pre validate form input before allowing posting to the server. I don't, however, have your requirements in front of me so I am sure there is a reason you want to get the info back from the server.
P.S. please do not return pure html from the back end to the client....ever.
I want to change the list of available values in a dropdown depending on the value selected in another dropdown and depending on values of certain fields in the model. I want to use JQuery to do this. The only hard part is checking the values in the model. I have been informed that I can do this using Ajax. Does anyone have any idea how I will approach doing this?
AJAX is indeed the technology your looking for. It is used to sent an asynchronous request from the client browser to the server.
jQuery has an ajax function that you can use to start such a request. In your controller you can have a regular method tagged with the [HttpPostAttribute] to respond to your AJAX request.
Most of the time you will return a JSON result from your Controller to your view. Think of JSON as something similar to XML but easier to work with from a browser. The browser will receive the JSON and can then parse the results to do something like showing a message or replacing some HTML in the browser.
Here you can find a nice example of how to use it all together.
Okey, this might seem a bit strange question so I will explain.
Do I really need to create a postback that explains what is wrong with form if it's not validated if I also use JS for it?
I am of course validating user input and I use somewhat "general" approach. For instance if something is not validated it will just show "Some error occurred, check your input bla bla..". I am not creating postback for every input so that it will shot "Your username is suppose to be at least 3 characters long etc.." and I don't do this because JS is doing that on the fly.
My server-side validation only is like a guard against stupid/wrong entries where name is empty or something along that, rest is up to jQuery. Form will always be valid if client is running JS. I am doing it to save my time.
My question is - is it a bad idea? I just don't see why because everyone is running JS anyway and my server is not allowing bad/invalid entries to be put in DB even with JS off.
I don't think that's a bad idea, data validation can be client side. If something goes wrong, i just throw a generic error.
I only validate server side the business rules
I would like to validate both single field and multiple field data from a CakePHP form.
The single field validation should be done on blur from each field while the multiple field validation should be done on submitting the form.
I would like to use the $validate property declared in the Model for validating data and I would like to display the errors near each field (single field validation) and on top of the form (for multiple field validation).
My main goal is to achieve this the most "caky" way (if there is one for validating data with jQuery). I couldn't find any useful advice out there and I'm asking you for some help to get this going.
One of my concerns is how shall I pass data from the form to jQuery and then to the action that does the validation and also how shall I return and display the errors, if there are any.
Thank you in advance!
I'd suggest first making sure everything works without jQuery, then use the jQuery Form plugin to submit your forms via AJAX. If you include the RequestHandler component in your AppController, you should find that your controllers distinguish automatically between AJAX and synchronous requests.
OK, so I coded my own solution to this, but I am still waiting for a more "caky" approach.
I made two generic jQuery functions, one for single field validation and one for multiple field validation. The function should grab the data from the specified form and send it to the form's action via AJAX, to a specially created controller method which will attempt to validate data and output an AJAX response ("" for validation has passed and errors for errors in validation). Then, the result is checked in the jQuery function and the default form behaviour is triggered only if the validation has passed. Otherwise, display the errors and return false; to prevent default submission.