【发布时间】:2014-05-12 18:25:03
【问题描述】:
我正在使用验证引擎进行一些测试,我发现消息呈现错误(在页面的角落),所以......当您动态更改类属性时是否可以正确呈现消息jQuery?像重新验证表格? (改变了输入的类属性)
更新:我尝试使用'validate' 操作,但它是同一件事。我在这里使用 3 个表,每个表有 4 个复选框。因此,在下拉列表更改时,我切换表(选择选项时,出现一个表(从输入和 display:none 中删除 disabled)和其他 2 个表(将 disabled 放入输入并将 display:none 放入表)。复选框名称使用 Thymeleaf 预处理表达式呈现,所以我认为可能是这样。我创建了 minCheckbox 的替代版本,它使用 alt 属性而不是名称,但无济于事。效果很好,但错误仍然存在。使表格出现和消失的动作是问题,但我不知道如何解决它。
更新 #2: 好的,我首先为保存按钮设置了这个点击事件:
$('input[name="input_save"]').click(function() {
if(flag == false){
$("#frmUsuarioCrear").validationEngine();
flag = true;
}
if(flag2 == true)
{
$("#frmUsuarioCrear").validationEngine('attach');
flag2 = false;
}
});
$("#frmUsuarioCrear").bind("jqv.form.result", function(event, errorFound) {
if(errorFound)
alert("Hay algunos problemas con sus datos. Revise y vuelva a intentar.");
});
我还为表单设置了绑定。该标志用于仅在分离时重新激活引擎。所以,在下拉列表的 change 事件中:
$('#ddlModulo').change(function(){
var val = this.value;
if(val == "ADQUIRIENTE")
{
$('#modulo_1').find("input").removeAttr("disabled");
$('#modulo_2').find("input").attr("disabled", "disabled");
$('#modulo_3').find("input").attr("disabled", "disabled");
$('#modulo_1').removeAttr("style");
$('#modulo_2').css("display", "none");
$('#modulo_3').css("display", "none");
$("#main tr:nth-child(6)").hide();
$("#main tr:nth-child(6)").find("select").attr("disabled", "disabled");
$("#main tr:nth-child(7)").hide();
$("#main tr:nth-child(7)").find("select").attr("disabled", "disabled");
$('#modulo_1').find("input:first").attr("class", "validate[funcCall[checkHooks]]");
$('#modulo_2').find("input:first").removeAttr("class");
$('#modulo_3').find("input:first").removeAttr("class");
}
else if(val == "COMERCIO")
{
$('#modulo_1').find("input").attr("disabled", "disabled");
$('#modulo_2').find("input").removeAttr("disabled");
$('#modulo_3').find("input").attr("disabled", "disabled");
$('#modulo_1').css("display", "none");
$('#modulo_2').removeAttr("style");
$('#modulo_3').css("display", "none");
$("#main tr:nth-child(6)").show();
$("#main tr:nth-child(6)").find("select").removeAttr("disabled");
$("#main tr:nth-child(7)").hide();
$("#main tr:nth-child(7)").find("select").attr("disabled", "disabled");
$('#modulo_1').find("input:first").removeAttr("class");
$('#modulo_2').find("input:first").attr("class", "validate[funcCall[checkHooks]]");
$('#modulo_3').find("input:first").removeAttr("class");
}
else if(val == "EMISOR")
{
$('#modulo_1').find("input").attr("disabled", "disabled");
$('#modulo_2').find("input").attr("disabled", "disabled");
$('#modulo_3').find("input").removeAttr("disabled");
$('#modulo_1').css("display", "none");
$('#modulo_2').css("display", "none");
$('#modulo_3').removeAttr("style");
$("#main tr:nth-child(6)").hide();
$("#main tr:nth-child(6)").find("select").attr("disabled", "disabled");
$("#main tr:nth-child(7)").show();
$("#main tr:nth-child(7)").find("select").removeAttr("disabled");
$('#modulo_1').find("input:first").removeAttr("class");
$('#modulo_2').find("input:first").removeAttr("class");
$('#modulo_3').find("input:first").attr("class", "validate[funcCall[checkHooks]]");
}
else
{
$('#modulo_1').find("input").attr("disabled", "disabled");
$('#modulo_2').find("input").attr("disabled", "disabled");
$('#modulo_3').find("input").attr("disabled", "disabled");
$('#modulo_1').css("display", "none");
$('#modulo_2').css("display", "none");
$('#modulo_3').css("display", "none");
$("#main tr:nth-child(6)").hide();
$("#main tr:nth-child(6)").find("select").attr("disabled", "disabled");
$("#main tr:nth-child(7)").hide();
$("#main tr:nth-child(7)").find("select").attr("disabled", "disabled");
$('#modulo_1').find("input:first").removeAttr("class");
$('#modulo_2').find("input:first").removeAttr("class");
$('#modulo_3').find("input:first").removeAttr("class");
}
if(flag == true){
$("#frmUsuarioCrear").validationEngine('detach');
flag2 = true;
}
});
我这样做了,但提示没有呈现在它应该呈现的位置。 BTW,在选择下拉目的选项时,我将添加类进行右表的每个第一个输入时的验证。这可确保提示仅出现在第一个复选框中。 (我正在使用一个函数,因为在所选选项上的更改事件从其相应的表中获取所有复选框并查看如果没有返回警报。换句话说,验证引擎的Funccall。
function checkHooks(field, rules, i, options)
{
var val = $('#ddlModulo').val();
if(val == "ADQUIRIENTE")
{
var inputs = $('#modulo_1').find("input[type='checkbox']:checked");
if(inputs.length == 0){
return options.allrules.checkHooks.alertText;
}
}
else if(val == "COMERCIO")
{
var inputs = $('#modulo_2').find("input[type='checkbox']:checked");
if(inputs.length == 0){
return options.allrules.checkHooks.alertText;
}
}
else if(val == "EMISOR")
{
var inputs = $('#modulo_3').find("input[type='checkbox']:checked");
if(inputs.length == 0){
return options.allrules.checkHooks.alertText;
}
}
更新#3:我稍微修改了这段代码。我在提交点击事件中添加了第二个条件,它检查第二个标志。如果为真,它将附加验证引擎。这将是错误的。在下拉列表更改事件中,我根据第一个标志设置了类似的条件,只是它在更改时分离引擎并将第二个标志设置为真(因此它将在提交时进入条件,并重新附加引擎)
【问题讨论】:
标签: jquery jquery-validation-engine