验证表单数据Javascript

Question

所以我试图为页面上的两个表单设置表单验证，一次只有一个可见。当一个表单可见（display = 'inline'）时，另一个表单是隐藏的（display = 'none'）。

我正在连接表单“提交”事件并返回“false”，以便在手动提交表单之前验证表单字段。

我遇到的问题是当我尝试使代码模块化时，即尝试使用通用方法在两个表单上设置表单行为。当我尝试这样做时，我无法在单击提交按钮时不提交表单。但是，当我单独设置两种表单时（重复的方法做同样的事情，只是使用不同的 DOM 对象）我可以让功能正常工作。

下面是我尝试循环遍历两个数组，这些数组在传入的方法中创建 DOM 对象：

if($('#payment_wrapper').length > 0){
    var form_elements = [['#nr_form', '#nr_submit_button', '#nr_notes',     
'#nr_amount'],['#rec_form', '#rec_submit_button', '#rec_notes', '#nr_amount']];
    for (var i = 0; i < 2; i++){
        setupForms(form_elements[i]);
    }
}

    function setupForms(arr){
        $(arr[0]).submit(function(event) {
            (arr[1]).prop('disabled', true);
            validateForm(arr[0], arr[1], arr[2], arr[3]);
            return false;
        });
    }

    function validateForm(form, button, notes, amount){
        var err = false;
        var note = $(button).val().length
        var payment = $(amount).val();
        if(note > 150){
            alert("note is greater than 150");
            $('.payment_errors').text("It seems that your note is too long.  Please make sure it is 150 characters of less")
            $(button).prop('disabled', false);
            err = true; 
        } else if (!validateAmount(payment, button)){
            err = true;
        } else if ( err == false){
            $(form).get(0).submit();
        }
    }

    function validateAmount(payment, submit_button){
        var match = payment.match(/^[0-9]+\.[0-9]{2}/)
        if (payment.length == 0) {
            $('.payment_errors').text("You must enter a valid amount before submitting")
            $(submit_button).prop('disabled', false);
            return false;
        } else if (!match) {
            $('.payment_errors').text("Hmmmm, something is wrong with your payment amount.  Make sure your amount is in the proper format")
            $(submit_button).prop('disabled', false);
            return false;
        } else {
            return true;    
        }
    }

任何帮助将不胜感激。谢谢。

Answer 1

试试

event.preventDefault();

在返回 false 之前。