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

时间:2014-12-13 06:33:47

标签: jquery ajax dialog jquery-validate

我已经在这里和其他地方尝试了无数的建议,但没有任何作用,所以请任何人都可以了解我的代码失败的原因。

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();
});
});

我已尝试将验证调用放在任何地方,包括通过打开:

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

2 个答案:

答案 0 :(得分:0)

我看到你正在呼叫$('#addcont').validate(...)两次。您无法多次调用它。

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

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

否则,我将依靠你构建一个jsFiddle来重现问题,以便我们有一些东西可以检查和排除故障。

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

  2. 完全构建HTML后,再调用.validate()方法和选项。

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

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

答案 1 :(得分:-1)

有很多关于动态创建表单和使用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');  

    });
});

});