Question

jQuery Validation在引导模式远程内容中不起作用

有多个地方可以初始化模态以加载内容

验证在页面上的其他任何位置都正常工作，但是当远程内容加载到具有1个输入的模态时，它无法处理模态

<a href="javascript:void(0);" class="btn btn-circle btn-icon-only btn-default" title="Edit" onclick="user_editer('<?php echo $user['user_code']; ?>')">
                <i class="icon-pencil"></i>
                </a> 
 <div class="modal fade" id="ajax" class="edit_user_modalss"role="basic"aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="../../theme/assets/global/img/loading-spinner-grey.gif" alt=""     class="loading">
<span>
&nbsp;&nbsp;Loading... </span>
</div>
</div>
</div>
</div>

加载的远程模态内容

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">      </button>
 <h4 class="modal-title">Edit User</h4>
</div>
<div class="modal-body">
<form id="edit_user_form" class="edit_user_form" action="index.php"   method="post">  
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12"  style="background:;margin-top:0px">

            <div class="col-md-6 col-sm-12 col-xs-12" style="background:;margin-top:0px">

                <div class="form-group">
                <label for="phone">Name</label>
                <input type="phone" name="user_name" class="form-control"   id="user_name"   placeholder="Enter Name" required maxlength="30" >
                </div>
                    </div>  
            </div>
            </div>

<input  type="submit"  id="edit_user_submit"name="edit_user_submit" class="btn blue" value="Save changes">  
            </form>
    </div>

验证

         var form2 = $('#edit_user_form');
                    var error2 = $('.alert-danger', form2);
                    var success2 = $('.alert-success', form2);

                    form2.validate({
                        errorElement: 'span', //default input error message container
                        errorClass: 'help-block help-block-error', // default input error message class
                        focusInvalid: false, // do not focus the last invalid input
                        ignore: "",  // validate all fields including form hidden input
                        rules: {
                            user_name: {
                               required: true,
                                minlength:2,
                                maxlength:30
                            }
                        },

                        messages: {
                        user_name: {
                        required: 'Email address is required',
                        minlength: 'Please enter a valid email address',
                        maxlength: 'This email address has already been used'
                        },
                        user_desig:"Select Authority",
                        },
                        invalidHandler: function (event, validator) { //display error alert on form submit              
                            success2.hide();
                            error2.show();
                            Metronic.scrollTo(error1, -200);
                        },

                        highlight: function (element) { // hightlight error inputs
                            $(element)
                                .closest('.form-group').addClass('has-error'); // set error class to the control group
                        },

                        unhighlight: function (element) { // revert the change done by hightlight
                            $(element)
                                .closest('.form-group').removeClass('has-error'); // set error class to the control group
                        },

                        success: function (label) {
                            label
                                .closest('.form-group').removeClass('has-error'); // set success class to the control group
                        },


                        submitHandler: function (form) {
                            success2.show();
                            error2.hide();
                            form.submit();
                        }
                    });

模态初始化

function user_editer(user_code){
$('#ajax').modal({
    show: true,
    remote: 'user_edit_modal.php?user_code='+user_code
     });}

Answer 1

您的验证无效，因为通过ajax加载表单，当您在表单上初始化validate（）时，表单不存在于DOM中。

因此，您需要在完全加载表单后初始化validate（）。

为此，您可以使用 loaded.bs.modal 事件，该事件将在ajax内容加载到模态后触发。

试试这样：

$('#ajax').on('loaded.bs.modal', function (e) {

  // initilize validate() here 
var form2 = $('#edit_user_form');
var error2 = $('.alert-danger', form2);
var success2 = $('.alert-success', form2);

form2.validate({
    errorElement: 'span', //default input error message container
    errorClass: 'help-block help-block-error', // default input error message class
    focusInvalid: false, // do not focus the last invalid input
    ignore: "", // validate all fields including form hidden input
    rules: {
        user_name: {
            required: true,
            minlength: 2,
            maxlength: 30
        }
    },
    messages: {
        user_name: {
            required: 'Email address is required',
            minlength: 'Please enter a valid email address',
            maxlength: 'This email address has already been used'
        },
        user_desig: "Select Authority",
    },
    invalidHandler: function (event, validator) { //display error alert on form submit              
        success2.hide();
        error2.show();
        Metronic.scrollTo(error1, -200);
    },
    highlight: function (element) { // hightlight error inputs
        $(element).closest('.form-group').addClass('has-error'); // set error class to the control group
    },
    unhighlight: function (element) { // revert the change done by hightlight
        $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
    },
    success: function (label) {
        label.closest('.form-group').removeClass('has-error'); // set success class to the control group
    },
    submitHandler: function (form) {
        success2.show();
        error2.hide();
        form.submit();
    }
});
});

我希望它会对你有所帮助。

Answer 2

我遇到了同样的问题，这对我来说非常好。

尝试此操作：将锚标记放在远程模态<a id="test_id">test_jQuery</a>

中的任意位置

使用以下jQuery代码：

$('body').on('click', '#test_id', function() { 

    alert(" hello"); 
})

像这样更新你的jQuery代码，它会工作：我希望它能帮到你（Y）

jQuery验证在引导模式远程内容

2 个答案: