We Keep Coding

Magento 2 Checkout: Apply custom field validation rule only on submission

In Magento CE2.4.5 I have added a custom validation to the STREET field. It needs to be validated if the field contains both text and a number as many customers forget to submit their house number:
'validate-housenumber': [
function (value) {
return utils.isEmptyNoTrim(value) || /^[A-Za-z]+[ ]+[0-9]/.test(value);
},
$.mage.__('Please enter a house number')
],
For testing reasons I have added this code in:
Magento/Ui/view/base/web/js/lib/validation/rules.js
And added the validation rule in:
checkout_index_index.xml
<item name="validation" xsi:type="array">
<item name="validate-housenumber" xsi:type="string">true</item>
</item>
However, the validation happens immediately when starting to type anything in the field. I would need either one of these solutions:
(a) Validation message appears after leaving the field (desired)
(b) Validation message appears after clicking the button to the next checkout step (just like it happens with required fields not being filled out)
Any hint would be very welcome. Thank you for your help!
Alex

Finally I found a solution in another Thread. Thanks to Tailtiu:
https://magento.stackexchange.com/questions/278554/trigger-checkout-validation-only-on-change-event
With this solution validation works as expected. However, for testing reasons I applied the validation to company field instead of street field:
<item name="company" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-housenumber" xsi:type="string">true</item
</item>
<item name="config" xsi:type="array">
<item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/inputhousenumbercheck</item></item>
</item>
This works fine. But when applying it to the field street.0 instead of company field there is a problem: in frontend the street field cannot be accessed any more.
Update:
As I learnt the street field cannot be accessed via xml. Instead it had to be done via plugin for:
Magento\Checkout\Block\Checkout\LayoutProcessor

Dispatch change on react-select doesn't work

I've two react-select custom components used in react-redux form. Once I change a select on a select field, I need to clear the value of other select field component. dispatch(change) didn't help on this.
<Field name='towerNo' onChange={this.handleTowerChange} disabled={this.state.isTower} selectedValue={''} label='Tower' component={SearchBox} validate={[]} data={this.state.towers} selectkey={'towerName'} />
<Field name='floorNo' onChange={this.handleFloorChange} disabled={this.state.isFloor} selectedValue={''} label='Floor' component={SearchBox} validate={[]} data={this.state.floors} selectkey={'floorNumber'} />

UI5 Change table cell value acording to an input value

I have a table inside an XML UI5 view. This table contains 3 columns, an input and two NumericContent. The value of the second NumericContent is the sum of the input and the first NumericContent. I expected this value to be updated automatically each time I change the input value, but unfortunately it didn't happen. Is there a solution for this to be done automatically ? Or I have to do this in the controller?
Thanks in advance.
...
<items>
<ColumnListItem counter="0" id="item1">
<cells>
<Input value="{Commitments}"></Input>
<NumericContent id="num1" value="{ResultPercent}"> </NumericContent>
<NumericContent id="num2" value="{= ${Commitments} + ${ResultPercent}}"> </NumericContent>
</cells>
</ColumnListItem>
</items>
...

You have to call
oModel.refresh(true);
This updates your model and refreshes your Control.

You need to have two-way binding activated for this to work. Check you OData/json model's properties.

How to display preselected checkboxes in a Struts2 Iterator

I'm displaying a list as checkboxes. In this some checkboxes should be prechecked based on the database values.
If I use checkboxlist I can achive this, but I'm able to display only one property(listValue) after checkbox. I need to display more than one property after checkbox.
<s:checkboxlist list="myList" name="checkboxes" listKey="id" listValue="name" value="selectedList"/>
here myList has the available checkboxes and selectedList contain the keys that should be precheked
So how to achieve the same functionality with a checkbox in an iterator...?
The code that I have tried to display available checkboxes are...
<s:iterator value="myList" var="record">
<s:checkbox name="id" value="%{#record.id}"/>
<s:property value="#record.name"/>
<s:property value="#record.description"/>
</s:iterator>

Using <s:checkboxlist> tag you can simply concatenate properties in listValue attribute.
<s:checkboxlist list="myList"
name="checkboxes"
listKey="id"
listValue="name +' '+ description"
value="selectedList" />
If you prefer to iterate over list by yourself use list's contains method to set some checkboxes as checked.
Note that value attribute of <s:checkbox> tag is for setting if checkbox will be checked or not. To set value which will be sent to server you need to use fieldValue attribute.
<s:iterator value="records" var="record">
<label>
<s:checkbox name="id"
fieldValue="%{#record.id}"
value="selectedList.contains(#record.id)" />
<s:property value="#record.name" />
<s:property value="#record.description" />
</label>
</s:iterator>
Don't forget about labels, by using them you can check checkboxes by clicking on label text.

Required JSF input component which is hidden by JavaScript is still validated

I have a list of values from ,from the list of values i want to check some values means at that corressponding text box will show in bottom.Otherwise the text box will be hidden.I have done this process using javascript. But my issues is i have to validate using required=true attribute. But the problem is the hidden text box also validated.
Primefaces pages for List values:
<p:selectManyCheckbox onchange="checkValue();" value="#{volunteerBean.knowAbt}" layout="pageDirection" id="s" immediate="true" required="true" requiredMessage="Select how to konws about cv?" style="width:300px;height:170px;">
<f:selectItems value="#{volunteerBean.hearLst}" var="he" itemLabel="#{he}" itemValue="#{he}" />
<p:ajax event="change" update="msg1111" />
</p:selectManyCheckbox>
Input Text Box coding:
<p:inputText style="display:none;" id="searchEngine" value="#{volunteerBean.searchEngine}"><p:watermark for="searchEngine" value="Search Engine"/>
JavaScript for hidden and show inputText through checking the list of checkBox:
function checkValue() {
var chk = document.getElementById("volunteerForm:s:10");
if (chk1.checked) {
document.getElementById('volunteerForm:searchEngine').style.display='';
}else {
document.getElementById('volunteerForm:searchEngine').style.display='none';
}
}
I am using primefaces 3.0 and jsf 2.0. How to solve it

You're changing only the HTML DOM tree and you're not changing the JSF component tree. JSF is not aware at all that the HTML element has been hidden in the client side. You need to show/hide the JSF component instead by its rendered attribute and include its client ID in the <p:ajax update>.
<p:selectManyCheckbox ... value="#{volunteerBean.knowAbt}">
<f:selectItems value="#{volunteerBean.hearLst}" />
<p:ajax event="change" update="msg1111 searchEngine" />
</p:selectManyCheckbox>
<p:inputText id="searchEngine" ... rendered="#{volunteerBean.knowAbt.contains('valueOfItem10')}" />
where valueOfItem10 is the exact value of the item at index 10, like as you tried to check in JS. Note that I assume that knowAbt is a List<String>, exactly as your hearLst suggests (for which I have removed the superfluous var, itemLabel and itemValue from the above example as they are the defaults already). Otherwise you'd need to perform the job in a helper method of the backing bean instead.