CODEWITHSUNDEEP
jqueryformsvalidation
Jack
Jack

Reputation: 31

jquery form validation lets submitting form even with errors

with jquery validation plugin, if there is error for the first time i submit form then it will not allow the form to submit and show the errors. BUT if i just fix one form element error and leave others still invalid, the form submits to the form action URL.

i want the form NOT TO SUBMIT unless user has fixed all the errors. i tried to return false in submithandler but in vain.

jQuery(function ($) {
    $('#regform').validate({
        rules: {
            fullname: {
                required: true,
                minlength: 2,
                maxlength: 20,
                lettersonly: true
            },
            gender: {
                required: true
            },
            mobile: {
                required: true,
                minlength: 10,
                maxlength: 13,
                digits: true
            },
            address: {
                required: true,
                minlength: 10,
            },
            email: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 6

            }
        },
        messages: {
            fullname: {
                required: "Please enter your full name",
                minlength: "Name should be more than 2 characters",
                maxlength: "Name should be less than 20 characters",
                lettersonly: "Name should contain only letters"
            },
            gender: {
                required: "Please select your gender",
            },
            mobile: {
                required: "Please enter your mobile number",
                minlength: "Mobile number should be more than 10 characters",
                maxlength: "Mobile number should be less than 13 characters",
                digits: "Mobile number should contain only digits"
            },
            address: {
                required: "Please enter your address",
                minlength: "Address should be more than 10 characters",
            },
            email: {
                required: "Please enter your email address",
                email: "Please enter a valid email address"
            },
            password: {
                required: "Please provide a password",
                minlength: "password must be at least 6 characters"
            }
        },
        submitHandler: function(form) {
            var valid = $("regform").valid();
            if(!valid) {
                e.preventDefault();
                alert("stop");
            } else {
                e.preventDefault();
            }

        }
    });
});

Upvotes: 2

Views: 912

Answers (2)

jeffong
jeffong

Reputation: 49

With the similar setup that you have but lesser fields- https://codepen.io/jefftimbre/pen/xWjQrX?editors=1010

The lettersonly method might have been removed or deprecated. Add the following to your code and it should work. Let me know. 

$.validator.addMethod( "lettersonly", function( value, element ) {
    return this.optional( element ) || /^[a-z]+$/i.test( value );
}, "Letters only please" );

Upvotes: 1

jeffong
jeffong

Reputation: 49

Did you try, in submithandler, modify var valid = $("regform").valid(); to
var valid = $("#regform").valid(); ?

Let me know how it goes after the modification. I can help you look further into the issue.

Upvotes: 0

Related Questions