验证不适用于填充有 Ajax 的对话框

Question

我从这里和其他地方尝试了无数建议，但没有任何效果，所以请任何人说明我的代码失败的原因。

Ajax调用创建的html是（选择的内容被隐藏但全部正确关闭）

<div id="adc" class="ui-dialog-content ui-widget-content" style="display: block;   width: auto; min-height: 46px; max-height: none; height: auto;">
You must complete fields marked *.
<br>
<br>
<form id="addcont" ;="" autocomplete="off" name="addcont">
    <fieldset>
        Type of contractor/supplier:
        <select id="otype" name="org_type">
            <div id="orgnm" class="hideonload" style="display: block;">
                * Full name of organisation:
                <input id="full_name" class="required" type="text" size="50" value="" name="full_name">
                <br>
                <span id="flagger"></span>
                <input type="hidden" value="test" name="dbextn">
                <input type="hidden" value="1" name="princip">
                *Business Group:
                <br>
                <select id="bgroup" name="busn_group">
                    <br>
                    <div id="clasdiv" class="hideonload" style="display: block;">
                        * Business Class:
                        <select id="bclass" name="busn_clas">
                        </div>
                        <div id="typediv" class="hideonload" style="display: block;">
                            <br>
                            <div id="locat" class="hideonload" style="display: block;">
                                The location you add MUST be that of the master contact address.
                                <br>
                                <table id="loc-add">
                                    <tbody>
                                        <tr>
                                            <td width="100px">
                                                <strong>Principal address</strong>
                                                :
                                            </td>
                                            <td width="500px">
                                                <select id="loc_type" name="loc_type">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Location name:</td>
                                                <td>
                                                    <input id="locat_name" type="text" placeholder="You must give the location a name" size="40" value="" name="locat_name">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>*Address line1:</td>
                                                <td>
                                                    <input id="address1" class="required" type="text" size="40" value="" name="address1">
                                                    <input type="hidden" value="1" name="status">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Address line2:</td>
                                                <td>
                                                    <input id="address2" type="text" size="40" value="" name="address2">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>*Town :</td>
                                                <td>
                                                    <input id="town" class="required" type="text" size="40" value="" name="town">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>*Postcode:</td>
                                                <td>
                                                    <input id="postcode" class="required" type="text" size="10" value="" name="postcode">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>County:</td>
                                                <td>
                                                    <select name="county">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td> Country:</td>
                                                    <td>
                                                        <select id="country" name="country">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>*Phone no:</td>
                                                        <td>
                                                            <input id="phone" class="required" type="text" size="15" value="" name="phone">
                                                            <br>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <br>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>

我可以从 Firebug 中看到，包括验证器在内的核心库正在被加载。

我的 jquery 脚本是：

$(document).ready(function(){
$('.nextbut').hide();
$(document).on('click','a.addcontr', function (e) {
    e.preventDefault();
    var organid=$('#basinf').attr("parn");
    var usrd =  $('#basinf').attr("pare");
    var dbextn = $('#basinf').attr("dbextn");
    var parf =  $('#basinf').attr("parf");
    var $tag = $("<div id='adc'><img src='images/loading.gif'></div>");
    $.post("ajax/createContractor.php",
    {organid: organid, dbextn: dbextn, parf: parf},
    function(data) {
        $tag.html(data).dialog({autoOpen: false, title: "Adding a contractor",
            width: 540,
            modal: true,
            buttons: {
                "Add Contractor" : function() { $('#addcont').validate({debug: true ,
                    rules:{
                        full_name: "required",
                        locat_name: "required",
                        address1:"required",
                        town:"required",
                        postcode:"required"
                    },
                    messages: {
                        full_name: " Enter name of organisation",
                        locat_name: " Enter location name",
                        address1: " Enter address",
                        town: " Enter town or city",
                    postcode: " Enter postcode"}, 
                    submitHandler:function(){$.post("ajax/insContractor.php",$('#addcont').serialize(),function(data){ 
                        $( '#adc' ).dialog( "close" );});}
                });

                },
                "Cancel": function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {$('#addcont').remove();
                $('#adc').remove();
            }}).dialog('open'); 

    });$('#addcont').validate();
});
});

我尝试过将 validate 调用放在任何地方，包括通过 open:

function(event, ui){$('#addcont').validate();}, just after modal: true,

Answer 1

我看到你给$('#addcont').validate(...) 打了两次电话。您不能多次调用它。

• .validate() 方法仅用于初始化表单上的插件。 .validate() 方法是您放置选项的地方。您不能多次调用它，因此您不能通过再次调用它来添加、覆盖或删除您的选项。后续调用将被忽略。

• 当您调用 .validate() 时，表单的 HTML 必须已经存在。在大多数情况下，它在 DOM 就绪事件处理程序中调用。在动态创建表单的情况下，它会在表单的 HTML 创建后立即调用。

否则，我将依靠您构建一个重现问题的 jsFiddle，以便我们进行检查和排除故障。

1. 触发 ajax 在对话框中创建表单。

2. 在 HTML 完全构造好之后，再调用 .validate() 方法和选项。

再次查看您的代码，您需要完全删除 buttons: 选项中的 .validate() 方法。由于 validate 插件会自动捕获提交按钮，因此您无需执行任何特殊操作。

只需将已删除的.validate() 中的验证规则和选项复制到最后的.validate() 方法中即可。

Answer 2

有很多关于动态创建表单和使用 parent() 和 appendTo() 在 DOM 中移动对话框的建议，但最后我回到plugin page 并决定离开验证声明和触发在对话框按钮内，但以编程方式进行。

我设置了一个带有要检查的表单 id 的变量，然后如果验证成功，则使用 if 语句发送表单。无论它存在于 DOM 中的哪个位置，它都能以某种方式工作，所以一只快乐的兔子。至少我能理解是怎么回事！

$(document).ready(function(){
$(document).on('click','a.addcontr', function (e) {
    e.preventDefault();
    var organid=$('#basinf').attr("parn");
    var usrd =  $('#basinf').attr("pare");
    var dbextn = $('#basinf').attr("dbextn");
    var parf =  $('#basinf').attr("parf");
    var $tag = $("<div id='adc'><img src='images/loading.gif'></div>");
    $.post("ajax/createContractor.php",
    {organid: organid, dbextn: dbextn, parf: parf},
    function(data) {
        $tag.html(data).dialog({
            autoOpen: false, title: "Adding a contractor",
            width: 540,
            modal: true,
            buttons: {
                "Add Contractor" : function() {  
                    var validator=$('#addcont').validate({
                        rules:{
                            full_name: "required",
                            locat_name: "required",
                            address1:"required",
                            town:"required",
                            postcode:"required"
                        },
                        messages: {
                            full_name: " Enter name of organisation",
                            locat_name: " Enter location name",
                            address1: " Enter address",
                            town: " Enter town or city",
                        postcode: " Enter postcode"}
                    });
                    if(validator.form()){$.post("ajax/insContractor.php",$('#addcont').serialize(),function(data){ 
                        $( '#adc' ).dialog( "close" );
                    });}

                },
                "Cancel": function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {$('#addcont').remove();
                $('#adc').remove();
            },
        }).dialog('open');  

    });
});

});