JQuery Validation on Bootstrap Accordion MVC

Question

As described in my heading, I am having a problem with the Validation on Fields that are in my Collapsed Accordion sections. I have found MANY questions around this, but none work for me, or I am not quite understanding how it all works, so even though this is to be viewed as a duplicate question, it is not as none of the others have helped.

I have 4 sections :

So when I click the create then the Project Name Specifies that it is missing, however NOT for any of the collapsed sections.

I have tried :

$('#ticketForm').validate().settings.ignore = []

Which does not work. When I click create, then its as if the screen is doing a postback and anything I typed in is removed and returns to the first accordion section.

I have tried plenty other scripts that make no sense to me :( that others have said works, but I either get an error on a section that "does not exist", such as :

$(document).ready(function() {
$("#accordion").accordion({
autoHeight: false,
navigation: true,
});    

$("#ticketForm").validate({
rules: {
    page_title: "required",
    seo_url: "required",
    AccordionField: {
        required: true
    }
},
ignore: [],
messages: {
    page_title: "Please enter a page title",
    seo_url: "Please enter a valid name"
}
 }); 
});

The error I get is that .accordion does not exist - or it does the same as I mentioned(Page does what looks like a postback etc etc.)

I have tried this as well, which give no error, but it doesnt work :

   $(document).ready(function () {
            $('#ticketForm').validate({
                ignore: ":hidden"
            });
        });

I have tried placing <form id="ticketForm"> before and after my @using (Html.BeginForm()), thinking it might makea difference, but has no effect.

Please could someone help.

Thank you!

I dont know how. So you down voted because I didnt create a fiddle ? I gave more than enough information to show you what I want and what ive tried. If you have no idea what im talking about, say so and explain what you are confused about. Dont down vote and provide a one liner reply! — AxleWack, Jun 24 '16 at 08:39
see @AxleWack i m not down voted if you dint give full explanation or proper may be some one did — Gayathri Mohan, Jun 24 '16 at 08:43
Ok thanks for the help. If any one else is able to actually help, I would greatly appreciate it, thanks. — AxleWack, Jun 24 '16 at 08:45

score 0 · Accepted Answer · edited May 23 '17 at 12:24

Once again, found the solution myself!

I only added the following in my View where the Accordion was :

@section scripts
{
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jquery.validate.unobtrusive.js")" type="text/javascript"></script>

    <script>
        $(document).ready(function () {
            $.validator.setDefaults({ ignore: '' });
        });

    @Scripts.Render("~/bundles/jqueryval")
}

The jquery.validate.unobtrusive.js and validate.js I got from the NuGet Package Solutions.

The link where I got the solution from was from Here

JQuery Validation on Bootstrap Accordion MVC

1 Answers1