jQuery 的 val() 在引导弹出框输入字段上返回空字符串

Question

我有一个带有一些输入字段的引导弹出表单。我在表单中添加了一个提交按钮，它会触发客户端 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，太大了。真正发生的是我不小心克隆了弹出框，导致输入字段重复。

Answer 2

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"});
        }

我修改为：

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

尝试使用数据属性，所以不要使用required="1"，而是使用data-required="1"

<input type="text" class="form-control" required="1" placeholder="Surname" value="" name="surname">

所以你的输入应该是这样的：

<input type="text" class="form-control" data-required="1" placeholder="Surname" value="" name="surname">