不包括“必需”HTML输入属性中断Jquery表单验证

Question

我在django页面中使用带有bootstrap3的jquery验证器插件。在我的主页中我有：

<!-- jQuery -->
<script src="../static/js/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/val.js"></script>(http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js">).

django表单模板：

{% block 'form' %}

<form id="form" class="form-vertical" action="" method="post">
{% csrf_token %}
 <h2><small>(I'm interested! Please contact me to get started.)</small></h2>
 <!-- Text input-->
<div class="form-group">
     <div class="col-lg-10">

  <label class="control-label" for="FirstName">First Name</label>
    <input class="form-control" id="FirstName" name="FirstName" type="text" class="input-xlarge form-control" required="">

  </div>
</div>


<!-- Text input-->
<div class="form-group">
    <div class="col-lg-10">

  <label class="control-label" for="LastName">Last Name</label>
    <input class="form-control" id="LastName" name="LastName" type="text"  class="input-xlarge form-control" required="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
        <div class="col-lg-10">

  <label class="control-label" for="Email">Email</label>

    <input class="form-control" id="Email" name="Email" type="text" class="input-xlarge form-control" required="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
        <div class="col-lg-10">

  <label class="control-label" for="Phone">Phone</label>
    <input class="form-control" id="Phone" name="Phone" type="text" class="input-xlarge form-control" required="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
        <div class="col-lg-10">

  <label class="control-label" for="Fax">Fax</label>

    <input class="form-control" id="Fax" name="Fax" type="text"  class="input-xlarge form-control">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
    <div class="col-lg-10">

  <label class="control-label" for="Street">Street</label>

    <input class="form-control" id="Street" name="Street" type="text"  class="input-xlarge form-control" required="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
        <div class="col-lg-10">

  <label class="control-label" for="City">City</label>

    <input class="form-control" id="City" name="City" type="text"  class="input-xlarge form-control" required="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
        <div class="col-lg-10">

  <label class="control-label" for="State">State</label>

    <input class="form-control" id="State" name="State" type="text"  class="input-xlarge form-control" required="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
        <div class="col-lg-10">

  <label class="control-label" for="Zip">Zip</label>

    <input class="form-control" id="Zip" name="Zip" type="text" class="input-xlarge form-control" required="">

  </div>
</div>

<!-- Textarea -->
<div class="form-group">
        <div class="col-lg-10">

  <label class="control-label" for="Comments/Questions">Comments</label>
    <textarea class="form-control" id="Comments" name="Comments"></textarea>
  </div>
</div>
<!--<div class="form-group">
            <label class="control-label" for="message">Agree</label>
<div class="controls">
             <input id="agree" class="checkbox" type="checkbox" name="agree"></div>
</div>-->
<div class="form-actions" >

    <div class="col-lg-10">
            <button type="submit" class="btn btn-success btn-lg">Register</button>
            <button type="reset" class="btn btn-default">Cancel</button></div>
    </div>
</form>


{% endblock %}

'val.js'是：

$('form').validate({
    rules: {
        FirstName: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        LastName: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        Email: {
          required: true,
          email: true
        },
         Phone: {
             required: true,
             phoneUS: true
          //},
          //Fax: {
          //  phoneUS: true
          //},
          //  Street: {
          //  required: true
          //},
          //    City: {
          //  required: true
          //},
          //    State: {
          //  required: true
          //},
          //    Zip: {
          //  zipcodeUS: true
          }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

萤火虫没有错误。

这样可以正常工作如果我保持原样。一旦我取消注释'传真'部分，验证文件就会停止工作。

如果我将表单更改为：

，我也会看到

<input class="form-control" id="Fax" name="Fax" type="text"  class="input-xlarge form-control" required="">

整个表格都有效。

为什么，我该如何解决这个问题？