CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapvalidation
Gutierrez
Gutierrez

Reputation: 157

Bootstrap Validator Input Issue

i'm giving a try to Bootstrap Validator to validate the data of two inputs: a text area and a datepicker, so here is my page code:

<form name="Form">  
    <label><input type="radio" value="1" id="Rtipo-1-1"  required>Peticion</label>
    <label><input type="radio" value="4" id="Rtipo-1-2" required>Reclamo</label>
    <select class="form-control" id="Lista">
        <option value="0" >Opcion 1</option>
    </select>
    <select class="form-control" id="Lugar">
        <option value="0">Opcion 2</option>
    </select>
    <textarea placeholder="Descripcion del motivo" class="form-control" name="text"></textarea>
    <div class="input-group date" data-provide="datepicker" data-date-format="yyyy/mm/dd" data-date-end-date="0d">
        <input type="text" class="form-control">
        <div class="form-group">
            <div class="col-md-9 col-md-offset-3">
            <div id="messages"></div>
        </div>
    </div>
</form>
<button class="btn btn-primary"  type="button" onClick="Fin()">Guardar</button>

Then i have my JavaScript file to Validate the input

$(document).ready(function() {
    $('#Form').bootstrapValidator({
        container: '#messages',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            text: {
                validators: {
                    notEmpty: {
                        message: 'The full name is required and cannot be empty'
                    }
                }
            }
        }
    });
});

I finish my practice by clicking the button, it does not validate the textarea whether is empty or not.

So, i tried the validator with the text area (name="text") but it doesn't work, i don't know why.

i'm out of ideas for validation because i tried before with the property of HTML5 "required" but it doesn't work and that's why i read and tried with bootstrap validator.

I hope you can give a hand about my mistake or mistakes on my code, thanks for you time and attention.

P.D: The respective tools (bootstrap js and css, jquery, bootstrap validator js and css) were imported on my page and i tested them with a smaller page to see how it works, and it went good, but it doesn't on this case. my guide example was this one

http://www.dotnetcurry.com/jquery/1168/validate-form-jquery-bootstrap-validator

Upvotes: 0

Views: 1107

Answers (1)

jeremykenedy
jeremykenedy

Reputation: 4275

Your submit is outside of your <form> tags, if that <button type='button'> is your submit.

If it is, what is fin() and why is it not <button type='submit'>

The validator should also be called by a listener or on submit.

Upvotes: 1

Related Questions