javascript - jQuery 的 val() 在 bootstrap popover 输入字段上返回空字符串

Question

我有一个带有几个输入字段的 Bootstrap 弹出表单。我在表单中添加了一个提交按钮，用于触发客户端 JS 验证。但是，当单击按钮时，输入字段的当前值不会被 jQuery 的 val() 方法捕获:我只是得到一个空字符串。

这是标记:

<div class="popover fade right in" style="top: -154.5px; left: 249px; display: block;">
    <div class="arrow">
    </div>
    <h3 class="popover-title">New Job Site contact</h3>
    <div class="popover-content">
        <form class="popover-form form-horizontal" id="newjobsite_contact_form" accept-charset="utf-8" method="post" action="http://dev.temperature/home/#">
            <div class="form-group">
                <div class=" required ">
                    <input type="text" class="form-control" id="popover-first_name" required="1" placeholder="First name" value="" name="first_name">
                </div>
                <div class=" required ">
                    <input type="text" class="form-control" required="1" placeholder="Surname" value="" name="surname">
                </div>
                <div class=" required ">
                    <input type="text" class="form-control" required="1" placeholder="Phone" value="" name="phone">
                </div>
                <div class="">
                    <input type="text" class="form-control" placeholder="Mobile" value="" name="mobile">
                </div>
                <div class="">
                    <input type="email" class="form-control" placeholder="Email" value="" name="email">
                </div>
                <div class="">
                    <input type="url" class="form-control" placeholder="Website" value="" name="website">
                </div>
            </div>
            <div class="popover_buttons">
                <button class="btn btn-success" onclick="submit_newjobsite_contact(); return false;" type="button" id="newjobsite_contact_submit">Submit</button>
                <button class="btn btn-warning" onclick="close_newjobsite_contact(); return false;" type="button" id="newjobsite_contact_cancel">Cancel</button>
            </div>
        </form>
    </div>
</div>

这是JS:

function submit_newjobsite_contact() {
    errors_found = validate_popover_form($('#newjobsite_contact_form'));

    if (errors_found.length == 0) {
        // Form values submitted to PHP code through AJAX request here 
    } else {
        error_msg = "Please check the following errors:\n";
        $(errors_found).each(function(key, item) {
            error_msg += "- "+item.message+"\n";
        });
        alert(error_msg);
    }
}

function validate_popover_form(form_element) {
    found_errors = [];
    $('span.error').remove();

    form_element.find('select,input').each(function(key, item) {
        if ($(item).attr('required') && $(item).val().length == 0) {
            found_error = true;
            found_errors.push({elementname: $(item).attr('name'), message: "A value for "+$(item).attr('placeholder')+" is required"});
        }

        console.log($(item).val()); // More validation here, just putting debugging code instead
    });
    return found_errors;
}

我做错了什么？这些输入字段的所有其他属性都由 jQuery 正确检索，只是不是我在其中键入文本后的值。

Answer 1

这里找不到这个问题的答案，因为我没有贴出整个源JS，太大了。真正发生的是我不小心克隆了弹出窗口表单，导致输入字段重复。