Question

我想使用Bootstrap 3.2 + securimage captcha附加组件创建自己的联系表单验证脚本。但是，我的input + textarea元素的ID将被返回为＆＃39; undefined＆＃39; - 渲染我的函数以显示错误无用。

我不知道我错过了什么。我希望有人能指出我正确的方向。我正在使用jQuery 1.11 btw。

这是我的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或$（this）.attr（＆＃39; Id＆＃39;）。

两者都有效..

调用返回未定义的ID

2 个答案: