有効でない場合、jqueryバリデーターはまだ閉じています

Question

私は何が間違っているのか分かりません。私はフォームでモーダルを行いました。フォームが有効であるかどうかチェックします。.valid();あなたが何か間違ってフィールドが赤く変わった場合でもjqueryバリデーターがあなたが何か間違っていることを検出しました。true私はなぜこれが起きているのか検索しています今一日私はおそらく皆さんのうちの1人が知っていると思いました。ここ

は作業snippletは、事前にhttps://jsfiddle.net/jgytud7h/6/

感謝です！

EDIT：最初のフィールドに入力してタイプを選択した場合。それはフォームが私の目では有効ではない厳しい場合でも閉じます。

HTML：

<span class="data-label" data-toggle="modal" data-target="#adddnsmodal" onclick="">Add DNS</span>         <div class="modal fade" id="adddnsmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" 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" id="myModalLabel">Add DNS</h4> 
      </div> 
      <div class="modal-body"> 
       <form id="modalvalidate" name="validatemodal1"> 
        <div class="input-group"> 
         <input type="text" id="domainadd" class="form-control" value="test" disabled> 
         <span class="input-group-addon">Domain</span> 
        </div> 
        <br> 
        <div class="input-group"> 
         <input type="text" id="extadd" class="form-control" value="nl" disabled> 
         <span class="input-group-addon">Extention</span> 
        </div> 
        <br> 
        <div class="input-group"> 
         <input type="text" id="nameadd" class="form-control subdomain" required> 
         <span class="input-group-addon">Sub domain</span> 
        </div> 
        <br> 
        <div class="input-group"> 
         <input type="text" id="contentadd" class="form-control" required> 
         <span class="input-group-addon">Content</span> 
        </div> 
        <br> 
        <div class="input-group"> 
         <input type="number" id="prioadd" class="form-control prio" required> 
         <span class="input-group-addon">Prio</span> 
        </div> 
        <br> 
        <div class="input-group"> 
         <input type="number" id="ttladd" class="form-control onlynumbers" required> 
         <span class="input-group-addon">TTL</span> 
        </div> 
        <br> 
        <div class="input-group"> 
         <select class="form-control" id="typeadd"> 
          <option value="notselected" selected disabled>Select a type</option> 
          <option value="A">A</option> 
          <option value="AAAA">AAAA</option> 
          <option value="CNAME">CNAME</option> 
          <option value="MX">MX</option> 
          <option value="SOA">SOA</option> 
          <option value="TXT">TXT</option> 
          <option value="SRV">SRV</option> 
         </select> 
        </div> 

       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-success" id="adddnssave">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 

のjQuery：

.validator.addMethod("subdomain", function(value, element) { 
    return this.optional(element) || /^[A-Za-z0-9](?:[A-Za-z0-9\-]{0,61}[A-Za-z0-9])?$/i.test(value); 
    },"<strong>Error! </strong>Invalid subdomain.<span></span><button type='button' class='close' onclick='removeMSG()' aria-label='Close'><span aria-hidden='true'>&times;</span></button>"); 

$.validator.addMethod("domain", function(value, element) { 
    return this.optional(element) || /^(([a-zA-Z]{1})|([a-zA-Z]{1}[a-zA-Z]{1})|([a-zA-Z]{1}[0-9]{1})|([0-9]{1}[a-zA-Z]{1})|([a-zA-Z0-9][a-zA-Z0-9-_]{1,61}[a-zA-Z0-9]))\.([a-zA-Z]{2,6}|[a-zA-Z0-9-]{2,30}\.[a-zA-Z]{2,3})$/i.test(value); 
    },"<strong>Error! </strong>Invalid domain.<span></span><button type='button' class='close' onclick='removeMSG()' aria-  label='Close'><span aria-hidden='true'>&times;</span></button>"); 

$.validator.addMethod("prio", function(value, element) { 
    return this.optional(element) || /^(10|1)$/i.test(value); 
    },"<strong>Error! </strong>Invalid Prio.<span></span><button type='button' class='close' onclick='removeMSG()' aria-label='Close'><span aria-hidden='true'>&times;</span></button>"); 

$.validator.addMethod("onlynumbers", function(value, element) { 
    return this.optional(element) || /^[0-9]+$/i.test(value); 
    },"<strong>Error! </strong>Field Must contain only numbers<span></span><button type='button' class='close' onclick='removeMSG()' aria-label='Close'><span aria-hidden='true'>&times;</span></button>"); 




$('form[name*="validate"]').validate({ 
     errorElement:'div', 
     errorClass: 'alert alert-danger', 
     validClass: 'alert-success', 
     onkeyup: false, 
     onclick: false, 
     errorPlacement: function(error, element) { 
      error.addClass('messagediv2'); 
      error.addClass('page-controls'); 
      error.insertAfter("h4.modal-title"); 

     } 
    }); 
    $('form[name*="validate"]').on('change', function(){ 
     $(this).validate(); 
     if ($(this).valid) { 
      $(".messagediv2").remove(); 
     } 
    }); 




$('#adddnssave').on('click', function() { 
     $('#adddnssave').prop('disabled', true); 

       if ($('#typeadd').val() != 'notselected' && $('#typeadd').val() != null) { 
        if ($('form[name*="validate"]').valid()) { 
         $.ajax({ 
          url: "", 
          type: "post", 
          data: { 
           domain: $('#domainadd').val(), 
           ext: $('#extadd').val(), 
           name: $('#nameadd').val(), 
           type: $('#typeadd').val(), 
           content: $('#contentadd').val(), 
           prio: $('#prioadd').val(), 
           ttl: $('#ttladd').val() 
          }, 
          dataType: "json", 
          success: function (response) { 
           var message = 
            '<div class="page-controls alert alert-success" style="top:50px;position:relative;border-radius: 0 0 0.25rem 0.25rem;">' + 
            '<strong>' + response + ' </strong> <span>DNS is successfully added</span>' + 
            '<button type="button" class="close" aria-label="Close">' + 
            '<span aria-hidden="true" onclick="removeMSG()" >&times;</span>' + 
            '</button>' + 
            '</div>'; 
           $('#adddnsmodal').modal('hide'); 
           $("#navbarmenue").after(message); 
           setTimeout(function() { 
            $('#adddnssave').prop('disabled', false); 
           }, 2000); 

          }, 
          error: function (jqXHR, textStatus, errorThrown) { 
           setTimeout(function() { 
            $('#adddnssave').prop('disabled', false); 
           }, 1500); 
           console.log(textStatus, errorThrown, 'error'); 

          } 
         }); 
        } else { 
         $('#adddnssave').prop('disabled', false); 
          var message = 
            '<div class="page-controls alert alert-danger" style="top:50px;position:relative;border-radius: 0 0 0.25rem 0.25rem;">' + 
            '<strong>' + response + ' </strong> <span>Modal is not valid</span>' + 
            '<button type="button" class="close" aria-label="Close">' + 
            '<span aria-hidden="true" onclick="removeMSG()" >&times;</span>' + 
            '</button>' + 
            '</div>'; 
           $("#navbarmenue").after(message); 
        } 


       } else { 
        var message = 
         '<div class="page-controls alert alert-danger messagediv2">' + 
         '<strong>Error </strong> <span>Select a type</span>' + 
         '<button type="button" class="close" aria-label="Close">' + 
         '<span aria-hidden="true" onclick="removeMSG()" >&times;</span>' + 
         '</button>' + 
         '</div>'; 
        $("h4.modal-title").before(message); 
        setTimeout(function() { 
         $('#adddnssave').prop('disabled', false); 
        }, 1500); 
       } 
      }); 

Answer 1

あなたjsfiddleの例では、有効なフォームをチェックしているが、有効なプロパティが、関数ではありません。

変更この：

if ($('form[name*="validate"]').valid) { 

例

if ($('form[name*="validate"]').valid()) { 

へ here

アップデート：別の問題jqueryの検証のための必須の名前属性が欠落していたということでした。名前属性を追加すると問題が解決しました。