jQuery驗證不適用於引導方式遠程內容

Question

jQuery驗證不適用於引導方式遠程內容

有多個可以初始化模態以加載內容的地方

驗證在頁面上的其他任何地方都可以正常工作，但是當遠程內容以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（）。

為此，您可以使用load.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）