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>