i am using Bootstrap to make a webpage. I have a simple code with 1 input and 1 button. when you press the button, which contains the input is stored in the database. but if the input is empty also saves it to the database. I can do the validation with javascript but i want to know if bootstrap have an option to validate this. For example forms in bootstrap validate it, but i dont want to use a form.

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

i am using Bootstrap to make a webpage. I have a simple code with 1 input and 1 button. when you press the button, which contains the input is stored in the database. but if the input is empty also saves it to the database. I can do the validation with javascript but i want to know if bootstrap have an option to validate this. For example forms in bootstrap validate it, but i dont want to use a form.

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

• javascript
• jquery
• html
• twitter-bootstrap-3

4 Answers 4

I'm not sure if you just copied a small portion of your HTML, but in your snippet you have an extra closing </div>. You can use jQuery to test if the input value is empty:

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

Bootply

I would use something like this:

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

The following code let's you write your click event as well as stop empty values.

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

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

If you're looking for a vanilla JavaScript solution, here is something i made for my to-do:

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