-1
我想使用Bootstrap 3.2 + securimage captcha附加組件創建我自己的聯繫表單驗證腳本。但是，我的input + textarea元素的ID被返回爲'undefined' - 使我的函數顯示無用的錯誤。調用ID返回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/
謝謝你，乾杯！