jQuery Validation not working in Bootstrap 4

Question

I am trying to implement form validation with Bootstrap 4 and JQuery-validation, but can't seem to make it work.

My form is displayed as a Modal dialog as shown next:

<div class="modal fade" id="insertWaypointModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Insert Unofficial Waypoint</h4>
                    </div>
                    <form id="theForm">
                        <div class="modal-body">
                            <div>
                                <div style="margin-left:23.5%">Latitude</div>
                            </div>
                            <div id="inputs">
                                <input type="text" placeholder="Name" id="name" style="margin-right:10px;width:10%"></input>
                                <input type="text" placeholder="Air way" id="airway" style="margin-right:10px;width:10%"></input>
                                <input type="text" placeholder="Latitude" id="latitude" style="margin-right:10px;width:10%"></input>
                                <input type="text" placeholder="Longitude" id="longitude" style="margin-right:10px;width:10%"></input>
                                <label for="border">Border</label>
                                <input type="radio" id="border" style="margin-right:5px" />
                                <label for="int">International</label>
                                <input type="radio" id="int" style="margin-right:5px" />
                                <input type="text" placeholder="Code" id="countryCode"></label>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary" id="modalSave">Save changes</button>
                        </div>
                    </form>
                </div>

                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

And I have added the form validation handler in my $(document).ready() as follows:

$("#theForm").validate({
        rules: {
            airway: {
                required: true,
                minlength: 8
            }
        },
        messages: {
            airway: {
                required: "Please enter some data",
                minlength: "Your data must be at least 8 characters"
            }
        },
        submitHandler: function (form) {
            alert('submitting!');
        }

    });

Symptom: the submitHandler is always called always but validation never happens. Made sure reference jquery before jquery.validate and jquery.addtionalmethods. Not sure what I am doing wrong...

Answer 1

None of your input elements contain a name. If you want to use this plugin, any element considered for validation must contain a name attribute and when declaring rules via the rules object, this name is referenced, not the id.

See the docs:

"Mandated: A 'name' attribute is required for all input elements needing validation, and the plugin will not work without this. A 'name' attribute must also be unique to the form, as this is how the plugin keeps track of all input elements."