欧芹阻止提交输入验证

Question

I am trying to use parsley to validate a varying number of inputs (order line items) encased within a DIV structure (the main form is for order details).

Due to this I am converting the data outside the form into JSON and injecting into a hidden field.. All works great (including the server side validation).

The issue I am having is that on form submit, the validation runs through, and shows the errors as required, but the form continues through the submission process on 'fail'.

is there any way to see if there are any errors present on the page and prevent the page submit to continue?

Here is what is not working:

$('#submit-form').on('click', function(e){
    e.preventDefault();

    // Validate line items
    $.each($('#lineItems').find('.input-group input'), function(i, val){
        $(val).parsley(parsleyConfig).validate();
    });

All the errors show up but the page POSTs still. However, if the data in the main form is no good, on submit it will pop up the validation errors, that is set by this:

// Validation
var parsleyConfig = {
    errorsContainer: function(pEle) {
        return pEle.$element.parent().siblings('.text-danger');
    }
};
$('#editForm').parsley(parsleyConfig);

I have tried using the 'form:submit' event with parsley to no luck either...

    $('#editForm').parsley(parsleyConfig).on('form:submit', function(){
    // Validate line items
    $.each($('#lineItems').find('.input-group input'), function(i, val){
        $(val).parsley(parsleyConfig).validate();
    });
});

I cannot seem to find a way to get the returned value of if the validation has passed and abort my submit script...

Answer 1

inside your 'form:submit' event listener write this code:

//the validate() calls the error validation and add the error messages:
if ($('#editForm').parsley().validate() == false) {
    //Do nothing:
    return;
}