javascript - 使用 JQuery 创建后未检查具有必需 Prop 的输入

Question

我正在处理一个包含“替代地址”的联系表 <div id='alt'>具有可切换的可见性。它包含一个 required <input> field 。起初我遇到了问题，在切换 #alt 之后两次(因此不显示它，因为它在开始时设置为 display:none)，仍会检查必填字段是否有 value ，即使它不应该。发生这种情况是因为我实现了一个 jQuery 函数来替换“填写此字段”字符串，如果 required 会弹出该字符串。字段未填写。

$('.submit').click(function () {
            $('input').filter('[required]:visible').each(function () {
                if ($(this).attr('type') == 'text') {
                    if ($(this).val() == '') {
                        this.setCustomValidity("custom text");
                    } else {
                        this.setCustomValidity("");
                    }
                }
            });
            $('')
        });

由于处理程序应用于元素的方式，我被迫完全删除并重新创建 #alt 的内容切换时的 div。

$('#open_alt').click(function () {
            $(this).hide();            //hide the "show" button
            $('#close_alt').show();    //show the "hide" button
            $("#alt").fadeToggle();    //show the #alt div
            $(this).next().next().html(blockhtml); //re-create the content of the #alt div
            $('#OrderPhoneAlt').prop('required', 'required'); //this probably isnt necessary, but I wanted to make sure that the required input field in question really has the necessary prop
        });
$('#close_alt').click(function () {
            $(this).hide();             //hide the "hide" button
            $('#open_alt').show();      //show the "show" button
            $("#alt").fadeToggle();     //hide the #alt div
            blockhtml = $(this).next().html(); //store the content of the #alt div
            $(this).next().html(''); //empty the #alt div
        });

现在，在切换 #alt 之后div 两次，浏览器不检查我的 required <input>不再，即使它有 required - Prop 。

这显然与重新创建 html 元素有关，但有没有办法解决这个问题？

这个元素是基于 CakePHP 1.3 的，如果那很重要的话，但我不这么认为。

Answer 1

你可以尝试改变

$('#OrderPhoneAlt').prop('required', 'required'); 

到

$('#OrderPhoneAlt').prop('required', true);

如果不起作用，请发布您的 html 输出和 blockhtml 内容