Javascript jQuery验证在引导模式远程内容中不起作用

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>

模态初始化

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

---

验证不起作用，因为表单是通过ajax加载的，当您在表单上初始化validate（）时，表单在DOM中不存在

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

要做到这一点，您可以使用loaded.bs.modal事件，该事件将在ajax内容加载到modal后触发

像这样尝试：

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

---

我希望它能帮助你。

我也面临同样的问题，这对我来说非常好

尝试以下操作：在远程模式中的任意位置放置锚定标记

test\u jQuery

使用以下jQuery代码：

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

    alert(" hello"); 
})

按如下方式更新jQuery代码，它将正常工作： 我希望它能帮助你（Y）

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

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

    alert(" hello"); 
})