jquery validate verhindern Formular vom Einreichen

Question

Ich bin mir nicht sicher, warum dieses Formular einreicht. Ich habe den Code von anderen Beispielen kopiert und ersetzte es mit meinem Inhalt, aber es trägt weiter das Formular, obwohl ich return false

eingeschoben habe Auch wenn Häfen ICMP es ausgewählt wird, validiert es nicht die anderen Regeln und legt das ab bilden.

$("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 des Formulars in Ihren Wählern, $("form[name='frmAddCMRow']"), entspricht nicht die name Ihre tatsächliche Form, frm_rename_commsmatrix. Daher wird das jQuery Validate-Plugin nicht in Ihrem Formular initialisiert.

Versuchen Sie stattdessen $("form[name='frm_rename_commsmatrix']").