jquery validate prevent form from submitting

Question

I am not sure why this form is submitting. I have copied the code from other examples and replaced it with my content, but it keeps submitting the form even though i have put in return false

Also when ports ICMP is selected it, it does not validate the other rules and submits the form.

 $("form[name='frmAddCMRow']").validate({ /* showErrors: function(errorMap, errorList) { $.each(this.successList, function(index, value) { $(value).popover('hide'); }); $.each(errorList, function(index, value) { var _popover = $(value.element).popover({ trigger: 'manual', placement: 'top', content: value.message, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"></div></div></div>' }); _popover.data('bs.popover').options.content = value.message; $(value.element).popover('show'); }); }, */ submitHandler: function() { var formdata = $('form').serialize(); console.log(formdata); return false; }, rules: { src: { required: true, messages: { required: "Please enter Source IP", } }, dst: { required: true, messages: { required: "Please enter Destination IP", } }, ports: { required: function() { return $("form[name='frmAddCMRow'] select[name='protocol']").val() != "ICMP"; }, messages: { required: "Please enter Ports", } }, }, }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> <form id="frm_rename_commsmatrix" name="frm_rename_commsmatrix" method="post" action=""> <input id="comms_matrix_id" type="hidden" name="comms_matrix_id" value="204"> <input type="hidden" name="service_id" id="service_id" value="3"> <div id="myModalForm" class="modal fade bs-example-modal-lg" role="dialog" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h4 class="modal-title">Update Form</h4> </div> <div class="modal-body"> <div class="alert alert-danger hide"><a href="#" class="close" data-dismiss="alert" aria-label="close">x</a></div> <div class="row"> <input type="hidden" name="id" id="id"> <input type="hidden" name="status" id="status"> <div class="col-xs-4"> <fieldset class="scheduler-border"> <legend class="scheduler-border">Source</legend> <div class="form-group row"> <label for="src" class="col-sm-3 col-form-label">Source</label> <div class="col-sm-9"> <input type="input" class="form-control" name="src" id="src" placeholder="Source"> </div> </div> <div class="form-group row"> <label for="src_desc" class="col-sm-3 col-form-label">Hostname</label> <div class="col-sm-9"> <input type="input" class="form-control" name="src_desc" id="src_desc" placeholder="Hostname"> </div> </div> </fieldset> </div> <div class="col-xs-4"> <fieldset class="scheduler-border"> <legend class="scheduler-border">Destination</legend> <div class="form-group row"> <label for="dst" class="col-sm-3 col-form-label">Dest</label> <div class="col-sm-9"> <input type="input" class="form-control" name="dst" id="dst" placeholder="Dest"> </div> </div> <div class="form-group row"> <label for="dst_desc" class="col-sm-3 col-form-label">Hostname</label> <div class="col-sm-9"> <input type="input" class="form-control" name="dst_desc" id="dst_desc" placeholder="Hostname"> </div> </div> </fieldset> </div> <div class="col-xs-4"> <div class="form-group row"> <label for="protocol" class="col-sm-3 col-form-label">Protocol</label> <div class="col-sm-9"> <select class="form-control" name="protocol" id="protocol"> <option value="IP">IP</option> <option value="IP">IP</option> <option value="TCP">TCP</option> <option value="TCP">TCP</option> <option value="UDP">UDP</option> <option value="UDP">UDP</option> <option value="ICMP">ICMP</option> <option value="ICMP">ICMP</option> </select> </div> </div> <div class="form-group row"> <label for="ports" class="col-sm-3 col-form-label">Port</label> <div class="col-sm-9"> <input type="input" class="form-control" name="ports" id="ports" placeholder="Ports"> </div> </div> <div class="form-group row"> <label for="remarks" class="col-sm-3 col-form-label">Remarks</label> <div class="col-sm-9"> <input type="input" class="form-control" name="remarks" id="remarks" placeholder="Remarks"> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-success"><i class="fa fa-floppy-o" aria-hidden="true"></i>submit</button> <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-ban" aria-hidden="true"></i>cancel</button> </div> </div> </div> </div> </form> 

Answer 1

The name of the form in your selector, $("form[name='frmAddCMRow']") , does not match the name of your actual form, frm_rename_commsmatrix . Therefore, the jQuery Validate plugin is not being initialized on your form.

Try $("form[name='frm_rename_commsmatrix']") instead.