Вызов для возвращаемых идентификаторов

Question

Я хочу создать свой собственный скрипт проверки формы контакта, используя Bootstrap 3.2 + securimage captcha add-on. Однако идентификаторы элементов ввода + textarea возвращаются как «undefined» - рендеринг моей функции, чтобы показывать ошибки бесполезно.

Интересно, что мне не хватало. Надеюсь, кто-то может указать мне в правильном направлении. Я использую jQuery 1.11 кстати.

Вот мой HTML код:

<form name="sentMessage" id="contactForm" novalidate> 
    <div class="row control-group"> 
     <div class="form-group col-xs-12 floating-label-form-group controls"> 
      <b><label class="toFade">Name</label></b> 
      <div class="input-group"> 
       <input type="text" id="contact-name" class="form-control toFade" placeholder="Name" /> 
       <span class="input-group-addon toFade"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> 
      </div> 
      <p class="help-block text-danger hidden-elem">Please input name!</p> 
     </div> 
    </div> 
    <div class="row control-group"> 
     <div class="form-group col-xs-12 floating-label-form-group controls"> 
      <b><label class="toFade">Email Address</label></b> 
      <div class="input-group"> 
       <input type="text" id="contact-email" class="form-control toFade" placeholder="Email Address" /> 
       <span class="input-group-addon toFade"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> 
      </div> 
      <p class="help-block text-danger hidden-elem">Please input e-mail!</p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-offset-1 col-xs-4 toFade"> 
      <img id="captcha" src="lib/securimage/securimage_show.php" alt="CAPTCHA Image" /> 
     </div> 
     <div class="col-xs-4 toFade"> 
      <input type="button" id="btnChangeCaptcha" class="btn btn-info btn-sm" value="Change captcha image" /> 
     </div> 
    </div> 
    <div class="row control-group margin-custom-xs"> 
     <div class="form-group col-xs-12 floating-label-form-group controls"> 
      <b><label class="toFade">Making sure you aren't a robot</label></b> 
      <div class="input-group"> 
       <input type="text" id="contact-captcha" class="form-control toFade" placeholder="Captcha code shown above" /> 
       <span class="input-group-addon toFade"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> 
      </div> 
      <p id="error-captcha" class="help-block text-danger"></p> 
     </div> 
    </div> 
    <div class="row control-group"> 
     <div class="form-group col-xs-12 floating-label-form-group controls"> 
      <b><label class="toFade">Message</label></b> 
      <div class="input-group"> 
       <textarea rows="5" id="contact-message" class="form-control toFade" placeholder="Message"></textarea> 
       <span class="input-group-addon toFade"><i class="glyphicon glyphicon-ok form-control-feedback"></i></span> 
      </div> 
      <p class="help-block text-danger hidden-elem">Please input message!</p> 
     </div> 
    </div> 
    <br /> 
    <div id="success"></div> 
    <div class="row text-center"> 
     <div class="form-group col-xs-12"> 
      <button type="submit" id="submitFeedback" class="btn btn-custom btn-lg toFade">Send</button> 
     </div> 
    </div> 
</form> 

И моя функция JQuery:

// contact form submit 
    $('#submitFeedback').click(function() 
    { 
     var hasErrors = false; 

     // clear error messages 
     contactForm.clearErrors(); 

     // can skip buttons because it has values 
     $('#contactForm input, textarea').each(function() { 
      if(!$(this).val()) { 
       alert($(this).id); 
       hasErrors = true; 
       contactForm.addError($(this)); 
      } 
     }); 

     if(hasErrors) { 
      return false; 
     } 
    }); 

var contactForm = { 
    clearErrors: function() { 
     $('.help-block').hide(); 
    }, 
    addError: function($input) { 
     $input.siblings('.help-block').show(); 
    } 
}; 

Примечания: Опущено $(function()..., так как исходный код, который я вставил сюда пришел из моей ссылки jsFiddle ,

jsFiddle: http://jsfiddle.net/02t0kx9d/

Спасибо и ура!

Answer 1

$(this).id должен быть $(this).attr('id') или this.id

Answer 2

Используйте this.id или $ (это) .attr ('Id').

Оба будут работать.