jQuery Проверка правильности размещения и необходимого размещения текста

Question

Я создал форму, для которой я использую jQuery validate, и мне нужно было переместить сообщения об ошибках для двух полей, поэтому я нашел здесь пример, который показал, как это сделать, и он отлично работал. За исключением того, что теперь «обязательные» поля не все работают. Вот мой код формы:

<form id="myForm"> 
  <div class="form-group">
    <label for="x_po_num">Account Number</label>
    <input type="text" class="form-control" name="x_po_num" id="x_po_num">       
  </div>
  <div class="form-group">
      <label for="x_invoice_num">Invoice Number</label>
      <div class="input-group">
        <div class="input-group-addon">9</div> 
        <input class="form-control" name="x_invoice_num" id="x_invoice_num" data-error="#invError">
      </div>         
      <div id="invError"></div>
  </div>        
  <div class="form-group">
      <label for="x_reference_3">Reference Number</label>
      <input class="form-control" name="x_reference_3" id="x_reference_3" placeholder="Optional" >          
  </div>
  <div class="form-group">
      <label for="x_amount">Amount</label>
      <div class="input-group">
        <div class="input-group-addon">$</div>              
        <input class="form-control" name="x_amount" id="x_amount" data-error="#amtError">
      </div>
      <div id="amtError"></div>
  </div>     
  <input class="btn btn-primary" value="Pay With Your Credit Card" type="submit"> 
</form>

А вот мой код проверки JQuery:

$( "#myForm" ).validate({
    rules: {
      x_po_num: {
        required: true,
        digits: true,
        minlength: 11,
        maxlength: 11
      },
      x_invoice_num: {
        required: true,
        digits: true,            
        maxlength: 9,
        minlength: 7,
        normalizer: function( value ) {
          var inv = value;
          inv = "9" + inv;             
          return inv;             
        } 
      },
      x_reference_3: {
        digits: true,
        maxlength: 9,
      },
      x_amount: {
        required: true,
        number: true
      }
    },
    messages: {              
      x_po_num: {
        required: "Please enter an account number",
        minlength: "The account number must be 11 digits long",
        maxlength: "The account number must be 11 digits long",
        digits: "Please enter digits only, no spaces"
      },
      x_invoice_num: {
        required: "Please enter an invoice number",         
        maxlength: "The invoice number must be 10 digits or less",
        minlength: "The invoice number must be at least 8 digits long",
        digits: "Please enter digits only, no spaces"
      },
      x_reference_3: {
        digits: "Please enter digits only",
        maxlength: "The reference number must be 9 digits or less"
      },
      x_amount:{
        required: "Please enter an amount"
      }

    },
    errorPlacement: function(error, element) {
      var placement = $(element).data('error');
      if (placement) {
        $(placement).append(error)
      } else {
        error.insertAfter(element);
      }
    }   
});

Вот проблема:

Два поля, которые мне понадобились для перемещения сообщений об ошибках (номер счета и сумма), теперь находятся в правильных местах. Однако, если я открою форму и нажму «Отправить», не введя никаких данных, я ожидаю, что в номере счета появится сообщение об ошибке «Пожалуйста, введите номер счета», но это не так. Никаких ошибок не отображается.

Answer 1

Оказывается, это была функция нормализатора. Я вынул его и добавил цифру с моим onSubmit и проблема решена.