Magento2 make one field required

Question

I have a custom form created in Magento2 which has 4 different types of <input type=" text"> fields, I want to make sure the user enters at least one of those input field(s) and that can be anyone but least one of the fields should be required. And if a user does not input anything in all these 4 fields, s/he should receive an error that one of these inputs must be entered, etc. To simplify my question, Are there any Magento validation classes that I can use to validate in such a scenario? I can see these magento2 validation rules validate-one-required-by-name validate-one-required still exist but these are mainly being used by orand does not work for`

Answer 1

I have created an example for you. Please change error messages according to your need. Like below way you can make any one input field required. Once you fill value in any of the field then form will submit with the use of below code.

Please check for more information - https://prnt.sc/1qfi579

you can also apply css to error message.

<form class="form" action="<?php /* @escapeNotVerified */ echo $block->getUrl('negotiate/negotiate/place'); ?>" id="negotiate-form" method="post" data-hasrequired="* Required Fields" name="custom-fom" data-mage-init='{"validation":{},"customvalidation":{}}'>
    <fieldset class="fieldset">
        <div class="field field1">
            <label class="label" for="firstname"><span><?php /* @escapeNotVerified */ echo __('Field 1'); ?></span></label>
            <div class="control">
                <input name="field1" id="field1" title="<?php /* @escapeNotVerified */ echo __('Field 1'); ?>" value="" class="input-text" type="text" placeholder="<?php echo __('Enter Field 1') ?>"/>
            </div>
        </div>
        <div class="field field2">
            <label class="label" for="firstname"><span><?php /* @escapeNotVerified */ echo __('Field 2'); ?></span></label>
            <div class="control">
                <input name="field2" id="field2" title="<?php /* @escapeNotVerified */ echo __('Field 2'); ?>" value="" class="input-text" type="text" placeholder="<?php echo __('Enter Field 2') ?>"/>
            </div>
        </div>
        <div class="field field3">
            <label class="label" for="field3"><span><?php /* @escapeNotVerified */ echo __('Field 3'); ?></span></label>
            <div class="control">
                <input name="field3" id="field3" title="<?php /* @escapeNotVerified */ echo __('Field 3'); ?>" value="" class="input-text" type="text" placeholder="<?php echo __('Enter Field 3') ?>"/>
            </div>
        </div>
        <div class="field field4">
            <label class="label" for="firstname"><span><?php /* @escapeNotVerified */ echo __('Field 4'); ?></span></label>
            <div class="control">
                <input name="field4" id="field4" title="<?php /* @escapeNotVerified */ echo __('Field 4'); ?>" value="" class="input-text" type="text" placeholder="<?php echo __('Enter Field 4') ?>"/>
            </div>
        </div>
    </fieldset>
    <div class="actions-toolbar">
        <div class="primary">
            <input type="hidden" name="hideit" id="hideit" value="" />
            <button type="submit" title="<?php /* @escapeNotVerified */ echo __('Submit') ?>" class="action submit primary send-form">
                <span><?php /* @escapeNotVerified */ echo __('Submit') ?></span>
            </button>
        </div>
    </div>
</form> 

<script type="text/javascript">
require(['jquery'],function($){
    $("#negotiate-form").validate({
        rules: {
            field1: {
                required: function (element) {
                    if($("#field2").val() || $("#field3").val() || $("#field4").val()){
                        return false;
                    } else {
                        return true;
                    }
                }
            },
            field2: {
                required: function (element) {
                    if($("#field1").val() || $("#field3").val() || $("#field4").val()){
                        return false;
                    } else {
                        return true;
                    }
                }
            },
            field3: {
                required: function (element) {
                    if($("#field2").val() || $("#field4").val() || $("#field1").val()){
                        return false;
                    } else {
                        return true;
                    }
                }
            },
            field4: {
                required: function (element) {
                    if($("#field2").val() || $("#field3").val() || $("#field1").val()){
                        return false;
                    } else {
                        return true;
                    }
                }
            },
        },
        messages: {
            "field1": {
                "required": "You should fill at least one of the input field",
            },
            "field2": {
                "required": "You should fill at least one of the input field",
            },
            "field3": {
                "required": "You should fill at least one of the input field",
            },
            "field4": {
                "required": "You should fill at least one of the input field",
            }
        },
        highlight: function (element) {
            $(element).parent().addClass('error')
        },
        unhighlight: function (element) {
            $(element).parent().removeClass('error')
        }
    });
});
</script>

Cheers!