jquery validation form hide show not working

Question

I am validating form using the jQuery Validate plugin, but everytime I submit form, the page is redirected to the action page. I am not only validating form but also trying to submit form using ajax after knowing the form is error free.

Here is the javascript file I used for custom JS coding.

<script type="text/javascript">
    $(document).ready(function(){

        $("#add-teachers").click(function () {
            $("#teachers-lists").hide();
            $("#teachers-forms").fadeIn();
        });

        $("#save-teachers").click(function () {
            $("#teachers-forms").hide();
            $("#teachers-lists").fadeIn();
        });

        $( "#teachers-forms" ).validate({
            ignore: 'hidden',
            rules: {
                name: "required",
                profession: "required",
                teacher_type: "required",
                extended_date: "required",
                validity_duration: "required",
            },
            messages: {
                name: "Please enter it."
                profession: "Please enter it."
                teacher_type: "Please select it."
                extended_date: "Please enter it."
                validity_duration: "Please select it."
            }
        });
    });
</script>

Here is the html form code

<form id="teachers-forms" method="post">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label class="col-md-3" for="name">First & Last name</label>
                <div class="col-md-9">
                    <input type="text" id="name" name="name" class="form-control col-md-12">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3" for="profession">Profession</label>
                <div class="col-md-9">
                    <input type="text" id="profession" name="profession" class="form-control col-md-12">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3" for="issue_date">Issue Date</label>
                <div class="col-md-9">
                    <input type="text" id="issue_date" name="issue_date" class="form-control col-md-12">
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label class="col-md-3" for="teachertype-check-label">Teacher Type</label>
                <div class="col-md-9">
                    <div class="radio">
                        <label>
                            <input type="radio" name="teacher_type" id="teacher_type" value="0">Always
                        </label>
                        <label>
                            <input type="radio" name="teacher_type" id="teacher_type" value="1">Temporary
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3" for="extended_date">Extended Date</label>
                <div class="col-md-9">
                    <input type="text" id="extended_date" name="extended_date" class="form-control col-md-12">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-3" for="validity_duration_label">Validity Duration</label>
                <div class="col-md-9">
                    <div class="radio">
                        <label>
                            <input type="radio" name="validity_duration" id="validity_duration" value="1">1 years
                        </label>
                        <label>
                            <input type="radio" name="validity_duration" id="validity_duration" value="2">2 years
                        </label>
                        <label>
                            <input type="radio" name="validity_duration" id="validity_duration" value="3">3 years
                        </label>
                        <label>
                            <input type="radio" name="validity_duration" id="validity_duration" value="4">4 years
                        </label>
                        <label>
                            <input type="radio" name="validity_duration" id="validity_duration" value="5">5 years
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <button id="save-teachers" type="submit" class="btn btn-success pull-left col-md-4 btn-lg">
            <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> SAVE
        </button>
    </div>
</form>

<div id="teachers-lists">
    <div class="row">
        <button id="add-teachers" type="button" class="btn btn-success pull-left col-md-4 btn-lg">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add new teacher
        </button>
    </div>
    <div class="row">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>First & Last name</th>
                    <th>Profession</th>
                    <th>Issue Date</th>
                    <th>Teacher Type</th>
                    <th>Extended Date</th>
                    <th>Validity Duration</th>
                    <th>The Operators</th>
                </tr>
                </thead>
                <tbody id="data_teachers">

                </tbody>
            </table>
        </div>
    </div>
</div>

score 0 · Accepted Answer · answered Aug 23 '18 at 07:31

0

You will have to prevent default browser behaviour (submitting server-side) on clicking the submit button like

$("#save-teachers").click(function (event) {
    event.preventDefault();
    $("#teachers-forms").hide();
    $("#teachers-lists").fadeIn();
});

or

$("#teachers-forms").submit(function (event) {
    event.preventDefault();
});

You can see Prevent Default on Form Submit jQuery and event.preventDefault() vs. return false for more details.

answered Aug 23 '18 at 07:31

Gabriel Bîra

111
8

Thanks for answer. My problem is not solved yet. I want to when click save (If the Textboxes blank. not display tables only display form). What should I do? – Aug 23 '18 at 07:47
No. It's hidden forever – Aug 23 '18 at 08:00
It is, but then, when you know you have teachers to display you can do `$('#teachers-list').css('display', 'block')` and that should unhide it. You can also take a look [here](https://stackoverflow.com/questions/20541618/jquery-hide-show-if-conditional-statement) – Gabriel Bîra Aug 23 '18 at 08:02

score 0 · Answer 2 · answered Aug 23 '18 at 07:35

You are using the wrong id in your validate.

Your form is : teachers-forms And you applicate validate to : $( "#communicated-teachers-forms" )

Just write :

 $( "#teachers-forms" ).validate.validate({
            ignore: 'hidden',
            rules: {
                name: "required",
                profession: "required",
                teacher_type: "required",
                extended_date: "required",
                validity_duration: "required",
            },
            messages: {
                name: "Please enter it."
                profession: "Please enter it."
                teacher_type: "Please select it."
                extended_date: "Please enter it."
                validity_duration: "Please select it."
            }
        });

jquery validation form hide show not working

2 Answers2