Set the property required at checkbox in bootstrap

html forms validation twitter-bootstrap checkbox

20,022

A JQuery validation plugin for bootstrap forms:

http://reactiveraven.github.io/jqBootstrapValidation/

20,022

Author by

Dany

iOS objective-c angularjs javascript jquery php java j2ee semantic-web crawling linked-data agile-methodologies seo sparql mysql postgresql sql-server neo4j lucene solr tomcat jboss startup lean-startup

Updated on July 09, 2022

Comments

Dany almost 2 years

I have a simple form with a text-input and two checkbox and I need to set the property "required" at checkbox (I need that at least one of that checkbox is checked).

<div class="control-group">
    <label class="control-label" for="inputEmail"><?= $this->labelfieldEmail; ?></label>
    <div class="controls">
        <input type="text" name="email" id="emailField"
        placeholder="Email" required>
    </div>
</div>

<div class="control-group">
    <label class="control-label" for="productField"><?= $this->labelfieldProduct; ?></label>
    <div class="controls" >
        <input type="checkbox" id="inlineCheckbox1" value="widget" name="product[]" <?php if ($this->selectedProduct == "widget") { echo "checked"; }?>/> 
        Widget for website
        <br/>
        <input type="checkbox" id="inlineCheckbox2" value="app" name="product[]" <?php if ($this->selectedProduct == "app") { echo "checked"; }?>/> 
        App mobile
    </div>
</div>

Please, Any suggests?

EDIT

I tried to use jqBootstrapValidation library in the follow way, but it doesn't works: 1. add library 2. Add this into <head> tag:

<script>
$(function () { 
    $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); 
});
</script>

3 this is my form code:

<form class="form-horizontal" method="POST" action="<?= $this->baseUrl($this->pathBusinessThankyou);?>">
    <div class="row-fluid">

        <div class="row-fluid">
            <br />
            <div class="control-group">
                <label class="control-label" for="inputName"><?= $this->labelfieldName; ?></label>
                <div class="controls">
                    <input type="text" id="fullnameField" name="fullname" required />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputEmail"><?= $this->labelfieldEmail; ?></label>
                <div class="controls">
                    <input type="email" id="emailField" name="email" required />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="productField"><?= $this->labelfieldProduct; ?></label>
                <div class="controls" >
                    <label class="checkbox">
                        <input type="checkbox" 
                        data-validation-minchecked-message="<?= $this->validationOneProduct; ?>" 
                        data-validation-minchecked-minchecked="1" value="widget" name="product[]" 
                        <?php if ($this->selectedProduct == "widget") { echo "checked"; }?> />
                        Widget per il tuo sito
                    </label>
                    <label class="checkbox">
                        <input type="checkbox" value="app" name="product[]" aria-invalid="false"
                        <?php if ($this->selectedProduct == "app") { echo "checked"; }?> />
                        App per il tuo hotel
                    </label>
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="inputEmail"><?= $this->labelfieldNote; ?></label>
                <div class="controls">
                    <textarea rows="3" name="comment" id="commentField"></textarea>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <button type="submit" class="btn input-block-level btn-large btn-success">
                        <?= $this->labelSendRequest; ?>
                        <i class="icon-ok icon-white"></i>
                    </button>
                </div>
            </div>  
        </div>
    </div>
</form>

Dany almost 11 years

Thanks, I'm tring to use that library but it don't works. I have followed the free step on documetation but it don't works
Arbaoui Mehdi almost 11 years

Do you have any external link to see what type of problem do you have ?
Dany almost 11 years

thanks a lot, my problem was that don't found the library :D, I had a mistake :D