CODEWITHSUNDEEP
twitter-bootstrapjquery-validatebootstrap-modal
Mahadi Siregar
Mahadi Siregar

Reputation: 625

Jquery Validation on Bootstrap Modal Not Working Properly

I want to load url form page (remote) into modal, and it work well. But jquery validation on form loaded just work once. When I loaded the form again, jquery validation not executed except I refresh the page. Why be like that. What wrong on my code.

<script type="text/javascript">
$(document).ready(function(){
     $('[data-toggle="modal"]').click(function() {
        var url = $(this).attr('href').replace(/\s/g,"+");
        if (url.indexOf('#') == 0) {
            $(url).modal('open');
        }else {
            $.get(url, function(data) {
                $(data).modal();
            }).success(function() {
                $('input:text:visible:first').focus();
                $("#frmAddMcb").validate({
                    submitHandler: function(form){
                        $('#modalAddMcb').modal('hide');
                        return postForm(form, "savemcb", "Body", "listmcb", false, false);
                    }
                });
            });
        }
    });
});
</script>
<div class="row-fluid">
<a href="addmcb" data-toggle="modal" class="btn btn-warning btn-xs link_href" title="Add MCB">Add MCB</a>

addmcb return this form

<div id="modalAddMcb" class="modal">
<div class="modal-dialogg">
    <div class="modal-content">
        <div class="modal-header">
            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
            <h4 class="modal-title">Add MCB</h4>
        </div>
        <div class="modal-body">
            <form id="frmAddMcb" enctype="multipart/form-data" class="form-horizontal" novalidate>
                <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label">Name *</label>
                    <div class="col-md-9">
                        <input type="text" name="mcb.name" class="form-control" value='<s:property value="%{mcb.name}"/>' required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label">Image *</label>
                    <div class="col-md-9">
                        <input type="file" name="fileUploaded" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
                    <button class="btn btn-primary" id="submit" type="submit"> Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

Upvotes: 4

Views: 3327

Answers (1)

PhucVD
PhucVD

Reputation: 135

The jquery validation does not work when you load the modal again because your validation code $("#frmAddMcb").validate({..}) in document.ready() event does not run again (because the page already loaded) while you need this to validate your form.

To solve this problem, you can add your validation code to the modal's load event to make sure it runs every time you load the modal:

$('.modal').on('loaded.bs.modal', function (e) {
  // your validation code
})

Upvotes: 1

Related Questions