0

I have one large form with 20 fields it is calculation form with multiple segments and I have to validate all 20 fields as required. But not on single submit button. So let's say there are 5 segments of whole calculation each segment have 4 parameters (S= Segment, P=Parameter) on each segment, there is calculate output button, So if I am in Segment S1, I have 4 Parameters S1P1, S1P2, S1P3, S1P4, and button S1B1 which calculates S1P4 = S1P1*S1P2 and it also validates all S1P1, S1P2, S1P3 required with form validation. Problem is I want to validate whole form as well as Part wise also So when I click button S1B1 it should validate only S1P1, S1P2, S1P3 likewise S2B1 will validate S2P1, S2P2, S2P3 input box and on last there is Submit button which will validate all 20 fields.

I have added Jquery Form validation library, I have created 2 functions first on S1B1 click and second, on Submit button both have different rules in form validation I am able to validate the whole form on submit but when I am trying to validate part of the form it is validating the whole form again.

Problem is which ever function i call that rules are set for both function if i click first Submit than it is checking for all fields and than even i click S1B1 it validates all fields

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();

}
Sparky
  • 98,165
  • 25
  • 199
  • 285
newCode
  • 178
  • 1
  • 3
  • 15
  • @mplungjan this is a single form not created with Form wizard and there is not step by step process – newCode Apr 09 '19 at 07:12
  • Ok. Sounded like the solution could be found there – mplungjan Apr 09 '19 at 07:13
  • Each segment should be contained within its own `
    ` container and then each segment can be validated separately. You could then test them programmatically using the `.valid()` method called with various handlers attached to buttons or links.
    – Sparky Apr 09 '19 at 17:02
  • @Sparky Yes, I tried finding the solution with one form but didn't get any then I converted the single form to multiple forms. – newCode Apr 10 '19 at 05:01

0 Answers0