jQueryフォームの検証で入力名が取得されない

Question

jQuery form validationプラグインを使用してフォームを検証しています。何らかの理由で、私のフォームの名前を拾っていないし、私は理由を把握することができませんでした。 JSでコードを検証しようとすると、 は入力要素を参照できません。ここにコードと発生しているもののスクリーンショットがあります。何か案は？

<form id="submit-form"> 
    <label for="app-name-form"> 
    <input name="app-name-form" type="text" id="app-name-form"/> 
    <div class="label-text">App Name</div> 
    </label> 

    <label for="team-name-form"> 
    <input type="text" id="team-name-form" name="team-name-form"/> 
    <div class="label-text">Team</div> 
    </label> 

    <label> 
      <input type="submit" class="btn" value="Submit" name="saveForm" id="saveForm"/> 
    </label> 

</form> 


<script> 
    $(document).ready(function(){ 
    $("#submit-form").validate({ 
     rules: { 
      app-name-form: "required" 
     }, 
     messages: { 
      app-name-form: { 
       required: "Enter name pls" 
      } 
     } 
    }); 
    }); 

    $('#saveForm').click(function(e) { 

    }); 
</script> 

Answer 1

ダッシュはjavascriptの変数名に法的ではありません。通訳者はそれらを正しく解析しません。このため、あなたは通訳を回避する必要があります。

何かのように：代わりの

rules: { 
    "app-name-form": "required" 
} 

元（引用符なし）：それはMath subtraction operatorあるので、あなたはjavascriptの変数の名前にマイナス記号を使用することはできません

rules: { 
    app-name-form: "required" 
} 

Answer 2

、それはちょうど''の間にIDを置くことを働かせるために。

$(document).ready(function(){ 
 
    $("#submit-form").validate({ 
 
     rules: { 
 
      'app-name-form': "required" 
 
     }, 
 
     messages: { 
 
      'app-name-form': { 
 
       required: "Enter name pls" 
 
      } 
 
     } 
 
    }); 
 
    }); 
 

 
    $('#saveForm').click(function(e) { 
 

 
    });

<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.15.0/jquery.validate.js"></script> 
 
<form id="submit-form"> 
 
    <label for="app-name-form"> 
 
    <input name="app-name-form" type="text" id="app-name-form"/> 
 
    <div class="label-text">App Name</div> 
 
    </label> 
 

 
    <label for="team-name-form"> 
 
    <input type="text" id="team-name-form" name="team-name-form"/> 
 
    <div class="label-text">Team</div> 
 
    </label> 
 

 
    <label> 
 
      <input type="submit" class="btn" value="Submit" name="saveForm" id="saveForm"/> 
 
    </label> 
 

 
</form>