Question

我有一个包含20个字段的大型表单，它是具有多个细分的计算表单，我必须根据需要验证所有20个字段。但不在单个提交按钮上。假设整个计算有5个细分，每个细分都有4个参数（S =细分，P =参数）在每个段上，都有一个计算输出按钮，因此，如果我在段S1中，则有4个参数S1P1，S1P2，S1P3，S1P4和按钮S1B1，它们计算出S1P4 = S1P1 * S1P2，并且它还会验证所有S1P1，S1P2，S1P3表单验证所需。问题是我也想验证整个表格以及部分表格，因此当我单击按钮S1B1时，它应该只验证S1P1，S1P2，S1P3，同样，S2B1将验证S2P1，S2P2，S2P3输入框，最后还有一个提交按钮，它将验证全部20个字段。

我添加了Jquery Form验证库，我首先在S1B1单击上创建了2个函数，其次在Submit按钮上创建了2个函数，它们在表单验证中都有不同的规则，我能够在提交时验证整个表单，但是当我尝试验证时表单的一部分，它将再次验证整个表单。

问题是我调用的哪个函数，如果我先单击“提交”，则将为这两个函数设置规则，而不是检查所有字段，甚至我单击“ S1B1”，它都会验证所有字段

function s_one_p_four() {

    $("#calcForm").validate({
        rules: {
            "s1p1": {required: true},
            "s1p2": {required: true},
            "s1p3": {required: true}
        },
        messages: {
            s1p1: "Please enter valid s1p1!",
            s1p2: "Please enter valid s1p2",
            s1p3: "Please enter valid s1p3"

        },
        invalidHandler: function (event, validator) {
            mApp.scrollTo("#calcForm");
            swal({
                "title": "",
                "text": "There are some errors in your submission. Please correct them.",
                "type": "error",
                "confirmButtonClass": "btn btn-secondary m-btn m-btn--wide"
            });
        },
        submitHandler: function (form) {

        }
    });
    $("#calcForm").valid();
    $('#s1p4').val($('#s1p1').val() * $('#s1p2').val() * $('#s1p3').val());


}

function formsubmithandler() {

    $("#calcForm").validate({
        rules: {
            "s1p1": {required: true},
            "s1p2": {required: true},
            "s1p3": {required: true},
            "s1p4": {required: true},
            "s5p4": {required: true}
        },
        messages: {
            s1p1: "Please enter valid s1p1!",
            s1p2: "Please enter valid s1p2",
            s1p3: "Please enter valid s1p3",
            s1p4: "Please enter valid s1p4",
            s5p4: "Please enter valid s5p4"


        },
        invalidHandler: function (event, validator) {
            mApp.scrollTo("#calcForm");
            swal({
                "title": "",
                "text": "There are some errors in your submission. Please correct them.",
                "type": "error",
                "confirmButtonClass": "btn btn-secondary m-btn m-btn--wide"
            });
        },
        submitHandler: function (form) {
//submit form call
        }


    });
    $("#calcForm").valid();

}

使用jQuery Validate插件验证表单中的多个部分

0 个答案: