Bootstrap validator email notempty

Question

I have this input:

<input type="text" name="email" size="40" class="wpcf7-form-control wpcf7-text form-control input-lg" id="email" aria-required="true" aria-invalid="false" required placeholder="E-mail (obligatoriu)">

I am using this script to validate it :

      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"> </script>

It works well but when I clear the input but it shows that is still valid. This is only a show problem cause it doesn't let me send the form if it's empty.

Here I have the validate rules :

                    email: {
                    validators: {
                        notEmpty: {
                            message: 'Adresa de email este un camp obligatoriu'
                        },
                        emailAddress: {
                            message: 'Adresa de email nu este corecta'
                        }
                    }
                },

Answer 1

Hope this helps.

$(document).ready(function () {
 $('#cereForm').bootstrapValidator({
  message: 'This value is not valid',
  feedbackIcons: {
   valid: 'glyphicon glyphicon-ok',
   invalid: 'glyphicon glyphicon-remove',
   validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
   nume: {
    validators: {
     notEmpty: {
      message: 'Numele este un camp obligatoriu'
     }
    }
   },
   email: {
    validators: {
     notEmpty: {
      message: 'Email address is mandatory'
     },
     emailAddress: {
      message: 'The input is not a valid email address'
     }
    }
   },
   telefon: {
    validators: {
     phone: {
      country: 'RO',
      message: 'Acest numar de telefon nu este corect'
     }
    }
   },
   mesaj: {
    validators: {
     notEmpty: {
      message: 'The content is required and cannot be empty'
     },
     stringLength: {
      max: 500,
      message: 'Mesajul este prea lung'
     }
    }
   },
  }
 });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

<form id="cereForm">
 <div class="row">
  <div class="col-sm-6 col-md-6">
   <div class="form-group">
    <span class="wpcf7-form-control-wrap nume">
     <input type="text" name="nume" value="" size="40" class="wpcf7-form-control wpcf7-text  form-control input-lg" id="nume" aria-required="true" aria-invalid="false" placeholder="Nume (obligatoriu)">
    </span>
   </div>
   <div class="form-group">
    <span class="wpcf7-form-control-wrap email">
     <input type="text" name="email" size="40" class="wpcf7-form-control wpcf7-text form-control input-lg" id="email" placeholder="E-mail (obligatoriu)">
    </span>
   </div>
   <div class="form-group">
    <span class="wpcf7-form-control-wrap telefon">
     <input type="telefon" name="telefon" value="" size="40" class="wpcf7-form-control wpcf7-text form-control input-lg" id="telefon" aria-required="true" aria-invalid="false" placeholder="Telefon">
    </span>
   </div>
   <div class="form-group">
    <label class="labelformular">De la:</label>
    <div class="input-group date datepicker" id="data1" data-date-format="dd-mm-yyyy">
     <input class="wpcf7-form-control wpcf7-text  form-control input-lg data1" name="data1" type="text" readonly />
     <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
   </div>
   <p></p>
  </div>
  <div class="col-sm-6 col-md-6">
   <div class="form-group">
    <span class="wpcf7-form-control-wrap mesaj">
     <textarea type="text" name="mesaj" class="wpcf7-form-control wpcf7-text  form-control input-lg mesaj" id="mesaj" aria-required="true" aria-invalid="false" placeholder="Mesaj"></textarea>
    </span>
   </div>
   <div class="form-group">
    <label class="labelformular">Pana la:</label>
    <div class="input-group date datepicker" data-date-format="dd-mm-yyyy">
     <input class="wpcf7-form-control wpcf7-text  form-control input-lg data2" name="data2" type="text" readonly />
     <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
   </div>
  </div>
  <div class="col-sm-12 col-md-12">
   <input type="submit" value="Trimite mesaj" class="wpcf7-form-control wpcf7-submit">
  </div>
 </div>
</form>