Is it possible to validate a WTForm field after leaving the field but before submit?
For example, after entering a username, that field is validated to see if its available and shows a checkmark, before the user clicks submit.
When the field is changed, perform a check and change the text in an adjacent node. Some things can be validated directly in the browser. To validate against data on the server, send a request with JavaScript to a view that checks the data and returns a JSON response.
#app.route('/username-exists', methods=['POST'])
def username_exists():
username = request.form['username']
exists = check_if_user_exists(username)
return jsonify(exists=exists)
<input id='username' name='username'>
<p id='username-status'></p>
var username_input = $('#username');
var username_status = $('#username-status');
$('#username').on('focusout', function () {
$.post(
"{{ url_for('username_exists') }}",
{
username: username_input.val()
},
function (data) {
username_status.text(data.exists ? '✔️' : '🙅');
}
);
});
This example uses jQuery, but the concept is not specific to any library.
Alternatively, post the entire form to a separate view that only validates the fields, then return jsonify(form.errors) and do something with them in the browser. The code would be essentially the same as above, with some extra logic to put the error messages next to the correct fields.
Remember to still validate the data when the form is submitted, as requests can be made outside the browser with other
Related
I have Model form with charfield of username.
I want to get value of field after user stopped entering text to use it in my python code in view.
How can I achieve that with Javascript? Is it possible to do it without JS?
jquery + ajax call
$('#username').on('input',function(e){
var input = $(this);
var username = input.val();
console.log(username);
$.post('/some/url/from/your/app/', function(data){
console.log('sent username to backend');
})
});
You capture input event on your username input field and send that value to your backend.
I was wondering if someone could help me.
I want to be able to click on customer and locations be based off of the certain customer, being a dependent dropdown. This information is coming from a database, hence the queries in the following code.
This is my form function for both customer and location
class CustomerPick(SubForm):
customer = QuerySelectField(u'Customer',
get_label=u'sCustomer',
query_factory=lambda :
(TCustomer.query.order_by(TCustomer.sCustomer)),
validators=[DataRequired(),])
location = QuerySelectField(u'Location',
get_label=u'sLocation',
query_factory=lambda :
(TLocation.query.order_by(TLocation.sLocation)),
validators=[DataRequired(),])
Here is the view portion
#route('new/', methods=['GET', 'POST'])
def new(self):
form = CustomerPick()
if form.validate_on_submit():
This is a picture of the dropdown also for reference, if there is anything else needed for you guys to have a go please let me know. Thanks in advance!
Photo
I don't quite get your question but you want to be able to click a user and populate the dropdown based on the location?
This involves some Ajax sending data back and forth.
I'll give you a minimized version of code snippet (not tested).
// front-end - this handles user behavior in dropdown. When a user changes a value
// in a user drop down, it will send a request to your Flask view function.
$("#user_drop_down").change(function () {
let user_identifier = this.value;
$.ajax({
type: "GET",
url:/url_to_flask_view_function/,
data: {user_identifier: user_identifier},
success: function (resp) {
$('#your_designated_div_for_both_dropdowns_div').html(resp.data)
}
});
});
# back-end - this receives the request sent from front-end and process the Flask-WTF
# form options so that it can render different options in the dropdowns. In this view
# function, we will return jsonified template with newly processed form_object
# instead of rendering the option data. You can return the json with only the data
# but it involves more javascript parsing and may be difficult for you.
#app.route('/url_to_flask_view_function/')
def form_processing():
user_identifier = request.args.get('user_identifier)
# now we've gotten the user_identifier, you will need to query. Below query is totally made up.
query_to_where_location = Location.query.filter(Location.user_identifier= user_identifier).first()
# your query result will not be in a tuple format
# if your query result is like this "locA, locB, locC, locD", you need to process
# it so that you make [('locA', 'locA'), ('locB', 'locB').......]
form_object = MyForm()
form_object.location.choices = processed_list
return jsonify({"data":render_template('template_that_contains_your_drodpdowns.html',
form_obj=form_obj)})
<!-- HTML piece, you should've had this already but make sure to specify your fields in HTML following Jinja2 synthax.-->
<form>
{{form_object.user}}
{{form_object.dropdown}}
</form>
In conclusion, the idea here is that you catch user behavior using .change, then based on the change, you will send request with user_identifier to server side. Once it reaches server-side, you will make a query into the DB and render the same template again with differently processed forms.
The best way to go about doing this is that, once you get the user_identifier into your view, you make query and return jsonified location object, then in your success block, you would alter the of that dropdown input element.
Let me know if you have more questions.
I'm trying to submit a form using web2py's ajax function as explained in the book, but using FORM instead of SQLFORM since I don't want the data to be stored in a database.
ajax_test.html
{{extend "layout.html"}}
<h2>Form</h2>
{{=form}}
<script>
jQuery("#myform").submit(function() {
ajax("{{=URL('ajax_test')}}",
["mytext"], "output");
return false;
});
</script>
<h2>Output</h2>
<div id="output"></div>
Controller inside default.py:
def ajax_test():
form = FORM(
INPUT(_type="text", _name="mytext", _id="mytext",
requires=IS_NOT_EMPTY()),
INPUT(_type="submit"),
_id="myform"
)
if request.ajax:
if form.accepts(request.vars, session):
return DIV("Form submitted.")
elif form.errors:
return TABLE(*[TR(k, v) for k, v in form.errors.items()])
else:
return DIV("Couldn't check form.")
return dict(form=form)
When the form is submitted (request.ajax == True), both form.accepts and form.errors return False. Even though I access user's input via request.vars.mytext, then I would need to validate it on my own instead of using web2py's capabilities.
What am I missing?
When you pass the session object to form.accepts(), it will automatically implement cross-site request forgery protection by adding a hidden _formkey field to the form. When the form is submitted, the value of this hidden field is compared with the value stored in the session, and the form is not accepted if the match fails.
There are two problems with your code. First, you only call form.accepts when there is an Ajax request, so the _formkey does not get generated and included in the original form. To correct that, try the following:
form.process()
if request.ajax:
if form.accepted:
form.process() is just a shortcut for form.accepts(request, session). Above, it is called even for the initial non-Ajax call when the form is created. This will generate the _formkey value and store it in the session.
Second, your Javascript code does not submit the whole form but only the mytext field, so the hidden _formkey value will not be posted back to the server. As a result, the form is not accepted (web2py does not display an error in this case, as such a failure would typically be the result of foul play).
I'm not sure it is documented, but the second argument to the ajax() function can instead be a jQuery selector, which will result in all form elements inside the selected element being serialized and submitted. So, try:
ajax('{{=URL('ajax_test')}}', '#myform', 'output');
The #myform selector will result in the entire form being serialized, including the hidden fields included in the form object.
I am trying to make a "social" site, where you can add friends, create posts, etc. So the main problem is, how to show user status, using Django Admin API?
Thanks in advance!
In html:
{{ user.is_authenticated }}
In view:
def index(request):
user = User.objects.get(username="root")
return render(request, 'blog/index.jade', {'users': users})
So this basically returns me True or False, but this is the status not for only "root" user, but anyone.
Make Ajax request every 5 seconds which will be handled by view. And on each request update table column last_active corresponding to that user which will update the timestamp (you have to make a last_active column of timestamp type).
Make another Ajax request every 5 seconds to fetch all the users who are online by comparing current time and last_active timestamp corresponding to each user. It will return all the users online.
You can use this logic to make multiuser/singleuser chat system also.
Code for making Ajax request:
(function getOnline() {
$.ajax({
url: '/get_online',
type: "GET",
data:
{
user:user
},
success: function(data) {
console.log("success");
},
complete: function() {
// Schedule the next request when the current one is complete
setTimeout(getOnline, 5000);
},
error: function(xhr, errmsg, err) {
console.log("error");
}
});
})();
You won't be using the Django admin page for that - that is just for database management. What you are referring to with {{ user.is_authenticated }} is part of the Django templating system. That is a variable that is written to the page on page load. It will not change until the user reloads the page. What you're going to need to do is use javascript's setInterval function to routinely do an ajax call back to the server. So you have a js file with an initialization function that calls the setInterval function, which in turn makes an ajax call every 20 seconds or so. The ajax call goes to a url that is defined in your urls.py file, which associates it with a view that is defined in your views.py file. That view queries the database to see if a user is authenticated or not, and then it returns that info in an HttpResponse to your ajax call, which has a callback that saves the response to an object, which you then render to the page in whatever way you want, to let the user know that other users are or are not logged in.
I need django modelform with 2 fields, where second field choice list depends on what was chosen in first one. My model:
class Offer(BaseModel):
VEHICLE_TYPES = (
('personal','Personal car'),
('truck','Truck'),
)
vehicle_type = models.CharField(max_length=32, choices=VEHICLE_TYPES, default='personal', verbose_name='Vehicle type')
PERSONAL_MAKES = (
('',''),
)
TRUCK_MAKES = (
('',''),
)
make = models.CharField(max_length=32)#what more??
How can I set choices of make field to PERSONAL_MAKES if vehicle_type is set to personal? How can I do this? Is it possible on model level?
You probably can't because it depends of user interaction with your form: your server can't know in advance which element your user will select before sending the form to the browser. You could probably achieve this using ajax. I think a working process could be :
Create a form with all the fields, and make make field hidden
Create a view (I'll call it AjaxMakeFieldView) that will catch an ajax request taking a vehicle_type argument and return the HTML for make field, populated with relevant data. Add a URL in your URLConf for this view.
In your template, add a Javascript binding : when user select a vehicle_type, the browser will send aan ajax request to AjaxMakeFieldView and replace hidden make field with returned HTML
If you don't want javascript, another way would be a two step form :
A first form with a vehicle_type field
Once the first form is submitted, your user get a second form with a make field, which initial data is populated depending of vehicle_type selected in the first form.
I've never done this, but Django documentation on Form wizard seems a good place to start.
This is how I ended up having two model choice fields depending on each other, on one page. In the below, field2 is depending on field1:
Javascript portion
Note that in $.each(), $.parseJSON(resp) should NOT be used (instead of just json) as we're already have it parsed by jQuery (due to the content_type='application/json' response) - see I keep getting "Uncaught SyntaxError: Unexpected token o".
$(document).ready(function() {
$("#id_field2").empty();
$("#id_field1").change(function(){
$.ajax({
url: "{% url 'ajax_get_field_2' %}",
type: 'GET',
data: {field1_id: $("#id_field1").val()},
dataType: "json",
success: function(resp){
$("#id_field2").empty();
$.each(resp, function(idx, obj) {
$('#id_field2').append($('<option></option>').attr('value', obj.pk).text(obj.fields.code + ' (' + obj.fields.affection + ')'));
});
},
error: function(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
Django views.py portion
Note that this can probably be done by django-rest-framework as well.
I'm obtaining fields=('id', 'code', 'affection')) from my MyModel2 - these can then be reached in JQuery using obj.fielsd.<myfieldname>.
class AjaxField2View(generic.View):
def get(self, request, *args, **kwargs):
field_1 = get_object_or_404(MyModel1, pk=request.GET.get('field1_id', ''))
model2_results = MyModel2.objects.filter(k_value=field_1 .k_value)
return HttpResponse(serializers.serialize('json', model2_results, fields=('id', 'code', 'affection')), content_type='application/json')
Another smart method query/free and no views needed,
is to make html tags for options that related to field A choice.
For example, in field B options:
<option example_tag="example_value" value="5"></option>
This tag should be related to either field A value or text.
Using JS to display block/none using this option tag accordingly.
And don't forget to reset value for every time user changes field A.