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
or
and does not work for
`
-
There is a way to create custom validation rules for UI form for single field but the problem is for validating four fields depending on one another, I guess you'll have to write custom code in js based on the ids of those fields.– Abdul Samad AbbasiAug 23, 2021 at 5:21
-
share the code which you try.– Dhiren VasoyaAug 23, 2021 at 6:48
-
Please try added answer.– ZealousWebAug 23, 2021 at 14:14
1 Answer
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!