Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts
Monday, June 12, 2017
Detect when a user stops typing with jQuery
Detect when a user stops typing with jQuery
When writing forms I frequently find I need to do some of my validation server side(for example checking if a username is already taken) but want to have a responsive real-time field validation displayed to the user. Obviously this effect can be achieved using AJAX but if you want to validate while the user is typing sending an AJAX request on every keypress is a very inefficient way of doing things. It seems to me that a "onInputFinished" event is needed so that you can detect and take action when a user stops typing in an input field.
I had a bit of a google around and couldnt find an elegant solution for it so I decided to roll my own using jQuery. This simple jQuery script allow you to add the "onfinishinput" attribute to HTML input fields in the same way you would use normal onclick and onkeyup events.
you can check out a working example here:
http://dl.dropbox.com/u/6217043/js-example/example.html
Using the Script:
After including the script on your page you can use the new event like this:
<input type="text" onfinishinput="alert(You typed + input_field.val())" />
NOTE: instead of using "this" when referring to the element use "input_field" like the example above.
Installing the Script:
The script can be downloaded from here:
http://dl.dropbox.com/u/6217043/js-example/onfinishinput.js
The script requires jQuery to function, the latest jQuery can be downloaded from here:
http://jquery.com/
Just include the scripts on your page and you are ready to go.
Monday, April 3, 2017
django Show form validation error with AJAX and jQuery
django Show form validation error with AJAX and jQuery
I once had a situation when I submited form with AJAX and if there were validation errors I had to put them at the same place as form was normally submited.
Assume that we have edit_user_data method in the views.py. If edit_form is valid we do some really useful things. If its not, we should show user form validation errors (btw, I use uni_forms in that example).
Here is our code:
def edit_user_data(request):
# ...
if edit_form.is_valid():
# ...
else:
error_message = dict([(key, [unicode(error) for error in value]) for key, value in edit_form.errors.items()])
return HttpResponse(simplejson.dumps({"result": error_message, }), mimetype='application/json')
error_message is a dictionary which contains all form errors. We use JSON so we could have access to the data like server_response.result[key]. Key is the name of the field.
Here is our javascript code:
$("#edit_form").ajaxSubmit({
url: save_url,
type: 'post',
success: function (server_response) {
// Inform about successfull save
if (server_response.result_success) {
// ...
}
// Remove form errors
$("#edit_form").find(".errorField").remove();
for (var key in server_response.result) {
// Check for proper key in dictionary
if (key in {first_name: 1, last_name: 1, gender: 1, sex: 1, phone: 1, }) {
// Get error message
error = server_response.result[key][0];
// Find related field
field = $("#edit_form").find("#div_id_" + key)
// Attach error message before it
field.before('<p class="errorField"><em></em>' + error + '</p>');
}
}
},
});
#edit_form - id of the submited form, url - where we submit the data to. If AJAX request successfuly was proceed by server (it doesnt matter if user submited valid data or not. It means he does submited something) we now could show user if his form is valid or not. If it is not valid, we remove old errors from form (or we will have multiple errors under the fields, probably duplicates). Let also assume that our form contains 5 fields: first_name, last_name, gender, sex, phone. Here you can see nice trick how to check if a key is related to one of our fields:
if (key in {first_name: 1, second_name: 1, gender: 1, sex: 1, phone: 1, }) {}
We also want to show user only one error per field (If there are more, he will be able to see them next time):
error = server_response.result[key][0];
To show error message above the field itself we need to find that field:
field = $("#edit_form").find("#div_id_" + key)
Luckly our key names are the same as field names :) And then attach a message before it:
field.before(+ error +
);
Where error is description of error, for example, "This field is required". Done. Errors looks nice and native ")
Subscribe to:
Posts (Atom)