Ajay Takur
Ajay Takur

Reputation: 6236

$(…) formValidation is not a function on document ready

I'm getting error Uncaught TypeError:$(..) form Validation is not a function the error comes from a line in the JS code below. How can i fix it?? what should i change??? Please share your knowledge...

<!-- js placed at the end of the document so the pages load faster -->  

<script src="assets/js/jquery.js"></script>

<!-- validation plugin jquery -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script class="include" type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/js/jquery.nicescroll.js" type="text/javascript"></script>
<!--common script for all pages-->
<script src="assets/js/common-scripts.js"></script>
<!--script for this page-->
<!-- Include Date Range Picker -->
<!-- https://formden.com/blog/date-picker  -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<!-- Time Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
<script src="//oss.maxcdn.com/bootbox/4.2.0/bootbox.min.js"></script>
<!-- addmoreact.js -->
<script src="assets/js/addmoreact.js"></script>

<script src="assets/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        $('#userForm').formValidation();
        $('#userForm').on( 'success.form.fv', function(e) {
            // You can inform the user that the data is updated successfully
            // by highlighting the row or showing a message box bootbox
            .alert('The Petitioner Details is updated');
        });
        $('#petView .editButton') .on('click', function() {
            // Get the record's ID via attribute
            var cino = $(this).attr('data-id');
            var ptyno = $(this).attr('data-email');
            var ptytype = $(this).attr('data-age');
            /* alert("cino::" + cino + "ptyno::" + ptyno + "ptytype::" + ptytype); */
            $.ajax({
                url : "editpet.jsp?cino=" + cino + "&ptyno=" + ptyno + "&ptytype=" + ptytype,
                method : 'POST'
            }).success(function(response) {
                var res = jQuery.parseJSON(response);
                // Populate the form fields with the data returned from server 
                $('#userForm').find('[name="advocateName"]').val(res.advname)
                .end()
                .find('[name="age"]')
                .val(res.age)
                .end()
                .find('[name="barregistrationnumber"]')
                .val(res.barreg)
                .end()
                .find('[name="mobile"]')
                .val(res.mobile)
                .end()
                .find('[name="name"]')
                .val(res.name)
                .end()
                .find('[name="relname"]')
                .val(res.relname)
                .end()
                .find('[name="email"]')
                .val(res.email)
                .end()
                .find('[name="ptyno"]')
                .val(res.ptyno)
                .end()
                .find('[name="type"]')
                .val(res.ptyType)
                .end()
                .find('[name="cino"]')
                .val(res.cino)
                .end()
                .find('[name="passport"]')
                .val(res.passport)
                .end()
                .find('[name="pan"]')
                .val(res.pan)
                .end()
                .find('[name="fax"]')
                .val(res.fax)
                .end()
                .find('[name="occupation"]')
                .val(res.occupation)
                .end()
                .find('[name="country"]')
                .val(res.country)
                .end()
                .find('[name="nationality"]')
                .val(res.nationality)
                .end()
                .find('[name="phone"]')
                .val(res.phone)
                .end()
                .find('[name="alternateaddress"]')
                .val(res.alternateaddress)
                .end();

                // Show the dialog bootbox
                .dialog({
                    title : 'Edit Petitioner Details',
                    message : $('#userForm'),
                    show : false,
                    onEscape:true
                    // We will show it manually later
                    /* http://stackoverflow.com/questions/29708075/how-to-confirm-a-form-submission-with-bootbox-using-jquery-ajax-and-json?rq=1 */
                }).on('shown.bs.modal', function() {
                     $('#userForm').show()
                     // Show the login form
                     .formValidation( 'resetForm'); // Reset form
                }).on('hide.bs.modal', function(e) {
                     // Bootbox will remove the modal (including the body which contains the login form)
                     // after hiding the modal
                     // Therefor, we need to backup the form
                     $('#userForm').hide()
                     .appendTo('body');
                }).modal('show');

                /* if ($('#userForm #userformpetExtraInfo').is(':checked')) {
                       alert("Extra Pet Infor check");
                       $("#userForm #userformextrapet").show(); 
                   } else {
                       alert("Extra Pet Infor  un check");
                       $("#userForm #uuserformextrapet").hide();
                   }  */

            });//sucess
        });    
</script>

<!-- The form which is used to populate the item data -->                       
<form id="userForm" method="post" class="form-horizontal" action="updatePetitionerView.do" >
    <div class="form-group">
        <label class="col-xs-3 control-label">Advocate Name</label>
        <div class="col-xs-3">
            <input type="text" 
                   class="form-control" 
                   name="advocateName" disabled="disabled" 
                   data-toggle="tooltip" 
                   data-placement="top" 
                   id="advocateName" 
                   title="Enter Advocate Name" 
                   data-fv-notempty="true" 
                   data-fv-notempty-message="The username is required"
                   data-fv-stringlength="true" 
                   data-fv-stringlength-min="6"
                   data-fv-stringlength-max="30"
                   data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"
                   data-fv-regexp="true"
                   data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
                   data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore" />
        </div>
    </div>
</form>

Upvotes: 0

Views: 3883

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074058

Updated answer:

You've said below that you're not actually trying to use http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js (which begs the question of why you've included it), but that you're trying to use http://formvalidation.io/download/ instead. But you've also said you couldn't find a script to include for that second plugin.

The plugin can't just magically add itself to your page. It's a paid plugin. If you have a valid trial license, they would tell you where to download the script you should use. If you're not including any script for the plugin, the plugin isn't going to work on your site.


Original answer on the basis of what was included in the question:

The string "formvalidation" doesn't appear anywhere in http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js. That's clearly just not how you use it.

The briefest glance at the documentation suggests you want .validate(), not .formValidation().

Upvotes: 1

Related Questions