jQuery validation for multiple input fileds

Question

I have 4 input fields as below screen.

Code is below.

<input class="form-control licence-group" name="LicenceNumber1" id="LicenceNumber1" type="text">

<input class="form-control licence-group" name="LicenceNumber1Date" id="LicenceNumber1Date" type="text">


<input class="form-control licence-group2" name="LicenceNumber2" id="LicenceNumber2" type="text">

<input class="form-control licence-group2" name="LicenceNumber2Date" id="LicenceNumber2Date" type="text">

I'm using this with jQuery Step Plugin.

I want to validate this with following conditions.

All fields are required
If filled LicenceNumber1 and LicenceNumber1Date then no need LicenceNumber2 and LicenceNumber2Date fields.
Same as if filled LicenceNumber2 and LicenceNumber2Date then no need LicenceNumber1 and LicenceNumber1Date fields.
Every pair of input fields are required(EG: Licence number and Date)
If filled 3 fields other remaining field is required. EG: licence 1, licence1 date, licence 2 filled then licence2 date is required.

I used the below code. But it doesn't work.

rules: {
            LicenceNumber1: {
                required: function (element) {
                    return (($("#LicenceNumber1Date").is(':empty')) && ($("#LicenceNumber2").is(':empty') || $("#LicenceNumber2Date").is(':empty')) );
                }
            },
              LicenceNumber1Date: {
                  required: function (element) {
                      return (($("#LicenceNumber1").is(':empty')) && ($("#LicenceNumber2").is(':empty') || $("#LicenceNumber2Date").is(':empty')));

                }
            },
            LicenceNumber2: {
                required: function (element) {
                    return (($("#LicenceNumber2Date").is(':empty')) && ($("#LicenceNumber1").is(':empty') || $("#LicenceNumber1Date").is(':empty')));
                }
            },
            LicenceNumber2Date: {
                required: function (element) {
                    return (($("#LicenceNumber2").is(':empty')) && ($("#LicenceNumber1").is(':empty') || $("#LicenceNumber1Date").is(':empty')));  
                }
            } 
        }

Please assume I have changed the input IDs to understandable. If it's possible without jquery validation plugin and using normal jquery it's also fine. If someone can help me to correctly validate this really appreciate your help. Thank you

You must have a `name` on these `input` fields. The `rules` object only references the `name` attribute, **NOT** the `id`. — Sparky, Sep 03 '18 at 15:03
Thanks for the comment. I already added it in my code. Forgot to add it here. Updated. — Sumith Harshan, Sep 03 '18 at 16:31

score 0 · Accepted Answer · answered Sep 03 '18 at 18:02

    //logic 1 check all empty
    var rul1 = true;
    //check first row
    var rul2 = true;
    //check secon row
    var rul3 = true;
    if ($('#LicenceNumber1').val() == '' && $('#LicenceNumber1Date').val() == '' && $('#LicenceNumber2').val() == '' && $('#LicenceNumber2Date').val() == '') {
        rul1 = false;
        alert('all empty')
    } else {
        //logic 2 check first row
        if (($('#LicenceNumber1').val() != '' && $('#LicenceNumber1Date').val() == '') || ($('#LicenceNumber1').val() == '' && $('#LicenceNumber1Date').val() != '')) {
            rul2 = false;
            //here write code for show empty labels on first row
            alert('first row invalid')
        }

        //logic 3nd second row
        if (($('#LicenceNumber2').val() != '' && $('#LicenceNumber2Date').val() == '') || ($('#LicenceNumber2').val() == '' && $('#LicenceNumber2Date').val() != '')) {
            rul3 = false;
            //here write code for show empty labels on seconrow
            alert('second row invalid')
        }

    }

    //proceed 
    if (rul1 == true && rul2 == true && rul3 == true) {
        alert('submit')
    }

Thanks a lot Suneth. This was I'm expecting. Thanks again for saving my time. Voted. — Sumith Harshan, Sep 04 '18 at 05:04

jQuery validation for multiple input fileds

1 Answers1