jQuery验证不适用于引导方式远程内容

Question

jQuery Validation is not working in bootstrap modal remote content

there are multiple Places from where modal can be initialised to load the content

validation is working fine everywhere else on the page but its not working on the modal when the remote content is loaded in modal which has 1 input

<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>

remote modal content which is loaded

<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>

Validation

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

modal initialize

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

Answer 1

Your validation is not working because form loaded through ajax, When you initialize validate() on your form at that time the form is not present in DOM.

So you need to initialize validate() after your form loaded completely.

To do that you can use loaded.bs.modal event that will be fire after ajax content loaded to modal.

Try like this:

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

I hope it will help you.

Answer 2

I was facing the same problem and this works perfectly fine for me.

Try This: Put an anchor tag anywhere in remote modal <a id="test_id">test_jQuery</a>

Use the below jQuery Code:

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

    alert(" hello"); 
})

Update your jQuery code like this and it will work: I hope it will help you (Y)