How to validate forms on client-side with Flask? - ajax

Question

I am trying to write a simple Flask API that reads fields name , email , phone , message with POST, validates them , and returns true or false depending on the output of the validation - to the following JS script. How can I do that?
#app.route('/email' , methods = ['POST'])
def email():
name = request.form["name"]
phone = request.form["phone"]
email = request.form["email"]
message = request.form["message"]
return json.dumps({'status' : 'OK' , 'name' : name , 'phone' : phone , 'email' : email , 'message' : message});
.
$(function() {
$("input,textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
// event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var message = $("textarea#message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') >= 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$.ajax({
url: "/email",
data: $('form').serialize(),
type: "POST",
cache: false,
success: function() {
// Success message
$('#success').html("<div class='alert alert-success'>");
$('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#success > .alert-success')
.append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
error: function() {
// Fail message
$('#success').html("<div class='alert alert-danger'>");
$('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
$('#success > .alert-danger').append('</div>');
//clear all fields
$('#contactForm').trigger("reset");
},
})
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle=\"tab\"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
$('#success').html('');
});

Answer 1

Validation data on client side is generally bad idea. Maybe some kind of pre-validation is OK, but in any case, final decision should be taken on the server side.
For server-side validation for form you can check WTForms library, that contains some classes of pre-defined validators.