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，它太大了。真正发生的是我不小心克隆了弹出窗口，这导致了输入字段的重复。

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">

jQuery val（）在bootstrap popover输入字段中返回空字符串

2 个答案: