jqueryjquery-validatejquery-steps

jQuery validation for multiple input fileds


I have 4 input fields as below screen. enter image description here

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.

  1. All fields are required
  2. If filled LicenceNumber1 and LicenceNumber1Date then no need LicenceNumber2 and LicenceNumber2Date fields.
  3. Same as if filled LicenceNumber2 and LicenceNumber2Date then no need LicenceNumber1 and LicenceNumber1Date fields.
  4. Every pair of input fields are required(EG: Licence number and Date)
  5. 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


Solution

  •     //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')
        }