提交之前的jQuery表单验证

Question

I currently have the following js that adds error class if the required fields aren't completed.

I need an if statement if any of the require fields are empty to not post the form.

Here is my JS at the moment.

function CheckPaymentForm(){    
    $('.required').removeClass('error').filter(function() {
        return !$.trim(this.value).length;
    }).addClass('FormError');

    var FormToSubmit = $( "#payment-form" ).serialize();    
    ProcessPayment(FormToSubmit);
};

I have tried various if statements on checking for the error class but without any joy. I don't want to call the function ProcessPayment if I still have empty required fields.

Answer 1

Change it to this...

function CheckPaymentForm(){    
    $('.required').removeClass('error').filter(function() {
        return !$.trim(this.value).length;
    }).addClass('FormError');

    // this will return before submitting, if there are any invalid inputs    
    if ($(".FormError").length) return;

    var FormToSubmit = $( "#payment-form" ).serialize();    
    ProcessPayment(FormToSubmit);
};

It simply checks for the class FormError that you add to invalid inputs. If there are any then it drops out without sumbitting.

Also, I think you have an error in the code. The removeClass() should probably remove FormError instead of error .