我这次使用Semantic-UI和React。
我过去在其他产品中使用过Semantic-UI的形式和形式验证，而且我从来没有遇到过像我现在要解释的那样的问题。
过去当我使用Semantic-UI的表单验证时，当我将on属性设置为change时，如果存在更改，则字段仅显示内联错误消息那个领域。但是，现在由于某种原因，对字段进行编辑可能会触发所有字段进行验证，并显示所有内联错误（如果这些字段为空或不包含正确的值）。这不太令人愉悦，我宁愿不以这种方式获得表单功能。
可能导致这种情况的原因是什么？ 如何避免这种情况？
我像往常一样设置了我的表单......
以下是一个例子：
$('.ui.form.inputform')
.form({
on: 'change',
inline:true,
fields: {
name: {
identifier: 'name',
rules: [
{
type:'empty',
prompt: 'Name is required'
},
{
type: 'inputName',
prompt: 'Name already taken'
}
]
},
month: {
identifier: 'month',
rules: [
{
type: 'empty',
prompt: 'Month required'
},
{
type: 'isInteger',
prompt: 'Must be a non-decimal number'
},
{
type: 'monthRange',
prompt: 'Must be between 1 to 12'
}
]
},
day: {
identifier: 'day',
rules: [
{
type: 'empty',
prompt: 'Day required'
},
{
type: 'isInteger',
prompt: 'Must be a non-decimal number'
},
{
type: 'dayRange',
prompt: 'Must be between 1 to 31'
}
]
},
year: {
identifier: 'year',
rules: [
{
type: 'empty',
prompt: 'Year required'
},
{
type: 'isInteger',
prompt: 'Must be a non-decimal number'
},
{
type: 'yearRange',
prompt: 'Must be between -3000 to +3000'
}
]
},
hour: {
identifier: 'hour',
rules: [
{
type: 'empty',
prompt: 'Hour required'
},
{
type: 'isInteger',
prompt: 'Must be a non-decimal number'
},
{
type: 'hourRange',
prompt: 'Must be between 0 to 23'
}
]
},
minute: {
identifier: 'minute',
rules: [
{
type: 'empty',
prompt: 'Minutes required'
},
{
type: 'isInteger',
prompt: 'Must be a non-decimal number'
},
{
type: 'minuteRange',
prompt: 'Must be between 0 to 59'
}
]
},
second: {
identifier: 'second',
rules: [
{
type: 'empty',
prompt: 'Seconds required'
},
{
type: 'secondRange',
prompt: 'Must be between 0 to 59'
}
]
},
timezone: {
identifier: 'timezone',
rules: [
{
type: 'empty',
prompt: 'Timezone required'
},
{
type: 'timezoneRange',
prompt: 'Must be between -16.00 to + 16.00'
}
]
},
longitude_degrees: {
identifier: 'longdeg',
rules: [
{
type: 'empty',
prompt: 'Required'
},
{
type: 'isInteger',
prompt: 'Must be a number without decimal places'
},
{
type: 'longitudeRange',
prompt: 'Must be between -180 to +180'
},
]
},
longitude_minutes: {
identifier: 'longmin',
rules: [
{
type: 'empty',
prompt: 'Required'
},
{
type: 'isInteger',
prompt: 'Must be a number without decimal places'
},
{
type: 'minRange',
prompt: 'Must be between 0 to 59'
}
]
},
longitude_seconds: {
identifier: 'longsec',
rules: [
{
type: 'empty',
prompt: 'Required'
},
{
type: 'secRange',
prompt: 'Must be between 0 to any number less than 60'
}
]
},
latitude_degrees: {
identifier: 'latdeg',
rules: [
{
type: 'empty',
prompt: 'Required'
},
{
type: 'isInteger',
prompt: 'Must be a number without decimal places'
},
{
type: 'latitudeRange',
prompt: 'Must be between -90 to +90'
}
]
},
latitude_minutes: {
identifier: 'latmin',
rules: [
{
type: 'empty',
prompt: 'Required'
},
{
type: 'isInteger',
prompt: 'Must be a number without decimal places'
},
{
type: 'minRange',
prompt: 'Must be between 0 to 59'
}
]
},
latitude_seconds: {
identifier: 'latsec',
rules: [
{
type: 'empty',
prompt: 'Required'
},
{
type: 'secRange',
prompt: 'Must be between 0 to any number less than 60'
}
]
},
},
});
答案 0 :(得分：1)
你想要使用＆＃34;模糊＆＃34;事件而不是＆＃34;改变＆＃34;。
我整理了一个快速演示，展示了这一点：
<form>
<div class="field">
<label>Field 1</label>
<input name="empty" type="text" placeholder="My first field...">
</div>
<div class="field">
<label>Field 2</label>
<input name="empty" type="text" placeholder="My second field...">
</div>
<div class="field">
<label>Dropdown</label>
<select class="ui dropdown" name="dropdown">
<option value="">Select</option>
<option value="male">Choice 1</option>
<option value="female">Choice 2</option>
</select>
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" name="checkbox">
<label>Checkbox</label>
</div>
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
</form>
与您的JavaScript比较：
$('form').form({
on: 'blur',
fields: {
empty: {
identifier: 'empty',
rules: [{
type: 'empty',
prompt: 'Please enter a value'
}]
},
dropdown: {
identifier: 'dropdown',
rules: [{
type: 'empty',
prompt: 'Please select a dropdown value'
}]
},
checkbox: {
identifier: 'checkbox',
rules: [{
type: 'checked',
prompt: 'Please check the checkbox'
}]
}
}
});