I am building a new site and would like all the Add/Edit of new items to be in lightbox with ajax and i am using JQuery.
The lightbox should include on page validation in some cases, also should show the errors from server on form without submit or page refresh, the lightbox will have similar template (title, input fields and submit button) but the requirements and input fields will be different.
Another requirement will be to show loading icon while loading the lightbox and while doing the ajax.
My question is there already a solution for that?
If not how would you design it?
I started doing it with JQuery plugin to load the Form object and Inputs object array and create a template using Mustache, but this seems to be over complicated.
How other sites handle this?
I would handle it by fetching JSON from the server and sending JSON to the server on form submit. Or in another format like jQuery.serialize on the forms.
You would render the form in the lightbox based upon the JSON you receive from the server. If the use clicks submit you'd send the data of the form in a JSON format to the server and have the server return any errors (or success).
Alternatively you could mirror the validation on the JavaScript side and only submit once JavaScript-side validation passes but that will close the popover.
I don't think this would be an exceptionally convoluted approach, though it might be if you are going to pull in plugins and other frameworks for this.
Related
I have form, that accepts number between 1-6 and a file. You can see code in my other question: https://stackoverflow.com/questions/43611769/django-javascript-modal-form-validation
I have to validate form, without having to reload it as it is modal form and it closes on refresh (or is should open it on refresh, but i don't really like the idea of reloading). So i want the modal to show error, if there is any (wrong file type, model already exists...) How would i achieve this?
Somebody suggested me to post form asynchronously and show error with javascript. How would i send javascript message from views in django, without the page having to reload? Could it be done with Json? How?
Thank you in advance!
You have to options:
Django validation view which will return JsonResponse
In that case you send your data to this view which will check if data are valid and return appropriate response. Then you parse response and show error if any.
Javascript validation. You make validator in your javascript code which will check if filetype is suitable etc. Here you have example how to allow only specified types of files.
In both cases you should validate your data in view in which you are saving to Database/server while someone could send data directly to your saving view(e.g. with Postman).
I would suggest second approach because it is faster and one less call to server.
--edit--
(Trying to rephrase my question to be less confusing..)
My understanding is that you should validate forms both client and server side in case Javascript is not working.
How do advanced developers accomplish this in a seamless interface (if one had to describe in a general manner)?
Currently I have Javascript validating my input fields on the fly with 'onkeyup ()', highlighting invalid fields.
If I run the same validations with PHP after the user submits, then I have to redirect to the form if there were any errors, refreshing the page.
I thought this method was lacking sophistication.
What would be the best method?
Thanks in advance.
--- original question below ---
So I created a form with client side javascript to validate the input as the user types. It highlights the boxes w red borders if the data is invalid (using javascript to alter the css). I would like to re-validate the same data with php server side in case of any problems with javascript client side.
I am trying to figure out what is the proper (or best) way to accomplish this.
Currently the form action is setup to go to "register_post.php" after user hits submit.
--
So do I just validate the form data in PHP in "register_post.php", and redirect back to the form page if something is invalid, or is there a more sophisticated way to do this?
One annoying result of this is the page refreshing when the page is redirected.
Is there a more sophisticated way to do this?
--
Another related question is - should I prep my code for javascript not working at all? ..since currently, I use javascript to highlight the fields if the data is invalid. The user will have no indication of which fields are invalid without js.
please bear with me as I am a beginner.
You are trying to valid the post data with PHP and without refresh the page, I don't know if I get your point right. If you want to valid the data with PHP and without refreshing page, you could use AJAX. You can use javascript to post data to a PHP script and deal PHP return data.
An example of jquery ajax method :
<script>
var validDataArr = ''; //data need to be valided
$.ajax({
type:"post",url:"http://"+top.location.hostname+"/valid.php",
data:validDataArr,
success:function(context){alert(context);}
});
</script>
While submitting the form , call a javascript function to validate the fields and throw an error if it not suits.
you can call a js function as below
input type="submit" name="Submit" id="button2" value="Submit" onClick="javascript:verify()"/>
Try this , this will help you to understand the basic validation
http://jsfiddle.net/NWWL4/15/
I have a bit of a tricky work problem I hope to get some help with.
To handle various forms and storing entries, we use an in-house tool which I cannot modify. Basically what happens is:
I enter he URL the original page, and the URL of the destination page after successful submission.
The tool spits out some HTML and Javascript code, the most important of which is a unique URL, let's call it (redactedURL), that goes after the action attribute.
When the form is submitted, the page will refresh to one of two possible destination URLs: the one I inputted if success, or (redactedURL) if error.
I can download all the entries from the tool afterward.
The HTML is quite simple. checkform() is a simple validation script.
<form action="(redactedURL)" name="enenForm" method="POST" onSubmit="return checkForm()">
The issue with this is that I can't style the (redactedURL) error page, which is quite ugly. I am wondering if there is anyway I could
Suspend automatic display results of form submission
Determine the destination URL, and based on that, write out a custom thank you/error message (since I cannot access the server-side script, this seems to be the only solution to determine if the submission is successful or not).
Make sure that tool still properly stores all the entries.
Any help would be much appreciated. Thanks!
Don't use a form. Instead use AJAX. I think this SO Question will provide a start. Basically you use JavaScript to submit data to a server using XMLHttpRequest. The returned HTML is a string which you could either modify or (better yet) normalize and add to the DOM.
For an advanced example jQuery-Mobile does this concept when you click a link instead it gets the HTML from the server as an AJAX request copies the HTML inside the <body> and inserts it into the DOM.
Search for tutorials about AJAX and jQuery (or your prefered JS library). Like this one.
I would like to know instead of using PHP Sessions to save the field data, is there any concept in Ajax or jQuery, to navigate between lot of form pages, but to save the form data until the user submits, if user submits, all the information present on different pages should also get submitted.
you can try the form wizard its a jquery plugin : http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx
There are multiple concepts of that type.
You can use JavaScript with the jQuery library to paginate a huge form using functions for HTML elements manipulation. That way, you don't require the user to create another HTTP request, and thus the information entered on other pages doesn't get lost when the user switches pages. The form can then be submitted using AJAX or a normal, "front-end" HTTP request method.
Also, you could try saving the entered information in a cookie with JavaScript and jQuery.
Here are some examples of jQuery pagination:
http://dl.dropbox.com/u/4151695/html/pajinate/examples/example1.html.
You can easily apply these concepts with anything, including HTML forms.
And here are various plugins with source:
http://www.jquery4u.com/plugins/10-jquery-pagination-plugins/.
A cookie is nothing more than a plain text file that is stored on a visitor's computer, which means you can easily encode and embed your form data into it.
I have a question about what backend to use. I have a html page that has various dropdown lists. On Submit I want to sent the results of that page to another page to compile the (average) results. Is there a way to do this without setting up a database? I was thinking of sending the data with Ajax and then compiling the data with Javascript on the receiving page.
I've done something like this before so any suggestions would be appreciated.
You can use jquery to check the changes in the dropdown list. Send the results to a jquery ajax page and get the return value as json. The result json can be shown on the same page with jquery.
I assume the page you are talking about is an html or jsp page. Yes you can use javascript ot process the data and then send it to a servlet and get it back to another jsp.