Question

我使用Bootstrap制作网页。我有一个简单的代码，1个输入和1个按钮。当您按下按钮时，其中包含的输入存储在数据库中。但如果输入为空，也会将其保存到数据库中。我可以使用javascript进行验证，但我想知道bootstrap是否有选项来验证这一点。例如，bootstrap中的表单验证它，但我不想使用表单。

<div class="row">
    <div class="col-md-4 col-md-offset-1">
        <div class="input-group input-group-lg"> <span class="input-group-addon"><span class="glyphicon glyphicon-fire"></span> </span>
            <input type="text" class="form-control" placeholder="Nombre Marca" id="marca" required>
        </div>
    </div>
</div>
<div class="row">
    <br />
    <div class="col-md-3 col-md-offset-1" align="center" onClick="guardar_marca()"> <a href="#" class="btn btn-primary" role="button">Guardar Marca</a>

    </div>
</div>

Answer 1

我不确定您是否只是复制了一小部分HTML，但在您的代码段中，您还有一个额外的结束</div>。您可以使用jQuery来测试输入值是否为空：

$('.btn').click(function(e) {
  if ($('input').val() === '') {
    e.preventDefault();
    alert('input is empty');
  }
});

Bootply

Answer 2

我会用这样的东西：

$("MYINPUT").on("change",function(){
  ($(this).val() === "") ? false : $("MYBUTTON").prop("disabled",false);
}

Answer 3

以下代码允许您编写点击事件以及停止空值。

$('.btn').click(function(){
    if($('#marca').val() === ''){
        alert('Empty field');
        return false;
    }

    //The rest of the logic you want to execute
})

Answer 4

如果你正在寻找一个普通的JavaScript解决方案，这是我为我的待办事项做的事情：

window.onkeyup = function(e) {
    var inputs = document.getElementsByClassName("c1"), inputsVal;
    for (i = 0; i < inputs.length; i++) {
        inputsVal = inputs[i].value;
        if (!inputsVal || inputsVal == "" || inputsVal == " ") {
            return false//if the inputsVal has 0 data, it will return false.
        }
    }
    if (event.which == 13) {
    Uilogic.saveitem();//function to actually send value to database
    }
};

如果字段为空引导程序，如何禁用发送按钮

4 个答案: