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"
}

而不是您的原件（不带引号）：

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

Answer 2

您不能在 javascript 变量的名称中使用减号，因为它是 Math subtraction operator，要使其正常工作，只需将 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>