Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Jquery Validation in Partial View Form Isn't Triggering

jquery validation partial view form mvc

This topic has been archived. This means that you cannot reply to this topic.
7 replies to this topic

#1 googaplex

googaplex

    CC Lurker

  • New Member
  • Pip
  • 4 posts

Posted 01 July 2015 - 03:10 PM

I am putting together a contact form inside of a partial view and I've been trying to apply jquery validation to it. However, no matter what I've searched for and tried, it fails to trigger. There are no errors, which makes it substantially harder to resolve. The css applied here is entirely bootstrap. The validation js file is being called before the jquery js file (some people have asked that in other forums).

 

Here's my partial view:

<form id="contact-form" class="container-padding">
    <div class="form-group">
        @Html.LabelFor(model => model.Name, "Full Name", new { @class = "control-label", @for = "name" })
        @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @placeholder = "Name", @size = 40, @class = "form-control", @id = "name", @name = "name", @type = "text" } })
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Email, "Email Address", new { @class = "control-label", @for = "email" })
        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @placeholder = "Email", @size = 40, @class = "form-control", @id = "email", @name = "email", @type = "email" } })
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Subject, "Subject", new { @class = "control-label", @for = "subject" })
        @Html.EditorFor(model => model.Subject, new { htmlAttributes = new { @placeholder = "Subject", @size = 40, @class = "form-control", @id = "subject", @name = "subject", @type = "text" } })
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Message, "Message", new { @class = "control-label", @for = "message" })
        @Html.EditorFor(model => model.Message, new { htmlAttributes = new { @placeholder = "Message", @rows = 10, @class = "form-control", @id = "message", @name = "message", @type = "text" } })
    </div>
    <input type="reset" class="btn btn-lg btn-primary pull-left" value="Clear" />
    <button type="submit" class="btn btn-lg btn-primary pull-right" onclick="">Send</button>
    <img class="ajax-loader" src="~/Content/images/icons/ajax-loader.gif" alt="Sending..." onload="this.width /= 2;" />
</form>

My javascript:

$(document).ready(function () {
//I found this frequently, but made no change whatsoever.
    $('form').removeData('validator');
    $('form').removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse($('form'));
    
    $('#contact-form').validate({
        rules: {
            name: {
                minlength: 2,
                required: true
            },
            email: {
                required: true,
                email: true
            },
            subject: {
                minlength: 2,
                required: true
            },
            message: {
                minlength: 2,
                required: true
            }
        },
        highlight: function (element) {
            alert('highlight');
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        messages: {
            name: {
                required: "Please enter your name",
                minlength: "Name must be at least 2 character long"
            }
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function (error, element) {
            if (element.parent('.form-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        onkeyup: false,
        submitHandler: function (form) {
            alert('it works!');
            return false;
        }
    });
});

I guess my goal in posting this is to get outside eyes to look at it. I'm going to continue looking it over, but I have yet to uncover anything and I'd really like some help at this point.

 

Thanks for taking the time to read this.



#2 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts

Posted 02 July 2015 - 03:56 AM

It looks like an MVC ASP.NET page... but you've only posted part of it, as near as I can tell. My first thought is to question where you're loading jquery, for example.


Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/


#3 lespauled

lespauled

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1360 posts

Posted 02 July 2015 - 08:20 AM

Where did you place the js file declaration?


My Blog: http://forum.codecal...699-blog-77241/
"Women and Music: I'm always amazed by other people's choices." - David Lee Roth

#4 googaplex

googaplex

    CC Lurker

  • New Member
  • Pip
  • 4 posts

Posted 02 July 2015 - 12:47 PM

It looks like an MVC ASP.NET page... but you've only posted part of it, as near as I can tell. My first thought is to question where you're loading jquery, for example.

 

Yes, it is. Sorry, I put this together really late at night.

 

 

The js file is tied into a bundle like so:

bundles.Add(new ScriptBundle("~/Scripts").Include(
                "~/Scripts/basescript.js"));

In which I reference at the end of the shared layout.cshtml file:

<body>
    <header>
        <nav class="navbar">
            <div class="container container-fill">
                <div class="navbar-logo">
                    <img src="#" alt="" style="width:134px; height: 70px;" />
                </div>
                <div class="navbar-list">
                    <ul class="menu-list">
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">Gallery</a>
                        </li>
                        <li>
                            <a href="#">Pricing</a>
                        </li>
                        <li>
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </div>                
            </div>            
        </nav>
    </header>    
    <div class="body-content">                       
        @RenderBody()
    </div>        
        
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/Scripts")
    @RenderSection("scripts", required: false)
</body>

I'm hoping that this is more helpful.



#5 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts

Posted 02 July 2015 - 11:47 PM

The script itself works fine. (tested with http://jsfiddle.net/f87csb3c/), so the javascript code itself is not the issue.

 

You have very very few reasons why it won't work.

Like others said it's either possibly not loaded (but you can just put an alert 1 line before the .validate() to test that)

Or the form ID is wrong, but then again there would be a warning on the console, and you said you have no errors so I assume you've seen the javascript console.

 

Is it possible to share us the page that's generated / is in the browser?


Edited by wim DC, 02 July 2015 - 11:48 PM.


#6 googaplex

googaplex

    CC Lurker

  • New Member
  • Pip
  • 4 posts

Posted 03 July 2015 - 01:52 AM

The example you assembled for me brought the problem to my attention and definitely won a grin. I was looking too hard into it. But, what is actually causing the problem is another issue.

 

The moment that I replaced this line:

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @placeholder = "Name", @size = 40, @class = "form-control", @id = "name", @name = "name", @type = "text" } })

With this:

<input type="text" name="name" placeholder="Name" size="40" class="form-control" id="name" />

It works exactly how I want it to. For some reason, it is not willing to work with what I currently have. Even though they more or less generate the same html. I'll post the generated html (from the inspector) of the input just for available information:

// Original
<input class="form-control text-box single-line GINGER_SOFTWARE_control" id="name" name="Name" placeholder="Name" size="40" type="text" value="" spellcheck="false" ginger_software_editor="true" style="position: relative; font-size: 14px; white-space: pre-wrap; line-height: 20px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlAAAAAUCAYAAABCtAMWAAABEklEQVR4Xu3WoREAAAgDMbr/0szwPuiqHOJ3jgABAgQIECBAIAksrY0JECBAgAABAgROQHkCAgQIECBAgEAUEFARzJwAAQIECBAgIKD8AAECBAgQIEAgCgioCGZOgAABAgQIEBBQfoAAAQIECBAgEAUEVAQzJ0CAAAECBAgIKD9AgAABAgQIEIgCAiqCmRMgQIAAAQIEBJQfIECAAAECBAhEAQEVwcwJECBAgAABAgLKDxAgQIAAAQIEooCAimDmBAgQIECAAAEB5QcIECBAgAABAlFAQEUwcwIECBAgQICAgPIDBAgQIECAAIEoIKAimDkBAgQIECBAQED5AQIECBAgQIBAFBBQEcycAAECBAgQIPBQ3gAVpgUfzwAAAABJRU5ErkJggg==) !important; background-attachment: local !important; background-position: 12px 16px !important; background-repeat: no-repeat !important;">

// With the input manually added
<input type="text" name="name" placeholder="Name" size="40" class="form-control GINGER_SOFTWARE_control" id="name" spellcheck="false" ginger_software_editor="true" style="position: relative; font-size: 14px; white-space: pre-wrap; line-height: 20px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlAAAAAUCAYAAABCtAMWAAABEklEQVR4Xu3WoREAAAgDMbr/0szwPuiqHOJ3jgABAgQIECBAIAksrY0JECBAgAABAgROQHkCAgQIECBAgEAUEFARzJwAAQIECBAgIKD8AAECBAgQIEAgCgioCGZOgAABAgQIEBBQfoAAAQIECBAgEAUEVAQzJ0CAAAECBAgIKD9AgAABAgQIEIgCAiqCmRMgQIAAAQIEBJQfIECAAAECBAhEAQEVwcwJECBAgAABAgLKDxAgQIAAAQIEooCAimDmBAgQIECAAAEB5QcIECBAgAABAlFAQEUwcwIECBAgQICAgPIDBAgQIECAAIEoIKAimDkBAgQIECBAQED5AQIECBAgQIBAFBBQEcycAAECBAgQIPBQ3gAVpgUfzwAAAABJRU5ErkJggg==) !important; background-attachment: local !important; background-position: 12px 16px !important; background-repeat: no-repeat !important;">

Checking for errors or warnings in the console is one of the first things I do when encountering issues, and it surprised me to find that there weren't any and still aren't.

The form ID appears to be correct after testing the above.

 

So it comes down to there being some difference between the two versions of the input that's disallowing the javascript to function properly.

I'll keep looking into it, but I figured I would let you know where I currently stand.



#7 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts

Posted 03 July 2015 - 02:36 AM

name="Name" with a capital N will probably be or become a big deal as it must match the lowercase 'name' from the rules you pass to the validate function.



#8 googaplex

googaplex

    CC Lurker

  • New Member
  • Pip
  • 4 posts

Posted 03 July 2015 - 11:53 AM

You're most definitely right, but it's not me that's capitalizing it. It appears to be capitalizing it when it generates the input.






Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download