jQuery validation not working when input fields are empty

Question

I think this is not complex one but I can't do it by myself. I am very thankful for your help.

I am going to submit a form with validation. It seems like my validations are not working properly. Because when the input fields are empty it's not showing an error message. And also when clicking the submit button it's not showing error message. This incident only happens when input fields are empty.

Here is my HTML:

<form name="department" id="department">
    <div class="form-group">
        <label for="example-text-input">Department Name</label>
        <span id="errfnCustomer"></span>
        <input class="form-control" type="text" placeholder="Enter Department Name" id="textDepartmentName" name="textDepartmentName1">
    </div>
    <div class="form-group">
        <label for="example-text-input">Registation Number</label>
        <span id="errfnCustomer2"></span>
        <input class="form-control" type="text" placeholder="Enter Department Registation Number" id="textRegistationNumber" name="textRegistationNumber">
    </div>
    <div class="form-group">
        <label for="example-text-input">Web Site</label>
        <input class="form-control" type="text" placeholder="Web Site" id="textWebsite" name="textWebsite1">
    </div>
    <div class="form-actions">
        <div class="form-group">
            <input type="button" value="Register" class="btn pull-right" id="btnsubmit" style="background-color:#1e90ff; width: 100px; color: white; font-weight: bold" />
        </div>
    </div>
</div>

And jQuery:

$('#department').validate({
    rules: {
        textDepartmentName1: {
            required: true,
            minlength: 3,
        },
        textRegistationNumber: {
            required: true,
            minlength: 3
        },
        textWebsite1: {
            required: true,
            minlength: 3
        }

    },
    submitHandler: $("#btnsubmit").click(function (form) {
        var submitData = {
            DepartmentId: saveStat,
            DepartmentName: $('#textDepartmentName').val().trim(),
            RegistationNumber: $('#textRegistationNumber').val(),
            Website: $('#textWebsite').val(),
            Email: $('#textEmail').val(),
            Telephone01: $('#textTelephone01').val(),
            Telephone02: $('#textTelephone02').val(),
            Fax: $('#textFax').val(),
            BranchId: $('#cmbGetBranch').val()
        }

        if (saveStat == 0) {
            $.ajax({
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                cache: false,
                async: false,
                type: 'POST',
                data: "{submitData:" + JSON.stringify(submitData) + "}",
                url: "/Department/AddDepartment",
                success: function (saveDepartment) {
                    if (saveDepartment.saveDepartment.DepartmentId != 0) {
                        refresh();
                        alert(saveDepartment.saveDepartment.DepartmentName + " Saved succesfully...!!!");
                    } else {
                        alert('warning' + " Department saving unsucsessful...!!!");

                    }
                },
                error: function (xhr, errorThrown) {
                    alert('Error...!!! Internal - 01');
                }

            });
        } else {
            $.ajax({
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                cache: false,
                async: false,
                type: 'POST',
                data: "{submitData:" + JSON.stringify(submitData) + "}",
                url: "/Department/UpdateDepartment",
                success: function (updateDepartment) {
                    if (updateDepartment.updateDepartment.DepartmentId != "") {
                        alert(updateDepartment.updateDepartment.DepartmentName + " updated succesfully...!!!");
                        refresh();
                    } else {
                        alert("Department update error...!!!");
                    }
                },
                error: function (xhr, errorThrown) {
                    alert('Error...!!!');
                }
            });
        }
        grid();
    })
});

Like <input class="form-control" type="text" placeholder="Enter Department Name" id="textDepartmentName" name="textDepartmentName1" required> — Shah Abaz Khan
– Shah Abaz Khan, Commented Feb 8, 2017 at 5:14
I think issue is with your submitHandler. You dont need selector there. Simply "submitHandler: function(form){}" . See documentation here jqueryvalidation.org/validate/#submithandler — MKumar
– MKumar, Commented Feb 8, 2017 at 5:16
the problem was occur when there button type not submit. i got another help to find it. and thank you helping me you too — thilina.gg
– thilina.gg, Commented Feb 8, 2017 at 5:22

Manohar Khadka · Accepted Answer · 2017-02-08 05:18:08Z

1

First of all make register buttom type submit:

 <input type="submit" value="Register" class="btn pull-right" id="btnsubmit" style="background-color:#1e90ff; width: 100px; color: white; font-weight: bold" />

And make submit handler something like this:

submitHandler:function (form) {

}

See more here (Jquery validation).

edited Feb 8, 2017 at 5:18

answered Feb 8, 2017 at 5:14

Manohar Khadka

2,1952 gold badges20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Gags Over a year ago

This is not an answer... This should be a comment

Manohar Khadka Over a year ago

This is a answer. I am just updating this.

thilina.gg Over a year ago

Thanks. when i change the button type to submit it's workig. and thanks again

Manohar Khadka Over a year ago

Welcome mate..Even though it's working with changing button type, you need to change submiHadler as well.

thilina.gg Over a year ago

Thanks mate. I changed also submiHadler it's working great. But i thought Submit button id should there. that's why in used click event. if you can explain how it work without click event

|

Collectives™ on Stack Overflow

jQuery validation not working when input fields are empty

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related