所有按钮触发表单验证语义 ui
All buttons trigger form validation semantic ui
在我的语义 UI 表单 (<div class="ui form">
) 中,似乎每个按钮都会触发表单验证,即使它不是提交按钮。
下面两种不同的按钮:
<button class="ui blue right labeled icon primary submit button">
<i class="right arrow icon"></i>
Submit
</button>
和
<button class="ui blue button">
Something Else
</button>
这两个都在 semnatic UI 表单元素中。都触发我的验证规则(标准设置规则):
$('.ui.form')
.form({
fields: {
example:: {
identifier: 'example',
rules: [
{
type : 'empty',
prompt : 'Please enter at least one thing'
}
]
}
}
}
)
;
我在网上只能找到 "Solution" 创建这样的按钮:
<input type="button" class="ui blue button">
Test
</input>
但这并没有将文本 ("test") 放入按钮内,也无法使按钮的大小与其他按钮相同。
有没有办法让它不触发我的验证?非常困惑为什么非提交按钮会这样做。
简单定义按钮的类型。默认类型为 submit
:
<Button type="button" />
参考:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
我能够以不同的方式实现这一点,因为按钮类型=按钮控件在忽略验证时没有提交,如果我手动提交,semanticui 的默认事件处理程序将介入并显示验证错误。
我的用例有两个按钮,一个是 save draft,另一个是 finalize(最终保存)。第一个必须按原样保存数据,不触发验证,而另一个将触发验证然后保存。
我还使用我为该项目自定义实现的数据属性来实现所有验证器,因此表单验证器位于 JS 文件中。
在我的表单验证失败方法中,我包含了一个委托函数,我可以在我的页面上设置它,并根据点击它的按钮,然后能够 return 真或假。
我在 JS 文件中的表单验证器
$('.ui.form').form({
inline: true,
on: 'submit',
fields: formFields,
transition: 'fade',
keyboardShortcuts: false,
onFailure: function () {
var returnValue = false; //Default to false, since validations failed
//If the delegate is present, fire it to evaluate
if (typeof window.delegValidate == 'function') {
returnValue = window.delegValidate();
}
//Ignore the toast if the delegate evaluated to TRUE
if (!returnValue) {
$('body')
.toast({
title: 'Unable to save',
message: 'Please enter all required field data before saving.',
classProgress: 'red',
showProgress: 'top',
progressUp: true,
position: 'bottom right',
showIcon: 'red exclamation triangle'
});
}
return returnValue; // false is required if you don't want to let it submit
}
});
并且在我的页面上,我将一个函数附加到 window,因为我的表单验证在 JS 文件中。
页面功能
//For all postback buttons, save the id value in a hidden field for use in the delegate
$('.postbackButton').bind('click', function (e) {
$('#ButtonClicked').val(this.id); // a hidden field on the page
});
//setting the delegate for use in the form validations
window.delegValidate = function () {
//For the save button, just ignore the validations and return true
//This in turn is invoked by the failure method of the form validation that is
//dynamically attached to the page, and hence this return value is respected
//over the false that is otherwise sent back for when we want to interrupt the page
//since there are errors normally.
if ($('#ButtonClicked').val() == 'Save')
return true;
else // if value is finalize, let it return false
return false;
}
对于我不需要此功能的其他页面,我可以简单地不编写委托方法,默认验证会按预期在提交按钮上触发。
希望这对仍在寻找方法的人有所帮助。 :)
在我的语义 UI 表单 (<div class="ui form">
) 中,似乎每个按钮都会触发表单验证,即使它不是提交按钮。
下面两种不同的按钮:
<button class="ui blue right labeled icon primary submit button">
<i class="right arrow icon"></i>
Submit
</button>
和
<button class="ui blue button">
Something Else
</button>
这两个都在 semnatic UI 表单元素中。都触发我的验证规则(标准设置规则):
$('.ui.form')
.form({
fields: {
example:: {
identifier: 'example',
rules: [
{
type : 'empty',
prompt : 'Please enter at least one thing'
}
]
}
}
}
)
;
我在网上只能找到 "Solution" 创建这样的按钮:
<input type="button" class="ui blue button">
Test
</input>
但这并没有将文本 ("test") 放入按钮内,也无法使按钮的大小与其他按钮相同。
有没有办法让它不触发我的验证?非常困惑为什么非提交按钮会这样做。
简单定义按钮的类型。默认类型为 submit
:
<Button type="button" />
参考:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
我能够以不同的方式实现这一点,因为按钮类型=按钮控件在忽略验证时没有提交,如果我手动提交,semanticui 的默认事件处理程序将介入并显示验证错误。
我的用例有两个按钮,一个是 save draft,另一个是 finalize(最终保存)。第一个必须按原样保存数据,不触发验证,而另一个将触发验证然后保存。
我还使用我为该项目自定义实现的数据属性来实现所有验证器,因此表单验证器位于 JS 文件中。
在我的表单验证失败方法中,我包含了一个委托函数,我可以在我的页面上设置它,并根据点击它的按钮,然后能够 return 真或假。
我在 JS 文件中的表单验证器
$('.ui.form').form({
inline: true,
on: 'submit',
fields: formFields,
transition: 'fade',
keyboardShortcuts: false,
onFailure: function () {
var returnValue = false; //Default to false, since validations failed
//If the delegate is present, fire it to evaluate
if (typeof window.delegValidate == 'function') {
returnValue = window.delegValidate();
}
//Ignore the toast if the delegate evaluated to TRUE
if (!returnValue) {
$('body')
.toast({
title: 'Unable to save',
message: 'Please enter all required field data before saving.',
classProgress: 'red',
showProgress: 'top',
progressUp: true,
position: 'bottom right',
showIcon: 'red exclamation triangle'
});
}
return returnValue; // false is required if you don't want to let it submit
}
});
并且在我的页面上,我将一个函数附加到 window,因为我的表单验证在 JS 文件中。
页面功能
//For all postback buttons, save the id value in a hidden field for use in the delegate
$('.postbackButton').bind('click', function (e) {
$('#ButtonClicked').val(this.id); // a hidden field on the page
});
//setting the delegate for use in the form validations
window.delegValidate = function () {
//For the save button, just ignore the validations and return true
//This in turn is invoked by the failure method of the form validation that is
//dynamically attached to the page, and hence this return value is respected
//over the false that is otherwise sent back for when we want to interrupt the page
//since there are errors normally.
if ($('#ButtonClicked').val() == 'Save')
return true;
else // if value is finalize, let it return false
return false;
}
对于我不需要此功能的其他页面,我可以简单地不编写委托方法,默认验证会按预期在提交按钮上触发。
希望这对仍在寻找方法的人有所帮助。 :)