Question

所以我正在尝试为页面上的两个表单设置表单验证，一次只能看到其中一个表单。当一个表单可见（display ='inline'）时，另一个表单被隐藏（display ='none'）。

我正在联系表单'submit'事件并返回'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之前。

验证表单数据Javascript

1 个答案: