CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcvalidation
Jack
Jack

Reputation: 1

jQuery Validate() and Valid() methods undefined or do not work

I use jQuery validation in my MVC4 project with the necessary javascript files (jquery-1.9.1.js, jquery.validate.min.js and jquery.validate.unobtrusive.min.js) and configuration. What I want to do is to validate the form before submitting it. If the form is valid, a method will be called and then it will be submitted. If not, it will not be submitted and simply an alert will be displayed. I have followed the steps on Call JQuery Validate Plugin without submitting the form and lots of similar topics especially on the jQuery offical pages. But somehow, when executing the Validate() and Valid() method I encountered errors like undefined. I think the problem is related to Validate() method. I have tried different kind of jquery-1.x.x.js files, but the result is the same. How can I validate the form by using a similar method to the method below? Or anything else?

script type="text/javascript">
$(function () {
        $("#submitbtn").click(function () {
            var form = $("#myForm");
            form.validate();
            var isValid = form.valid();

            if (isValid) { //If there is no validation error
                alert('form is valid - not submitted');
            } 
            else {
                alert('form is not valid');                               
        }
    });
});

Upvotes: 3

Views: 23022

Answers (3)

Chris Wu
Chris Wu

Reputation: 57

What is the exact error message you got? Maybe you are not referencing jquery properly. Try do a simple jquery call like alert($("#myInput").val());

Upvotes: 0

Jack
Jack

Reputation: 1

Thanks a lot all of you. Finally I have managed to combine validation methods with the spinner example posted on: http://blog.tkglaser.net/2012/02/waiting-spinner-for-long-running-form.html

View: 

<style type="text/css">
#loading {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.8);
    z-index: 1000;
}

#loadingcontent {
    display: table;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#loadingspinner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    text-align: center;
    font-size: larger;
    padding-top: 80px;
}
</style>


$(function () {        
    //Waiting spinner for long-running form submits using jQuery
    $("#submitbtn").click(function () {

        var form = $("#addForm");
        form.validate();

        if (form.valid()) {
            $("#loading").fadeIn();
            var opts = {
                lines: 12, // The number of lines to draw
                length: 7, // The length of each line
                width: 4, // The line thickness
                radius: 10, // The radius of the inner circle
                color: '#000', // #rgb or #rrggbb
                speed: 1, // Rounds per second
                trail: 60, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false // Whether to use hardware acceleration
            };
            var target = document.getElementById('loading');
            var spinner = new Spinner(opts).spin(target);
        }
    });
});


<div id="loading">
    <div id="loadingcontent">
        <p id="loadingspinner">
            Waiting...
        </p>
    </div>
</div>

Upvotes: 0

Wibble
Wibble

Reputation: 82

I found the code was working perfectly fine however the ID of the element was not "myForm", have you tried ensuring that the ClientID attribute of the form is used rather than the ID?

$(function () {
    $("#submitbtn").click(function () {
        var form = $('#<%# myForm.ClientID %>');
        form.validate();
        var isValid = form.valid();
        if (isValid) { //If there is no validation error
            alert('form is valid - not submitted');
        } 
        else {
            alert('form is not valid');                               
        }
    });
});

I believe $("#myForm") wasn't returning the element as you would have expected (e.g. it was returning null or undefined as myForm didn't exist) hence form.validate() wouldn't exist.

Upvotes: 3

Related Questions