Question

我有一个表单，它是一个包含650个字段的excel电子表格。我需要验证所需的两个字段。此外，我想通过在第一次单击时隐藏保存按钮来阻止多个表单提交。

我有以下内容：

$('#btnSave').click(function() {
    $('#formSub').hide();                        
    $('#bidForm').validate({
        rules: {
                vendorName: { required:true }
        },
        messages: {
                vendorName:  "Vendor Name is required!"
        }
    }).form();  

    if ($("#bidForm").valid()) {
        $("#formSub").html('<table style="font-size:11px;"><tr><td><img src="images/ajax-loader.gif" border="0"></td><td>&nbsp;&nbsp;Saving! Please wait...</td></tr></table>');

        var options = {
                success:function() {
                    $("#formSub").html('<input type="button" name="btnBFGoBack" id="btnBFGoBack" class="submitButton btnGoBack" value="Go Back" style="float:left; margin-right:20px;" /><input type="button" name="btnSave" id="btnSave" class="submitButton save" value="Save" style="float:right;" />'); 
                },
                url:'saveForm.cfm'
        };
        $("#bidForm").ajaxSubmit(options);
        return false;
    }
});

我有几个问题。

点击保存按钮后，需要大约4-5秒才能显示“正在保存！请稍候”。我不明白为什么
$（“＃formSub”）。html（'Saving！Please wait ...'）; 不会立即触发。
btnBFGoBack具有点击功能。在我用$（“＃formSub”）。html（）显示按钮后，点击功能不再起作用了。

validate（）是否有问题，因为我在表单中有这么多字段？如何确保隐藏保存按钮，验证我的两个字段，然后再次显示保存按钮？

Answer 1

设置验证操作页面加载，而不是提交处理程序。同时通过jquery validate附加提交处理程序。对你正在做的事情似乎还有很长一段时间。也许在validate js文件中稍微调试一下，确保它没有循环表单中的所有字段。

$(function(){ // ready
    $('#bidForm').validate({/*options*/
        submitHandler: function(form){
            //send ajax here
        }
    });
})

Answer 2

如果您有很多字段并且只想使用validate插件验证2个字段，则可以添加一个“ignore”类，该类告诉validate插件不应验证特定字段。这应该会加快这个过程，你仍然可以利用所有其他漂亮的验证插件功能。

Answer 3

您不应在点击事件后调用validate，但在加载页面后使用submitHandler发送ajax请求：

$(document).ready(function(){
    $('#bidForm').validate({
        rules: {
                vendorName: { required:true }
        },
        messages: {
                vendorName:  "Vendor Name is required!"
        },
        submitHandler: function(form) {
            // handler body
        }
    });  
});

没有测试用例，很难猜测。

Answer 4

当我有600+ formfield并且只需要验证1或2个字段时，使用验证插件是不切实际的。这样：

 $('#btnSave').click(function() {
     if ( $('#vendorName').val() == '') {
         $('#vendorErr').html('Please pick a vendor!');
     } else {
        $("#formSub").html('<table style="font-size:11px;"><tr><td><img src="images/ajax-loader.gif" border="0"></td><td>&nbsp;&nbsp;Saving! Please wait...</td></tr></table>');

        var options = {
            success:function() {
                $("#formSub").html('<input type="button" name="btnBFGoBack" id="btnBFGoBack" class="submitButton btnGoBack" value="Go Back" style="float:left; margin-right:20px;" onclick="goBack();" /><input type="button" name="btnSave" id="btnSave" class="submitButton save" value="Save" style="float:right;" />'); 
            },
            url:'saveForm.cfm'
        };
        $("#bidForm").ajaxSubmit(options);

    }
});

jquery验证问题

4 个答案: