1

I am using the validate.js plugin to validate my form. I have a method that validates at least one of the fields are filled in by the user. I used this Answer.

Here is my method:

$.validator.addMethod("require_from_group", function(value, element, options) {
   var numberRequired = options[0];
   var selector = options[1];
   var validOrNot = $(selector, element.form).filter(function() {
       return $(this).val();
   }).length >= numberRequired;
   if(!$(element).data('being_validated')) {
   var fields = $(selector, element.form);
      fields.data('being_validated', true);
      fields.valid();
      fields.data('being_validated', false);
   }
   return validOrNot;
}, "Please fill out at least 1 of these fields.");

The problem is that at least 1 field is filled works but the other required fields are being ignored.

Here is my form validation.

 $("#clientaddressForm").validate({
        submitHandler: function (form) {
             // MY AJAX HERE
            return false;
        },
        rules: {
            addrcd: {
                required: true         
            },
            address1: {
                required: true         
            },
            areacode: {
                required: true         
            },
            zipcode: {
                required: true         
            },
            busname: {
                required:  function(element){
                    return $("#addrcd").val() != "R01" || $("#addrcd").val() != "R02" || $("#addrcd").val() != "R03";
                }         
            },
            tel: {
                require_from_group: [1,".contactfillone"]
            },
            mobile: {
                require_from_group: [1,".contactfillone"]
            },
            fax: {
                require_from_group: [1,".contactfillone"]
            },
        },
        messages: {
            addrcd: {
                required: "Please choose the address code",
            },
            address1: {
                required: "Please enter the address",
            },
            areacode: {
                required: "Please choose the area code",
            },
            zipcode: {
                required: "Please choose the zip code",
            },
            busname: {
                required: "Please enter the business/employment name",
            }
        },
        errorPlacement: function(label, element) {
            if(element.hasClass('web-select2') && element.next('.select2-container').length) {
                label.addClass('mt-2 text-danger');
                label.insertAfter(element.next('.select2-container'));
            }
            else{
                label.addClass('mt-2 text-danger');
                label.insertAfter(element);
            }
        },
        highlight: function(element) {
            $(element).parent().addClass('has-danger');
            $(element).addClass('form-control-danger');
        },
        success: function(label,element) {
            $(element).parent().removeClass('has-danger')
            $(element).removeClass('form-control-danger')
            label.remove();
        }
    });
}

What can I do to fix this?

react_or_angluar
  • 1,568
  • 2
  • 13
  • 20
Maricris
  • 97
  • 2
  • 8
  • 2
    hi, perhaps the require_from_group callback is making the fields optional. perhaps this might be of interest https://stackoverflow.com/questions/27271606/jquery-validate-require-from-group-is-not-working – IronMan Nov 20 '20 at 01:38
  • To make your question more useful to others, can you try to say this another way? "The problem is that at least 1 field is filled works but the other required fields are being ignored." – react_or_angluar Nov 20 '20 at 02:03

0 Answers0