jquery - Bootstrap 4 form validation not working -


i trying implement form validation bootstrap 4 , jquery-validation, can't seem make work.

my form displayed modal dialog 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 have added form validation handler in $(document).ready() follows:

$("#theform").validate({         rules: {             airway: {                 required: true,                 minlength: 8             }         },         messages: {             airway: {                 required: "please enter data",                 minlength: "your data must @ least 8 characters"             }         },         submithandler: function (form) {             alert('submitting!');         }      }); 

symptom: submithandler called validation never happens. made sure reference jquery before jquery.validate , jquery.addtionalmethods. not sure doing wrong...

none of input elements contain name. if want use plugin, element considered validation must contain name attribute , when declaring rules via rules object, name referenced, not id.

see docs:

"mandated: 'name' attribute required input elements needing validation, , plugin not work without this. 'name' attribute must unique form, how plugin keeps track of input elements."


Comments

Popular posts from this blog

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

php - How to remove letter in front of the word laravel -

minify - Minimizing css files -