【发布时间】:2018-06-22 16:47:18
【问题描述】:
点击提交按钮实际上什么也没做。提交空白表单将触发对必填字段的验证,但按要求填写表单会导致表单不提交/提交按钮什么也不做。模板有CSRF_Token,提交按钮在form标签中,form标签有指向正确方向的action属性。 Chrome 不会出现任何错误,所以我不知道如何继续。
views.py
@blueprint.route("register/", methods=['GET', 'POST'])
def register():
"""Renders register page."""
form = RegisterForm()
if request.method == 'POST':
if not form.validate_on_submit():
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
company, err = get_company(form.organization.data)
if err:
company, err = create_company(form.organization.data)
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
customer, err = get_or_create_customer(
form.first_name.data + " " + form.last_name.data, form.email.data,
company_id, form.position.data, phone_number
)
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
else:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=True, message=success_msg, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
return render_template('main/register.html', page_title="Service Registration",
form=form, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
@blueprint.route("register/", methods=['POST'])
def upload_register():
"""Handles file upload POSTs."""
first_name = request.form.get("first_name")
last_name = request.form.get("last_name")
name = request.form.get("first_name") + " " + request.form.get("last_name")
email = request.form.get("email")
filename = request.form.get("filename")
file_type = request.form.get("file_type")
if filename == '':
response = make_response("No selected file")
return response, 400
if check_file_type(file_type):
filename = clean_filename(filename)
filename = secure_filename(filename)
filename = unique_filename(filename)
response = generate_presigned_post(filename, file_type)
# CREATE DB REFERENCE
url = "http://nevcodocs.s3.amazonaws.com/Uploads/{}".format(filename)
instance = CustomerFileUpload.query.filter_by(url=url).first()
if not instance:
instance = CustomerFileUpload(url=url, email=email, name=name)
db.session.add(instance)
db.session.commit()
else:
instance.update(created_at=datetime.utcnow())
return response, 200
else:
response = make_response("Invalid file type")
return response, 500
javascript/jquery
// Enables/disables form submission and colors button accordingly
var enableSubmit = function(enabled) {
if (enabled) {
$('#submit_ticket').removeAttr('disabled');
$('#submit_ticket').removeAttr('style');
} else {
$('#submit_ticket').attr('disabled', 'disabled');
$('#submit_ticket').attr('style', 'background-color: rgba(244, 121, 32, 0.5) !important; border-color: rgba(244, 121, 32, 0.25) !important;');
}
};
$('#ticket-form').submit(function(event) {
enableSubmit(false);
showSpinner(true);
var validated = true;
var didSelectFile = true;
didSelectFile = validateField('#upload') && validated;
validated = didSelectFile && validated;
if (didSelectFile && !validateContentType()) {
$('invalid-upload-alert').show();
validated = false;
} else {
$('#invalid-upload-alert').hide();
}
if (validated) {
$('#filename').val($('#upload').val());
$('#file_type').val($('#upload').prop('files')[0].type);
$.ajax({
type: 'POST',
url: '/register/',
data: $('#ticket-form').serialize()
}).done(function(data) {
var formData = new FormData();
for (var key in data.data.fields) {
formData.append(key, data.data.fields[key]);
}
formData.append('file', $('#upload').prop('files')[0]);
var req = new XMLHttpRequest();
req.onload = function() {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-show");
$('#ticket-form-failed').addClass("support-form-hide");
$('#ticket-form').removeClass("support-form-show");
$('#ticket-form').addClass("support-form-hide");
$('#ticket-form-success').removeClass("support-form-hide");
$('#ticket-form-success').addClass("support-form-show");
};
req.onerror = function() {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-hide");
$('#ticket-form-failed').addClass("support-form-show");
};
req.open('POST', data.url);
req.send(formData);
}).fail(function(err) {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-hide");
$('#ticket-form-failed').addClass("support-form-show");
});
} else {
showSpinner(false);
enableSubmit(true);
}
{% endif %}
if (!validated) {
event.preventDefault();
showSpinner(false);
enableSubmit(true);
}
});
【问题讨论】:
-
这看起来很复杂。在我看来,您缺少 preventDefault。
$('#ticket-form').on("submit",function(event) { event.preventDefault(); -
还有,为什么在函数末尾附近有一个
{% endif %}? -
我使用的是 jinja,因此使用的是 {% endif %}。我尝试添加preventDefault,但提交按钮仍然没有做任何事情。我还对代码进行了编辑,因此可能会造成混淆。
-
请以纯 HTML(查看源代码)和脚本在页面中的样子发布呈现的表单
-
问题是源代码太长了。
标签: python jquery flask flask-wtforms