为什么 AUI 的 Dropdown 在文本字段验证之前需要验证火拳
why AUI's Dropdown required validation fire fist before textfield's validation
我通过将 AUI taglib 与一些文本字段和下拉列表一起使用,在 liferay 上实现了。两者都需要验证。代码如下:
<aui:form name="projectInformationForm" action="${projectInformation}" method="post">
<aui:fieldset label="company.details">
<aui:layout>
<aui:column columnWidth="50">
<aui:input type="text" name="nameOfTheProject"
label="name.of.the.project" inlineLabel="true">
<aui:validator name="required"></aui:validator>
</aui:input>
<aui:input type="text" name="investmentCost" label="investment.cost"
inlineLabel="true">
<aui:validator name="required"></aui:validator>
<aui:validator name="number"></aui:validator>
</aui:input>
<aui:select name="typeOfIndustry" label="type.of.industry"
inlineLabel="true" required="">
<aui:option label="selection.defult" value="" selected="true"></aui:option>
</aui:select>
<aui:input type="text" name="expectedDateOfStart" label="expected.date.of.start"
inlineLabel="true" cssClass="date-picker" >
<aui:validator name="required"></aui:validator>
<aui:validator name="date"></aui:validator>
</aui:input>
<aui:input type="text" name="expectedDateOfCommissioning"
label="expected.date.of.commissioning" inlineLabel="true"
cssClass="date-picker" >
<aui:validator name="required"></aui:validator>
<aui:validator name="date"></aui:validator>
</aui:input>
</aui:column>
</aui:layout>
</aui:fieldset>
<aui:button-row>
<aui:button type="button" value="back.text" first="true" onClick="location.href='${showGeneralInformation}'" />
<aui:button type="submit" value="save.as.draft" onClick="saveNext(this)" />
<aui:button type="cancel" value="cancel.text" />
<aui:button type="submit" value="next.text" onClick="saveNext(this)" last="true" />
</aui:button-row>
<aui:script>
function saveNext(button){
var element = document.getElementById("<portlet:namespace/>buttonNameId");
element.value = button.value;
}
</aui:script>
</aui:form>
当我提交第一个 select 字段所需的验证是 运行 并在我 select 下拉值后显示错误消息然后重新提交然后再次显示文本字段验证消息。
但我希望它按照表格中的顺序显示所需的消息。
我做错了什么?
谢谢
桑吉特·杰哈
我认为最好的方法是使用 <aui:validator name="custom">
例如,对于必填字段,使用以下代码片段:
<aui:validator name="custom" errorMessage="field.required">
function (val, fieldNode, ruleValue) {
if(val.length > 0) {
return true;
} else {
return false;
}
}
</aui:validator>
因此,您可以为每个自定义验证器类型使用此自定义验证器:minLength、maxlength、alpha(使用正则表达式)等...
我通过将 AUI taglib 与一些文本字段和下拉列表一起使用,在 liferay 上实现了。两者都需要验证。代码如下:
<aui:form name="projectInformationForm" action="${projectInformation}" method="post">
<aui:fieldset label="company.details">
<aui:layout>
<aui:column columnWidth="50">
<aui:input type="text" name="nameOfTheProject"
label="name.of.the.project" inlineLabel="true">
<aui:validator name="required"></aui:validator>
</aui:input>
<aui:input type="text" name="investmentCost" label="investment.cost"
inlineLabel="true">
<aui:validator name="required"></aui:validator>
<aui:validator name="number"></aui:validator>
</aui:input>
<aui:select name="typeOfIndustry" label="type.of.industry"
inlineLabel="true" required="">
<aui:option label="selection.defult" value="" selected="true"></aui:option>
</aui:select>
<aui:input type="text" name="expectedDateOfStart" label="expected.date.of.start"
inlineLabel="true" cssClass="date-picker" >
<aui:validator name="required"></aui:validator>
<aui:validator name="date"></aui:validator>
</aui:input>
<aui:input type="text" name="expectedDateOfCommissioning"
label="expected.date.of.commissioning" inlineLabel="true"
cssClass="date-picker" >
<aui:validator name="required"></aui:validator>
<aui:validator name="date"></aui:validator>
</aui:input>
</aui:column>
</aui:layout>
</aui:fieldset>
<aui:button-row>
<aui:button type="button" value="back.text" first="true" onClick="location.href='${showGeneralInformation}'" />
<aui:button type="submit" value="save.as.draft" onClick="saveNext(this)" />
<aui:button type="cancel" value="cancel.text" />
<aui:button type="submit" value="next.text" onClick="saveNext(this)" last="true" />
</aui:button-row>
<aui:script>
function saveNext(button){
var element = document.getElementById("<portlet:namespace/>buttonNameId");
element.value = button.value;
}
</aui:script>
</aui:form>
当我提交第一个 select 字段所需的验证是 运行 并在我 select 下拉值后显示错误消息然后重新提交然后再次显示文本字段验证消息。
但我希望它按照表格中的顺序显示所需的消息。
我做错了什么?
谢谢 桑吉特·杰哈
我认为最好的方法是使用 <aui:validator name="custom">
例如,对于必填字段,使用以下代码片段:
<aui:validator name="custom" errorMessage="field.required">
function (val, fieldNode, ruleValue) {
if(val.length > 0) {
return true;
} else {
return false;
}
}
</aui:validator>
因此,您可以为每个自定义验证器类型使用此自定义验证器:minLength、maxlength、alpha(使用正则表达式)等...